Graphqlのディスパッチ控除アクションからApolloクライアントにアクセス

Question

私は、反応アプリにApolloを統合しようとしています。

私はクエリ引数でアクションをディスパッチし、このアクション内でそのクエリを処理し、解決済みの約束をペイロードとしてそれぞれのレデューサーに渡したいと考えています。

私のアプローチは次のとおりです。

私はclient.jsファイル

import { graphql } from 'react-apollo'; 
import { ApolloProvider } from 'react-apollo'; 
import { ApolloClient } from 'apollo-client'; 
import { HttpLink } from 'apollo-link-http'; 
import { InMemoryCache } from 'apollo-cache-inmemory'; 

const client = new ApolloClient({ 
    link: new HttpLink({ uri: 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr' }), 
    cache: new InMemoryCache() 
}); 

export default client 

その後、私は私のコンポーネントから派遣される次のアクションを持っています。

import client from '../graphclient' 

export function gQLFetch(query) { 

    const data = client.query({query: query}) 

    return { 
    type: "gQL_FETCH", 
    payload: new Promise((resolve, reject) => { 
     data.then(response => resolve(response)).catch(error => reject(error)) 
    }) 
    } 
} 

最後に、私の減速は、派遣アクションを処理し、ちょうど私のために正常に動作状態

const apiReducer = (state=[], action) => { 
    switch (action.type) { 
    case "gQL_FETCH_FULFILLED": 
     state = action.payload.data.allMovies 
     break; 
    } 
    return state; 
} 

export default apiReducer 

を返します。

しかし、アポロのドキュメントはあなたのindex.jsファイル内clientを定義し、そのようなアプリケーション全体にクライアントを渡すためにclientプロパティを持つコンポーネントツリーの最上部に<ApolloProvider>タグを使用することを提案しています。

ReactDOM.render(<ApolloProvider client={client}><Provider store={store}><App /></Provider></ApolloProvider>, document.getElementById('root')); 

私の最初の質問：は良い習慣私のアプローチですか？ <ApolloProvider>は、アプリケーション全体にクライアントを提供する方法を提供しているので、そうでないように感じます。

次に、私の2番目の質問が来る：クエリパラメータを渡すために私のreduxアクション内でクライアントに到達するにはどうすればよいですか？

Answer 1

ApolloProvider私の場合は、コンポーネントに直接データを取り込み/注入したいと思っています。別のデータ管理が必要な場合は、おそらく独自のクライアント要求とデータフェッチメカニズムを作成します。

非同期リクエストの処理方法は正しくありません。このような副作用を管理するには、redux-thunkまたはredux-sagaを使用する必要があります。レデューサー機能は同期し、最後にフェッチされたデータのみを受信する必要があります。あなたの例で私が見ることができるように、減速機は、.then方法を介して処理する必要がある約束を受け取ります。ミドルウェアなどを使っているのでしょうか？私はredux-sagaについてもっと読むことを提案し、3つのアクション - REQUEST、REQUEST_SUCCESSFUL、REQUEST_FAILUREをディスパッチすることを提案します。