Question

为什么我应该使用ApolloConsumer而不是直接在模块中导入客户端？

在文档中，我应该执行以下操作：

// Module A.js initiate client
const client = new ApolloClient({
  // init cache, links, typeDefs...
});
export default client;

// Module index.jsx
import client from 'A';

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

// Any other component not using Query or Mutation
const Other = () => (
  <ApolloConsumer>
  {
    client => {
      // use client
    }
  }
  </ApolloConsumer>);

但是为什么不导入没有ApolloConsumer的客户端呢？

// Module OtherBis
import client from 'A';

const AltOther () => {
  // do something with client
  return <div></div>;
};

Answer 1

我认为ApolloConsumer组件是为支持JSX而创建的，就像react-relay为relay一样。没有必要。实际上，我从未使用过ApolloConsumer。此外，还有可以执行所有操作的钩子（例如useQuery，useMutation，useSubscription）。他们只是制造工具。是否使用它取决于您。

Answer 2

可能出于同样的原因，您不应该直接导入store：

类似地，虽然您可以通过直接导入商店实例来引用商店实例，但是在Redux中这不是推荐的模式。如果创建商店实例并从模块中导出它，它将成为单例。这意味着将Redux应用程序隔离为大型应用程序的组件（如果有必要）或启用服务器渲染将变得更加困难，因为要在服务器上为每个请求创建单独的存储实例。

ApolloConsumer VS导入客户端

2 个答案: