reactjs - 如何在单个项目中使用多个版本的 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 Uncaught ReferenceError: module is not defined at eval (index.mjs?8baf:1) at Module../node_modules/graphql/index.mjs (vendors.aa829d69df1a68216354.js:7568) at webpack_require (app .aa829d69df1a68216354.js:780) 在 fn (app.aa829d69df1a68216354.js:148) 在 eval (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';

应用程序不会加载。

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

标签： reactjsgraphqlapollo

Answer 1

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

这是React 的 Apollo 客户端简介的链接。

取自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

并尝试安装与 apollo react 相关的所有内容的第 4 版。否则，您可能会遇到很多错误，就像我在这里所做的那样

---

编辑：

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

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

---

编辑：2

问题是您目前正在使用 Apollo Client v2.6。但较新的版本是 Apollo Client v3.x。而新版本@apollo/react-hooks显然期望你使用最新的 Apollo Client v3.x。

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

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

当你这样做时，

<ApolloProvider client={oldClientCreatedUsingv2}>
      <div>
        <h2>My first Apollo app </h2>
      </div>
</ApolloProvider>

useQuery和useMutation钩子使用client. _ 但是你显然ApolloProvider不能将它用于两个s 版本。ApolloProvider会很矛盾。

因此，在ApolloProvider提供您的 v2 apollo 客户端实例时，您现有的代码库不会受到干扰。事实上，您甚至不必在此处修改任何内容。让它成为现在的样子。

在useQueryand中，提供 v3 apollo 客户端实例（即，像这样useMutation使用 @apollo/client 创建一个客户端）。这是你唯一需要做的事情。

接下来，在使用钩子进行查询或突变时，在任何地方提供使用 v3 创建的客户端：

const {loading, error, data } = useQuery(YOUR_QUERY, { client: newClientCreatedUsingv3 });

ApolloProvider仅用于传递，client这样我们就不必在每个组件中都导入它并将其传递给useQueryanduseMutation或 HOC 的钩子。

如果您在发出请求时明确提供客户端，则它不会使用ApolloProvider.

一旦你将代码完全重构为使用反应钩子，那么你可以ApolloProvider像这样进行更改：

<ApolloProvider client={newClientCreatedUsingv3}>
      <div>
        <h2>My first Apollo app </h2>
      </div>
</ApolloProvider>

现在，您可以client从每个选项中删除该选项，useQuery并useMutation从现在开始进一步清理代码useQuery，useMuation并将开始newClientCreatedUsingv3使用ApolloProvider.

希望这可以澄清。