在现代化的前端开发中，GraphQL 已经成为了一种非常流行的 API 查询语言。它可以让我们准确的查询所需要的数据，避免了传统 RESTful API 的数据结构过于臃肿和复杂的问题。而 Apollo-Client 则是一款非常流行的 GraphQL 客户端，它能够帮助我们消费 GraphQL API 并与 React 等常见框架无缝集成。本文将介绍如何在 GraphQL 中集成 Apollo-Client 的技术实现。
安装 Apollo-Client
在开始之前，我们首先需要安装 Apollo-Client。可以通过以下命令进行安装：
npm install --save apollo-boost react-apollo graphql
与 GraphQL 进行交互
安装完成后，我们可以使用 ApolloClient 函数来创建与 GraphQL API 进行交互的对象。它需要一个包含 GraphQL API 的 URI 作为参数，例如：
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: 'http://example.com/graphql'
});接下来，我们可以使用 ApolloProvider 组件将 client 对象注入到 React 应用程序中：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- - ---- ---------------
------ ------------ ---- ---------------
------ --- ---- --------
----- ------ - --- --------------
---- ----------------------------
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--这样，我们就可以在 React 应用中使用 graphql HOC 将查询和变异添加到组件中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------------
------ --- ---- --------------
----- ----- - ----
----- ------- -
---- -
--
----
-
-
--
----- ---- - -- ---- -- -- -
-- -------------- -
------ ------------------
-
------ -
----
----------------- --- ---- -- -- -
--- --------------------
---
-----
--
--
------ ------- ---------------------这段代码会发出一个名为 getList 的查询，并将结果传递给 List 组件。使用 graphql HOC 进行封装后，List 组件就可以从 data 属性中访问查询结果了。
Apollo-Client 的缓存机制
除了大大简化 GraphQL 查询和变异的处理过程之外，使用 Apollo-Client 还可以非常方便的控制我们应用程序的缓存。Apollo-Client 通过在本地维护一个缓存来提高应用程序的性能，这使得在进行数据查询和变异的过程中能够更快地访问数据。
例如，我们可以使用 cache.readQuery() 来读取缓存中的查询结果：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------------
------ --- ---- --------------
----- ----- - ----
----- ------- -
---- -
--
----
-
-
--
----- ---- - -- ---- -- -- -
----- ---------- - ----------------------- ------ ----- ---
-- ---
--除此之外，还可以使用 cache.writeQuery() 来手动写入缓存数据：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------------
------ --- ---- --------------
----- ----- - ----
----- ------- -
---- -
--
----
-
-
--
----- ----------------- - ----
-------- -------------- -------- -
------------- ------ -
--
----
-
-
--
----- ---- - -- ----- ------ -- -- -
----- --------- - ----- -- -- -
----- ------- - - --- ----------- ----- ---- ----- --
------------------------
------
----- -
----- -------------------- --------
-
---
----- --------
---------- -
----- ------------
--
------- ------- - ---- -- -- -
----- ---------- - ----------------- ------ ----- ---
------------------
------
----- -
----- -------------------- -------------
-
---
-
---
--
-- ---
--在这个例子中，我们通过读取缓存来获取一个旧的列表对象。我们使用这个旧对象创建一个新的列表对象，将其写入缓存。我们还使用了 mutate 函数发起了一个变异请求，将新项目添加到列表中。我们使用 update 回调来更新缓存中的列表。
结论
综上所述，Apollo-Client 是一款强大的 GraphQL 客户端，它帮助我们轻松地和 GraphQL API 进行交互，并使得应用程序的缓存机制变得异常简单。如果你正在使用 GraphQL 进行开发，那么 Apollo-Client 绝对是值得尝试的一款工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6751ce538bd460d3ad8ea03c