graphql - 与查询组件一起使用 react Apollo 钩子(Hook)时的不变违规

Question

我正在开始从 Apollo Client 2.x 迁移到 3.x beta，但在使用 apollo Hook 和现已弃用的查询/变异组件时遇到了问题。

我正在使用这些软件包:

@apollo/client: 3.0.0-beta.4
@apollo/react-components: 3.1.3

在这种情况下，使用 apollo Hook 可以正常工作，但是使用查询组件时，出现以下错误:

Invariant Violation Could not find "client" in the context or passed in as an option. Wrap the root component in an , or pass an ApolloClient instance in via options.

我创建了一个代码沙盒，在这里显示了这个问题:
https://codesandbox.io/s/react-example-9p9ym

我认为问题出在 ApolloProvider 的来源上我正在使用，但如果我想使用新的测试版，同时仍然使用查询组件，我不确定从哪个包中获取它。

Answer 1

您应该导入 ApolloProvider来自与使用它的组件或钩子(Hook)相同的包。那是因为 ApolloProvider 提供的上下文需要与组件或钩子(Hook)使用的上下文相同。如果使用不同的包，则上下文对象会有所不同。
react-apollo包导出所有三个:ApolloProvider , Query和 useQuery .如果你使用那个包，你可以使用 ApolloProvider与两者 Query和 useQuery . @apollo/client ，然而，只导出 ApolloProvider和 useQuery .那是因为 graphql HOC 和渲染 Prop 组件已被弃用。如果你坚持同时使用 Query和 useQuery , 你必须导入 Query来自另一个包，如 @apollo/react-components并添加其 ApolloProvider还有:

import {
  ApolloProvider as ApolloProvider2,
  Query,
} from '@apollo/react-components'
import {
  ApolloProvider,
  ApolloClient,
  HttpLink,
  InMemoryCache,
  useQuery,
  gql,
} from '@apollo/client'

<ApolloProvider2 client={client}>
  <ApolloProvider client={client}>
    <App/>
  </ApolloProvider>
</ApolloProvider2>

请注意，您可以导入 gql直接来自 apollo@client以及。