Question

我正在开始从Apollo Client 2.x到3.x beta的迁移，并且在同时使用apollo挂钩和现在不建议使用的查询/突变组件方面遇到麻烦。

我正在使用软件包：

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

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

不变违反在上下文中找不到“客户端”或作为选项传递。将根组件包装在或通过选项传递ApolloClient实例。

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

我认为问题出在我正在使用的ApolloProvider的来源上，但是不确定是否要使用新Beta并同时使用查询组件的情况下从哪个软件包中获取数据。

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>

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

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

1 个答案: