ReactアプリケーションでApollo Clientを渡すための推奨される方法は何ですか？

Question

今、私は次のようにHOC withApolloを使用しています。そのコンポーネントで、その後

export default connect(mapStateToProps, mapDispatchToProps)(withApollo(withData(Browse))); 

：

render() { 
    const { client } = this.props; 
    <Button onPress={() => searchInterestsTab(client)} /> 

そのコンポーネント外：

export const searchInterestsTab = (client) => { 

^が、非常にこれが得る発見しています私のコンポーネントからすべての外部関数にそれを渡す必要があります。

---

は、私は使用できませんでした。その後、

const apolloClient = new ApolloClient({...}) 
export default apolloClient; 

：

import apolloClient from './apolloClient'; 

どこでも？

Answer 1

一種のでそれを使用することが可能でなければなりません：あなたはusage documantationを見れば、あなたはそれを使用することができていることがわかり

import apolloClient from './apolloClient'

。

import ApolloClient, { addTypename } from 'apollo-client'; 
 

 
const createApolloClient = options => { 
 
    return new ApolloClient(Object.assign({}, { 
 
     queryTransformer: addTypename, 
 
     dataIdFromObject: (result) => { 
 
     if (result.id && result.__typename) { 
 
      return result.__typename + result.id; 
 
     } 
 
     return null; 
 
     }, 
 
    }, options)) 
 
}; 
 

 
export default createApolloClient;

をしてindex.jsで、それがこのように使用されていますので、どこかで最も可能性のあなたindex.jsすでに

const apolloClient = new ApolloClient({...})

マイアポロクライアントは次のようにインスタンス化される必要があります：

... 
 

 
const client = createApolloClient({ 
 
    networkInterface: networkInterface, 
 
    initialState: window.__APOLLO_STATE__, 
 
    ssrForceFetchDelay: 100, 
 
}); 
 

 

 
.... 
 

 

 
export { 
 
    client, 
 
    ... 
 
};