Apollo Client 2.0：使用 React 和 GraphQL 构建现代 Web 应用程序-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 React 和 GraphQL 的普及，现在越来越多的前端开发人员使用 Apollo Client 来管理状态和访问数据。在 Apollo Client 2.0 中，我们看到了一些重大的改变和新增功能，这让我们更轻松地构建现代化的 Web 应用程序。本文将在介绍 Apollo Client 基本用法的基础上，通过示例代码讲解新功能和最佳实践。

什么是 Apollo Client？

Apollo Client 是一个 JavaScript 客户端作为您的应用程序与 GraphQL API 通信的一部分。它使您可以轻松地查询 GraphQL 数据，跨组件管理共享数据，同时还提供了一套插件和中间件来扩展其功能。

使用 Apollo Client 的好处：

集中化的数据缓存
可组合的网络层，可缓存、批处理和预取数据
配备了一组工具，可轻松地设置数据加载状态和服务器状态
支持订阅和推送通知，实时更新数据

Apollo Client 2.0 是一个大的改进，它涵盖了整个库，包括 API、插件、工具和插件生态系统。

如何使用 Apollo Client？

以下是从 Apollo 官方教程获取的一个简单的示例，展示如何使用 Apollo Client 进行 GraphQL 查询：

-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- -----------------

-- --- ------ ---
----- ------ - --- --------------
  ---- ----------------------------------
  ------ --- ---------------
---

-- ----
----- --------- - ----
  ----- -------- -
    ----- -
      -----
      ------
    -
  -
--

-- ----
--------------
  ------ ---------
-------------- -- ---------------------

在这个例子中，我们初始化一个 ApolloClient，设置 GraphQL 服务端的地址和缓存引擎，定义查询语句，然后使用 query 方法执行查询。ApolloClient 会发起网络请求获取数据，同时将数据保存在内存缓存中以供后续使用。

Apollo Client 2.0 新功能

1. 响应式缓存层

在 Apollo Client 2.0 中，Apollo 缓存变得更加响应式、扩展和可配置。下面是一些新功能：

现在支持了 readFragment、writeFragment 和 watchFragment 方法，与读写整个查询类似，我们还可以读写查询从客户端返回的数据的特定字段。
可配置的缓存键：现在可以使用类似 Redux 的可配置 InMemoryCache 类将查询结果缓存来控制查询失效和缓存键。
自定义序列化：现在可以更改序列化算法以及在查询结果上启用自定义比较功能以获得更多管理灵活性。

2. 新的网络中间件

在 Apollo Client 2.0 中，已经添加了几个新的网络中间件，这些中间件提供了更好的性能和可扩展性，其中一些是：

apollo-link-persisted-queries：使用编译时和运行时技术来减少网络和 CPU 开销，同时还提高查询和服务器的安全性。
apollo-link-batch-http：一个类似的样本支持请求批处理和缓存的 HTTP 传输中间件。用于传输请求数据，其中每个请求都使用其自己的 'operationName' 字段。
apollo-link-retry：自动重试请求遇到的所有错误，包括数据重放攻击和流控制错误，使用了指数回退算法。

3. 更好的 TypeScript 集成

Apollo Client 2.0 针对 TypeScript 获得了更多的类型定义。这意味着您不仅可以保持更高的类型安全，还可以更轻松地为您的团队提供文档和自动完成。

最佳实践

使用可组合的查询：通过将查询分解成组合成分的部分，可以扩展数据加载行为。
不要过分依赖缓存驱动网络：请求和响应都是异步和可能失败的。缓存应该是性能增益和错误恢复的策略，而不是核心业务逻辑。
使用 react-apollo 来简化您的代码：react-apollo 是针对 React 的一种用于管理 GraphQL 数据的库。使用该库可以轻松地管理 GraphQL 数据。

结论

在本文中，我们介绍了 Apollo Client 2.0 基本概念和用法，并且解释了新功能以及最佳实践，以帮助您更好地使用 Apollo Client 2.0 来创建现代化的 Web 应用程序。现在是时候去尝试一下并开始开发您的下一个项目了。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67206c0e2e7021665e0225aa