与查询组件一起使用反应阿波罗钩子时的不变违规

Question

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

我正在使用这些软件包：

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

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

Invariant Violation 无法在上下文中找到“客户端”或作为选项传入。将根组件包装在 中，或通过选项传递 ApolloClient 实例。

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

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

Answer 1

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

该react-apollo包导出所有三个：ApolloProvider,Query和useQuery。如果您使用的包，你可以使用ApolloProvider既Query和useQuery。@apollo/client，然而，只有出口ApolloProvider和useQuery。那是因为graphqlHOC 和渲染道具组件已被弃用。如果您坚持同时使用Queryand 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。