Rails、Graphql、Apolloクライアントで無効な認証トークン

Question

Rails、Graphql、Apollo-Clientの基本的な設定は動作していますが、レール側に422個の「無効な認証トークン」の問題があります。

私のアポロの使用は間違っていますか？

これは、graphql gemとapolloクライアントを搭載したRails 5アプリです。

const csrfToken = document.getElementsByName('csrf-token')[0].content 
const client = new ApolloClient({ 
    networkInterface: createNetworkInterface({ 
    uri: '/graphql', 
    credentials: 'same-origin', 
    headers: { 
     'X-CSRF-Token': csrfToken 
    } 
    }), 
}); 
client.query({ 
query: gql` 
    query Camillo2 { 
     user { 
     id 
     email 
     created_at 
     } 
    } 
    `, 
}) 
.then(data => console.log(data)) 
.catch(error => console.error(error)); 

Railsはログイン：

Started POST "/graphql" for ::1 at 2017-03-10 08:51:58 -0800 
Processing by GraphqlController#create as */* 
Parameters: {"query"=>"query Camillo2 {\n user {\n id\n email\n created_at\n __typename\n }\n}\n", "operationName"=>"Camillo2", "graphql"=>{"query"=>"query Camillo2 {\n user {\n id\n email\n created_at\n __typename\n }\n}\n", "operationName"=>"Camillo2"}} 
Can't verify CSRF token authenticity. 
Completed 422 Unprocessable Entity in 2ms (ActiveRecord: 0.0ms) 

Answer 1

私は他の日on Railsのアポロで実験されたが、ここで私のために働いた構成だ：、

var RailsNetworkInterface = apollo.createNetworkInterface('/graphql', { 
    credentials: 'same-origin', 
    headers: { 
    'X-CSRF-Token': $("meta[name=csrf-token]").attr("content"), 
    } 
}); 

var client = new apollo.ApolloClient({networkInterface: RailsNetworkInterface}) 

client.query({ query: gql`{ event(id: 7) { name } }`}) 

しかし、それは希望あなたのように思えますちょうど同様に働く！

適切なトークンがサーバーに送信されていることを確認できますか？たとえば、Chrome devtoolsのネットワークタブを開いてクエリを実行すると、「Request Headers」セクションにX-CSRF-Tokenが表示されますか？

また、RailsがDOM内のCSRFトークンを更新している可能性がありますが、NetworkInterfaceは古い失効したCSRFトークンを保持している可能性があります。 [リクエストヘッダー]セクションのトークンが<meta>タグの現在のの値と一致することを確認できますか？ （私はTurbolinksクラシックを使用して、この問題を自分自身に遭遇していなかったことに驚きました。）これは（私がreact_on_railsを使用しています）私のために働いた

Answer 2

：

import { ApolloClient, createNetworkInterface } from 'react-apollo'; 
import ReactOnRails from 'react-on-rails'; 

const networkInterface = createNetworkInterface({ 
    uri: '/graphql', 
    opts: { 
    credentials: 'same-origin' 
    } 
}); 
networkInterface.use([{ 
    applyMiddleware(req, next) { 
    if (!req.options.headers) { 
     req.options.headers = { 
     "X-CSRF-Token": ReactOnRails.authenticityToken() 
     } 
    } 
    next(); 
    } 
}]); 

const client = new ApolloClient({ 
    networkInterface 
}); 

export default client 

私はOPTSがありませんでした：{資格情報： 'same-origin'}、同じエラーが発生します。CSRFトークンの信頼性を確認できません。 完了422 Unprocessable Entity

Answer 3

上記の回答のいくつかを明確にするために、1人のユーザーがcreateNetworkInterfaceの最初の引数としてuriを渡しても、コンソールに推奨されないメッセージを記録することに気づいたため、オプションを渡す必要がありますアポロ2.0からhttp://dev.apollodata.com/core/network.html

Answer 4

と

によると：

const networkInterface = createNetworkInterface({ 
    uri: '/graphql', 
    opts: { 
    credentials: 'same-origin', 
    headers: { 
     'X-CSRF-TOKEN': $('meta[name=csrf-token]').attr('content'), 
    }, 
    }, 
}); 

は、ドキュメントにフェッチ下で第二の例を参照：オプションのプロパティとしての「信任状」と「ヘッダ」はそうのようなオブジェクトのような

https://github.com/apollographql/apollo-client/blob/master/Upgrade.md

ただ、このようにあなたの例やアイデアについて

const csrfToken = document.querySelector('meta[name=csrf-token]').getAttribute('content'); 
const client = new ApolloClient({ 
    link: new HttpLink({ 
     credentials: 'same-origin', 
     headers: { 
      'X-CSRF-Token': csrfToken 
     } 
    }), 
    cache: new InMemoryCache() 
});