将 React apollo 挂钩与查询组件一起使用时的不变违规

Question

我正开始从 Apollo Client 2.x 迁移到 3.x beta，我在使用 apollo hooks 和现已弃用的 query/mutation 组件时遇到了问题。

我正在使用这些软件包：

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

在这种情况下使用 apollo 钩子工作正常，但使用查询组件时，我收到以下错误：

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.

我创建了一个 codesandbox 在此处显示此问题： https://codesandbox.io/s/react-example-9p9ym

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

Answer 1

您应该从与正在使用它的组件或挂钩相同的包中导入 ApolloProvider。这是因为 ApolloProvider 提供的上下文需要与组件或挂钩使用的上下文相同。如果您使用不同的包，上下文对象将不同。

react-apollo 包导出所有三个：ApolloProvider、Query 和 useQuery。如果您使用该包，则可以将 ApolloProvider 与 Query 和 useQuery 一起使用。然而，@apollo/client 仅导出 ApolloProvider 和 useQuery。那是因为 graphql HOC 和 render 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>

请注意，您也可以直接从 apollo@client 导入 gql。

将 React apollo 挂钩与查询组件一起使用时的不变违规

Invariant violation when using react apollo hooks alongside query components

graphql

react-hooks

apollo

react-apollo

apollo-client