在 SPA 应用中使用 GraphQL 管理数据
随着前端技术的不断发展，越来越多的 Web 应用采用了单页应用（SPA）的架构来提升用户体验和页面加载速度。与此同时，GraphQL 作为一种新型的 API 查询语言也正在迅速流行起来。在 SPA 应用中使用 GraphQL 管理数据可以带来诸多优势，本文将详细介绍这方面的知识。
什么是 GraphQL？
GraphQL 是一种由 Facebook 开发的 API 查询语言，它允许客户端向服务器请求特定的数据，并以一种更加灵活、高效和精确的方式返回所需数据。与传统的 RESTful API 相比，GraphQL 具有以下明显的优势：
数据的精确定制：客户端可以精确地指定需要获取哪些数据，避免了“一次性”获取大量不需要的数据。
减少网络传输：GraphQL 支持批量请求，通过一次请求获取多个数据，可以避免多次轮询带来的网络传输损耗。
多数据源整合：GraphQL 能够将多个数据源整合在一起，以满足客户端的需要。
因此，GraphQL 完全可以成为一种理想的 SPA 应用中的数据管理工具。下面将以一个简单的例子来说明如何使用 GraphQL 构建一个 SPA 应用。
示例代码解析
考虑一个简单的任务管理应用，前端使用 React 框架构建，后端使用 Node.js 和 Express 框架。在这个应用中，用户可以创建、编辑和删除任务，并且浏览已经完成过的任务。
首先，我们需要定义一个 GraphQL Schema，它定义了应用程序中支持的所有数据类型、查询和变异。在这个例子中，我们将通过 GraphQL 查询获取现有的任务，并且通过 GraphQL 变异在服务器上添加、编辑和删除任务。Schema 如下：
-- -------------------- ---- ------- ---- ---- - --- --- ------ ------- ------------ ------ ---------- -------- - ---- ----- - ------ -------- - ---- -------- - ----------------- -------- ------------ ------- ---------- ---------- ----- -------------- ---- ------ ------- ------------ ------- ---------- --------- ----- -------------- ----- --- - ------ - ------ ------ --------- -------- -
在创建 Schema 定义时，我们定义了一个名为 Task 的类型，它有四个属性：id、title、description 和 completed。同时，我们定义了一个名为 Query 的类型，它有一个名为 tasks 的查询，用于获取所有的任务。
接着，我们定义了一个名为 Mutation 的类型，它包含三种变异：createTask、updateTask 和 deleteTask。这样，我们就能通过 GraphQL 变异添加、编辑和删除任务。最后，我们定义了一个名为 schema 的根对象，它包含 query 和 mutation 对象。
在客户端代码中，我们使用 Apollo Client 连接到服务器，并且使用 React Apollo 组件来渲染数据。为了使 Apollo Client 能够正常工作，我们需要通过 typeDefs、resolvers 和 links 定义 Apollo Client 的组成部分。这里的 typeDefs 和 resolvers 与上面定义的 Schema 完全一致。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------ ---- ----------------
------ - -------------- - ---- ---------------
------ - ------------- - ---- ------------------------
------ - -------- - ---- -------------------
------ - ----------- ------ - ---- --------------
------ --- ---- --------------
----- -------- - --- ---------- ---- ------------------------------- ---
----- -------------- - --- ---------------------- -------- -- -
----------------------
-------- -
-------------- ------- ----------------------------------
-
---
------ -------------------
---
----- ---- - ---------------------- ----------
----- ----- - --- ----------------
----- ------ - --- --------------
------
----
---
----- --------- - ----
-
----- -
--
-----
-----------
---------
-
-
--
----- --- ------- --------------- -
-------- -
------ -
--------------- ----------------
-----
-------- ---------
----
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ -------------------
-- ------- ------ ---------- ------------
------ ------------------- -- -
--- --------------
------------ - --------------- - ----------- - -------------
-----
---
--
--------
-----
------
-----------------
--
-
-
-------------------- --- ---------------------------------在这个例子中，我们首先定义了一个 HttpLink 对象，它指定了服务器的地址。接着，我们定义了一个 authMiddleware 对象，它设置了 Authentication Http Header。
然后，我们创建了一个 Apollo Client 对象，并通过传入 cache 和 link 参数来初始化。然后，我们定义了一个 GET_TASKS 的 GraphQL 查询，它用于获取所有任务的数据。
最后，我们使用 Query 组件来渲染数据。GraphQL 返回的数据会在 props.data 对象中被封装，我们可以在组件的 render 方法中使用这个对象进行渲染。如果查询正在加载中，我们显示一个 “Loading...” 的消息；如果出现错误，则显示一个 “Error: [error message]” 的消息。在正确获取数据后，我们显示任务列表。
结论
本文介绍了在 SPA 应用中使用 GraphQL 管理数据的基本知识，并提供了一个包含示例代码的详细指南。现在，您可以在自己的 SPA 应用中尝试使用 GraphQL 来管理数据了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675268fa8bd460d3ad93eb7a