如何在单个项目中使用多个版本的Apollo客户端

Question

我正在接手一个较旧的React / Apollo / GraphQL项目，该项目目前未使用诸如useQuery，useMutation等钩子。因此，我正在尝试进行升级。

我已经安装了@ apollo / react-hooks软件包，并在App.js中替换了ApolloProvider

//import { ApolloProvider } from 'react-apollo'; //Old
import { ApolloProvider } from '@apollo/react-hooks'; //New

<ApolloProvider client={apolloClient}>......</ApolloProvider>

但是，这会在运行应用程序时导致错误：

index.mjs？8baf：1未捕获的ReferenceError：模块未定义 在评估时（index.mjs？8baf：1） 在Module ../ node_modules / graphql / index.mjs（vendors.aa829d69df1a68216354.js：7568） 在 webpack_require （app.aa829d69df1a68216354.js：780） 在fn（app.aa829d69df1a68216354.js：148） 在评估时（index.js：3） 在Object ../ node_modules/@apollo/client/utilities/index.js

我的package.json具有以下相关的软件包：

"react-apollo": "^2.0.1",
"react": "^16.14.0",
"apollo-cache-inmemory": "^1.1.12",
"apollo-client": "^2.6.10",
"@apollo/react-hooks": "^4.0.0",
"apollo-link": "^1.2.2",
"apollo-link-batch-http": "^1.2.2",
"apollo-link-context": "^1.0.8",
"apollo-link-error": "^1.0.9",
"apollo-link-http": "^1.5.4",
"apollo-link-ws": "^1.0.8",
"apollo-utilities": "^1.0.11"

如果我尝试使用“ react-apollo”中的ApolloProvider，则可以运行我的应用程序，但是在添加时：

import {useQuery} from '@apollo/react-hooks';

该应用程序将无法加载。

我希望有人在解决方案之前经历过同样的事情。.预先感谢

Answer 1

也许您需要再次阅读Apollo文档。

这是Introduction to Apollo Client for React的链接。

取自Apollo Docs for React：

import React from 'react';
import { render } from 'react-dom';

import { ApolloProvider } from '@apollo/client';

function App() {
  return (
    <ApolloProvider client={client}>
      <div>
        <h2>My first Apollo app ?</h2>
      </div>
    </ApolloProvider>
  );
}

render(<App />, document.getElementById('root'));

您需要从ApolloProvider导入@apollo/client，而不是从@apollo/react-hooks导入。

并尝试安装与阿波罗反应相关的所有版本的第4版。否则，您可能会遇到许多错误，就像我做的here

---

编辑：

如果要在逐步重构代码时合并两个版本，请尝试将使用Apollo v4创建的client直接提供给钩子。这是我们目前在工作中使用的方法。

useQuery和useMutation具有options对象，该对象可以采用client实例。因此，尝试使用新的Apollo v4包创建一个新的client实例，而不是将此新的client传递给ApolloProvider，而是将客户端导入每个组件并将其提供给钩子明确使用options对象。完成对钩子的重构后，可以将组件包装在ApolloProvider中，并删除client对象中的options实例（即使不删除它，也可以正常工作直到您继续在client和ApolloProvider和useQuery的{​​{1}}对象中使用相同的useMutation（Apollo v4）实例。

---

编辑：2

问题是您当前正在使用Apollo Client v2.6。但是较新的版本是Apollo Clientv3.x。新的options版本显然希望您使用最新的Apollo Client v3.x。

因此，您需要维护两个apollo客户端文件，直到重构整个代码库以响应钩子为止。

1. 使用apollo-client ^ 2-与现有代码（已经拥有）一起使用
2. 使用@ apollo / client ^ 3-与apollo挂钩一起使用

这样做的时候，

@apollo/react-hooks

<ApolloProvider client={oldClientCreatedUsingv2}> <div> <h2>My first Apollo app ?</h2> </div> </ApolloProvider> 和useQuery挂钩使用useMutation中提供的client。但是您显然不能在两个ApolloProvider s版本中使用它。会发生冲突。

因此，在ApolloProvider中提供您的v2阿波罗客户端实例，以免干扰您现有的代码库。 实际上，您甚至无需在此处进行任何修改。保持现状吧。

然后在ApolloProvider和useQuery中提供v3阿波罗客户端实例（即，使用@ apollo / client之类的this创建一个客户端）。 这是您唯一要做的事情。

接下来，在使用钩子进行查询或变异的同时，向各处提供使用v3创建的客户端：

useMutation

const {loading, error, data } = useQuery(YOUR_QUERY, { client: newClientCreatedUsingv3 }); 仅用于传递ApolloProvider，这样我们就不必将其导入每个组件并将其传递到client和{{1}的钩子中}或HOC。

如果您在发出请求时显式提供客户端，则该客户端将不使用useQuery中提供的客户端。

一旦您完全将代码重构为使用react挂钩，就可以像这样更改useMutation：

ApolloProvider

现在，您可以从每个ApolloProvider和<ApolloProvider client={newClientCreatedUsingv3}> <div> <h2>My first Apollo app ?</h2> </div> </ApolloProvider> 中删除client选项，以进一步清理代码，从现在开始useQuery和useMutation开始使用useQuery中提供的useMuation实例。

希望这可以澄清。