随着前端技术的发展，使用 GraphQL 来处理数据已经变得越来越流行。而 apollo-client 是一个流行的 GraphQL 客户端，它可以帮助我们轻松地在 React 应用中使用 GraphQL。
在开发过程中，我们有时需要对 apollo-client 进行一些扩展，这时候 apollo-client-extension 就派上用场了。在本文中，我们将介绍如何使用 apollo-client-extension 来扩展 apollo-client。
安装
要使用 apollo-client-extension，我们需要先安装它。可以通过 npm 来安装：
npm install apollo-client-extension --save
安装完成后，我们需要把 extension 传递给 apollo-client 的构造函数。在使用 apollo-client 时，构造函数通常像下面这样：
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
link: new HttpLink(),
cache: new InMemoryCache(),
});现在我们需要把 apollo-client-extension 加入到这个构造函数里：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ------ - -------- - ---- ------------------- ------ - ------------- - ---- ------------------------ ------ - --------------------- - ---- -------------------------- ----- --------- - --- ------------------------ ----- ------ - --- -------------- ----- --- ----------- ------ --- ---------------- ----------- --- -- ----------- ---
注意，我们创建了一个空的 ApolloClientExtension，这是因为我们还没有编写自己的扩展代码。现在，我们已经成功添加了 apollo-client-extension，下面我们将通过编写一个简单的扩展来介绍如何使用它。
编写扩展
假设我们有一个需求，需要在请求和响应时添加一些日志。我们可以通过编写一个简单的扩展来实现这个功能。新建一个文件 logExtension.js 并加入以下代码：
-- -------------------- ---- -------
------ ----- ------------ -
------------------------ -
-------------------- ---------- ---------
-
------------------------ ----- -------- ----- -
---------------------- -------- ----------------
-
-在这个文件中，我们定义了一个 LogExtension 类，并在里面实现了 apollo-client-extension 定义的两个钩子函数：willSendRequest 和 willResolveField。
willSendRequest 钩子函数会在发送请求时被调用，我们可以在这里添加一些与请求相关的代码。willResolveField 钩子函数则会在解析数据时被调用，我们可以在这里添加一些与数据解析相关的代码。在这里，我们只是简单地输出了一些日志。
接下来，在我们的主文件中使用这个扩展：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ------ - -------- - ---- ------------------- ------ - ------------- - ---- ------------------------ ------ - --------------------- - ---- -------------------------- ------ - ------------ - ---- ----------------- ----- --------- - --- ------------------------ ----- ------ - --- -------------- ----- --- ----------- ------ --- ---------------- ----------- --- -- ---------- -- -- --- ---------------- ---
现在，我们已经在 apollo-client 中使用了我们自己的扩展。在执行请求时，我们可以看到 console 中输出了一些日志信息，这也证明了我们的扩展生效了。
总结
在本文中，我们介绍了如何使用 apollo-client-extension 来扩展 apollo-client。我们首先安装了这个 npm 包，然后展示了如何在 apollo-client 构造函数中添加这个扩展。最后，我们展示了如何编写一个简单的扩展，并在主文件中使用它。希望这篇文章对你了解如何使用 apollo-client-extension 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1e98