GraphQL 是一种查询语言，用于 API 的设计和查询。它是由 Facebook 开发的，旨在替代 RESTful API。GraphQL 允许客户端指定其需要的数据，并返回完全符合其需求的数据。因此，它可以大大减少不必要的数据传输，从而提高应用程序的性能。
在本文中，我们将介绍如何使用 JavaScript 库在 GraphQL 应用程序中实现数据查询、缓存和更新。我们将使用以下技术：
- React：用于构建用户界面。
- Apollo Client：用于管理 GraphQL 查询和缓存数据。
- GraphQL：用于定义和查询 API。
安装和设置
我们将从安装和设置 Apollo Client 开始。首先，我们需要安装 @apollo/client 包。您可以使用 npm 或 yarn 进行安装：
npm install @apollo/client
或者
yarn add @apollo/client
接下来，我们需要定义 Apollo Client。我们将创建一个 client.js 文件，并在其中定义 Apollo Client：
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql',
cache: new InMemoryCache(),
});
export default client;在上面的代码中，我们定义了一个 Apollo Client，它将连接到 GraphQL API 的地址为 http://localhost:4000/graphql。我们还定义了一个缓存，用于管理从服务器获取的数据。
查询数据
现在，我们已经设置了 Apollo Client，我们可以开始查询数据了。我们将使用 useQuery 钩子来查询数据。我们将创建一个 App.js 文件，并在其中定义一个查询：
-- -------------------- ---- -------
------ - --------- --- - ---- -----------------
----- --------- - ----
----- -------- -
----- -
--
-----
------
-
-
--
-------- ----- -
----- - -------- ------ ---- - - --------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
-----
---------------------- -- -
---- --------------
---------------------
--------------------
------
---
------
--
-
------ ------- ----在上面的代码中，我们定义了一个名为 GET_BOOKS 的查询，它将从服务器获取图书的列表。我们使用 useQuery 钩子来执行查询，并使用 loading、error 和 data 变量来管理查询的状态。如果查询正在加载，我们将显示 “Loading…”，如果出现错误，我们将显示 “Error :(”。
如果查询成功，我们将遍历返回的数据，并显示每个书籍的标题和作者。
缓存数据
现在，我们已经成功查询了数据，但我们如何处理缓存？我们可以使用 Apollo Client 的缓存来缓存数据。当我们再次查询相同的数据时，Apollo Client 将从缓存中获取数据，而不是从服务器获取数据。
我们将使用 writeQuery 方法将数据写入缓存。我们将修改 App.js 文件，以便在写入缓存时使用 writeQuery 方法：
-- -------------------- ---- -------
------ - --------- --- - ---- -----------------
------ ------ ---- -----------
----- --------- - ----
----- -------- -
----- -
--
-----
------
-
-
--
-------- ----- -
----- - -------- ------ ---- - - --------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
-------------------
------ ----------
-----
---
------ -
-----
---------------------- -- -
---- --------------
---------------------
--------------------
------
---
------
--
-
------ ------- ----在上面的代码中，我们使用 writeQuery 方法将数据写入缓存。我们传递了查询和数据作为参数。
现在，我们已经成功地将数据写入缓存。当我们再次查询相同的数据时，Apollo Client 将从缓存中获取数据，而不是从服务器获取数据。
更新数据
现在，我们已经成功地查询数据并缓存数据。但我们如何更新数据？我们将使用 useMutation 钩子来更新数据。我们将创建一个 AddBook.js 文件，并在其中定义一个更新：
-- -------------------- ---- -------
------ - ------------ --- - ---- -----------------
----- -------- - ----
-------- --------------- -------- -------- -------- -
-------------- ------- ------- -------- -
--
-----
------
-
-
--
-------- --------- -
--- ----------- ------------
----- --------- - ---- -- - ----------------------
------ -
-----
-----
------------- -- -
-------------------
---------
---------- -
------ -----------------
------- ------------------
--
---
---------------- - ---
----------------- - ---
--
-
------
----------- -- -
---------- - -----
--
-------------------
--
------
----------- -- -
----------- - -----
--
--------------------
--
------- ----------------- -------------
-------
------
--
-
------ ------- --------在上面的代码中，我们定义了一个名为 ADD_BOOK 的更新，它将添加一本新书。我们使用 useMutation 钩子来执行更新，并使用 addBook 函数来添加新书。
我们在表单的 onSubmit 事件中调用 addBook 函数，并将书籍的标题和作者作为变量传递。当更新成功时，我们将重置表单。
结论
在本文中，我们介绍了如何使用 JavaScript 库在 GraphQL 应用程序中查询数据、缓存数据和更新数据。我们使用了 React、Apollo Client 和 GraphQL 技术。我们希望本文对您有所帮助，并为您的前端开发工作提供指导意义。
完整示例代码：https://github.com/apollographql/fullstack-tutorial/tree/master/final-client
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675c9985e5138b9222852315