在传统的 REST 架构中，前端与后端之间的数据交互比较局限，需要调用多个接口才能获取到需要的数据，同时也存在着数据冗余和结构不清等问题。而 GraphQL 作为一种新的 API 设计语言，在数据交互方面有很大的优势，可以帮助前端与后端之间实现更加精准、高效的数据传递。本文将详细介绍如何使用 GraphQL 实现前端与后端的数据交互。
什么是 GraphQL
GraphQL 是由 Facebook 发布的一种 API 设计语言，其主要目的是为了解决传统 REST API 的一些问题。
REST API 是一种基于 HTTP 协议的 API 设计规范，其主要通过 URL 和请求方法来实现资源的获取、修改和删除等操作。但是在使用 REST API 的过程中，我们经常面临以下一些问题：
- 数据冗余。在获取某个资源时，往往需要获取很多与其无关的信息，导致数据量大、速度慢。
- 缺乏灵活性。对于不同的需求，可能需要创建多个不同的 API。
- 版本升级问题。当 API 发生变化时，需要更新 API 版本，对于使用此 API 的开发者带来了很大的麻烦。
GraphQL 通过定义一种新的查询语言，从而解决了上述问题。通过 GraphQL 查询，我们可以精确地指定需要获取的数据，避免了数据冗余的问题；同时，GraphQL 还支持客户端灵活组装查询语句，而不需要创建多个不同的 API。此外，GraphQL 还提供了一套丰富的类型系统，可供开发者使用和扩展。
GraphQL 的优势
与 REST API 相比，GraphQL 有以下优势：
精确获取数据
GraphQL 通过查询语言来定义需要获取的数据，可以灵活地指定每个字段和查询参数，精确获取数据。这样既可以减少不必要的数据传输，也可以避免重复请求的问题。
灵活组装查询语句
GraphQL 允许客户端自由组合查询语句，只需要获取需要的数据，而不必写多个接口。这不仅可以提高开发效率，也更加符合前端开发的思路。
更好的类型支持
GraphQL 提供了一套类型系统，开发者可以用它来定义数据结构。通过定义接口的输入和输出类型，开发者可以更好地控制数据的类型和格式。
性能更好
GraphQL 可以根据查询语句来优化数据获取，避免缺乏灵活性和数据冗余的问题。这样可以降低网络流量和服务器负载，提高系统的性能。
GraphQL 的基本语法
GraphQL 的基本语法包括定义类型、定义查询、定义变量等内容，下面分别介绍。
定义类型
在 GraphQL 中，我们可以定义自己的类型，包括对象类型、枚举类型、标量类型等。类型定义使用关键字 type 开始，然后通过大括号包裹类型的定义。
以下是一个示例：
---- ---- - --- --- ----- ------- ------ ------- ---------- ------- ---------- ------- -
上面定义了一个 User 类型，包含了一些基本字段，包括 id、name、email、createdAt 和 updatedAt。每个字段后面用感叹号表示该字段不可为 null。
定义查询
查询是 GraphQL 中非常重要的概念，我们可以使用查询来获取数据。GraphQL 中的查询是通过大括号包裹，查询语句可以嵌套，表示查询的层级关系。
以下是一个示例：
----- -
-------- -- -
----
-----
----- -
-----
----
-------- -
-------
---- -
----
-
-
-
-
-上面的查询语句用来查询 id 为 1 的用户的相关信息。通过嵌套查询语句可以获得更多的信息，例如该用户的文章、文章的评论以及评论用户的相关信息。
定义变量
使用变量可以方便地传递参数给查询，这大大增强了查询语句的灵活性。在 GraphQL 中，我们可以使用 $ 符号来定义变量，并在查询中使用。
以下是一个示例：
----- ---------------- ---- -
-------- ---- -
----
-----
-
-上面的查询语句使用了一个名为 GetUserById 的查询操作，并定义了一个名为 id 的变量，类型为 ID，并声明了该变量是必要的。在查询中使用变量需要用括号包含变量声明，例如 $id。
使用 GraphQL 和 React
在 React 中使用 GraphQL，推荐使用 apollo-client 这个库，该库提供了一套完整的解决方案，包括数据缓存、数据预取等功能。我们只需要关注前端组件开发即可。
安装依赖
首先需要安装 apollo-client：
--- ------- -------------- -------
这会安装所需的依赖。
配置应用
在 React 应用中使用 apollo-client，需要在应用中进行配置。我们可以使用 ApolloProvider 组件来提供客户端。
------ - ------------- -------------- -------------- - ---- -----------------
----- ------ - --- --------------
---- --------------------------------
------ --- ----------------
---
-------- ----- -
------ -
--------------- ----------------
---------- -----------
-----------------
--
-上面是一个简单的配置示例。其中，uri 是 GraphQL 的 URL 地址，cache 是客户端的缓存。
定义查询
在 React 中，我们可以使用 useQuery 钩子来定义查询。useQuery 接受一个参数，表示查询语句，返回一个包含 loading、data、error 等信息的对象。
以下是一个示例：
------ - --------- --- - ---- -----------------
----- -------- - ----
----- ---------------- ---- -
-------- ---- -
----
-----
-
-
--
-------- ----- -
----- - -------- ----- ----- - - ------------------ -
---------- - --- - --
---
-- --------- ------ ----------------------
-- ------- ------ -----------------
------ -
-----
-----------------------
------------------------
------
--
-上面的例子定义了一个名为 GET_USER 的查询，然后使用 useQuery 钩子来定义。在渲染时，我们根据 loading、data 和 error 的状态来渲染不同的内容。
定义变量
在 useQuery 中，我们可以使用 variables 参数来传递变量。这样可以动态地改变查询结果。
以下是一个示例：
------ - --------- --- - ---- -----------------
----- -------- - ----
----- ---------------- ---- -
-------- ---- -
----
-----
-
-
--
-------- ----- -
----- ---- ------ - ------------
----- - -------- ----- ----- - - ------------------ -
---------- - -- --
---
----- ------------ - - -- -
---------------------
-
-- --------- ------ ----------------------
-- ------- ------ -----------------
------ -
-----
------ ----------- ---------- ----------------------- --
-----------------------
------------------------
------
--
-上面的例子在渲染时，根据输入框的值改变变量 id 的值，从而动态地改变查询结果。
总结
本文介绍了 GraphQL 的基本语法和 React 中使用 Apollo Client 来实现前端与后端的数据交互。GraphQL 提供了更加精确的数据传递、更好的灵活性和更好的类型支持等优势，值得开发者们学习和掌握。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653a20fb7d4982a6eb3eaf67