react-apollo - 在 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

应该可以将它与以下类型一起使用：

import apolloClient from './apolloClient'

如果您查看使用文档，您会发现可以使用它。所以在你的某个地方最有可能index.js你应该已经有了

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

我的 apollo 客户端是这样实例化的：

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使用如下：

...

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


....


export {
  client,
  ...
};