GraphQL 是一种用于构建 API 的查询语言，由 Facebook 开发并在2015年公开发布。它的主要特点是可以精确定制数据请求，让前端开发者只获取需要的数据，避免了过度获取数据带来的性能问题。本文将介绍 GraphQL 的核心概念和使用方式，并提供示例代码和指导意义。
什么是 GraphQL？
GraphQL 是一种用于构建 API 的查询语言。与传统的 RESTful API 不同，GraphQL 允许客户端可以精确请求需要的数据，并返回预期的结果。GraphQL 的核心概念如下：
- 查询语言：GraphQL 提供一个强类型的查询语言，用于描述客户端需要获取的数据。
- 数据类型：GraphQL 定义了一套数据类型，用于表示 API 返回的数据结构。
- 解析器：GraphQL 的解析器将查询语言转换为特定数据源的查询，并将数据源返回的数据转换为 GraphQL 定义的数据类型。
使用 GraphQL 构建的 API 需要满足以下要求：
- 数据定义：定义数据类型和数据源。
- 查询定义：定义客户端查询语言。
- 解析器实现：将查询语言转换成特定数据源查询，并将结果转换成 GraphQL 数据类型。
GraphQL 如何使用？
安装和配置
在 Node.js 中，可以使用 graphql-yoga 进行 GraphQL 的创建和部署。首先，需要全局安装 graphql-yoga：
npm install -g graphql-yoga
安装完成后，在项目中运行 yarn init 命令来初始化项目，并创建 index.js 文件。
在 index.js 文件中，我们需要通过以下代码来创建 GraphQL 服务：
-- -------------------- ---- -------
----- - ------------- - - -----------------------
-- ------
----- -------- - -
---- ----- -
------ -------
-
---- -------- -
----
----- -----
----- ----
-- ----
-
-
-- -------
----- --------- - -
------ -
------ -- -- ------ -------
--
--------- -
---- --- - ----- ---- -- -- ---- - ----
-
-
-- -- ------- --
----- ------ - --- --------------- --------- --------- --
-- ----
--------------- -- ------------------- -- ------- -- -----------------客户端使用
我们可以使用客户端库来查询 GraphQL API 并展示数据。目前，最流行的客户端库是 Apollo Client。通过以下代码，可以创建一个 Apollo Client 实例：
import { ApolloClient, InMemoryCache } from '@apollo/client'
const client = new ApolloClient({
uri: 'http://localhost:4000',
cache: new InMemoryCache()
})其中，uri 参数是 GraphQL 服务的地址，InMemoryCache 是 Apollo Client 的缓存。接下来，我们需要定义一个查询函数，并使用 Apollo Client 的 useQuery 钩子来发起查询：
-- -------------------- ---- -------
------ - --------- --- - ---- ----------------
----- ----------- - ----
----- -
-----
-
-
-------- ----- -
----- - -------- ------ ---- - - ---------------------
-- --------- ------ ------------
-- ------- ------ ------- -----------------
------ -
-----
---------------------
------
-
-在上述代码中，gql 是用于定义查询语言的函数，useQuery 是针对 HELLO_QUERY 的查询的钩子，可以获取查询结果并展示到 UI 上。
服务器端使用
在服务端，GraphQL 的解析器需要将查询语言映射到特定的数据源上。以 MongoDB 数据库为例，我们可以使用 mongoose 将 GraphQL 请求的数据映射到 MongoDB 上：
-- -------------------- ---- -------
----- -------- - -------------------
----- - --------- - - ------------------
-- ------
----- -------- - -
---- ---- -
--- ---
------ --------
------- --------
-
---- ----- -
-------- ----- ----
-
---- -------- -
--------
------ --------
------- --------
-- -----
-
-
-- -------
----- --------- - -
------ -
----- ----- --- - -- -- -- -
------ ----- ------------------ -----------
-
--
--------- -
-------- ----- --- ----- -- -
----- ---- - --- ----------
------ ----- -----------
-
-
-
-- -- ------- --
----- ------ - --- --------------- --------- --------- --
------------------------------------------------------- - ---------------- ---- --
----- -- - -------------------
-------------- --------------------------- ---------
--------------- ---------- -
--------------- -- ------------------- -- ------- -- -----------------
--在这个例子中，我们定义了一个 Book 数据模型，并通过解析器实现提供查询和添加图书信息的功能。在这里，_id 对应 MongoDB 原生的 ObjectId 类型，而 ID 则对应 GraphQL 的 ID 类型。
总结
本文介绍了 GraphQL 的核心概念，以及如何在服务端和客户端使用 GraphQL 构建 API。GraphQL 在前端开发中有广泛应用，可以极大地优化数据请求和响应速度。通过学习本文，读者可以掌握 GraphQL 的基本用法并可以将这种技术应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645bae2a968c7c53b0dfadfd