GraphQL 是一种用于构建 API 的查询语言，它提供了一种更加灵活、高效、可扩展的方式来定义和查询数据。相比于传统的 RESTful API，GraphQL 在数据获取和传输方面更加精细，使得前端开发者能够更加轻松地获取和操作数据。
GraphQL 的优势
灵活性
GraphQL 的最大优势在于它的灵活性。传统的 RESTful API 常常需要返回固定格式的数据，而 GraphQL 则允许前端开发者自由地定义需要获取的数据，从而避免了无用数据的传输，提高了数据传输的效率。
可扩展性
GraphQL 的另一个优势在于它的可扩展性。由于 GraphQL 允许前端开发者自由地定义需要获取的数据，因此在需要增加新的数据字段时，只需要在 API 定义中增加对应的字段即可，而不需要修改已有的接口。这样可以避免对已有接口的影响，提高了 API 的可维护性和可扩展性。
干净性
传统的 RESTful API 常常需要返回大量的嵌套数据，导致数据结构复杂、难以维护。而 GraphQL 则允许前端开发者自由地定义需要获取的数据，从而避免了数据的嵌套，使得数据结构更加清晰、易于维护。
GraphQL 的基本概念
Schema
Schema 是 GraphQL API 的核心概念，它定义了 API 支持的所有查询和变更操作。Schema 中包括了所有的类型、字段和操作，前端开发者可以通过查询 Schema 来了解 API 的所有功能。
Type
Type 是 GraphQL 中的数据类型，它定义了 API 中的所有数据结构。GraphQL 支持标量类型、对象类型、枚举类型、接口类型和联合类型等不同的数据类型。
Query
Query 是用于查询数据的操作，它定义了所有可用的查询字段和参数。前端开发者可以通过 Query 来获取 API 中的数据。
Mutation
Mutation 是用于修改数据的操作，它定义了所有可用的修改字段和参数。前端开发者可以通过 Mutation 来修改 API 中的数据。
GraphQL 的实践
下面我们将通过一个简单的示例来介绍 GraphQL 的实践。
定义 Schema
首先，我们需要定义一个 Schema，来定义 API 支持的所有查询和变更操作。在我们的示例中，我们将定义一个简单的类型 Book，来表示一本书的信息，其中包括书名、作者和出版社等信息。
type Book {
title: String!
author: String!
publisher: String!
}接着，我们需要定义一个 Query，来查询 Book 数据。在我们的示例中，我们将定义一个 queryBooks 查询，来查询所有的 Book 数据。
type Query {
queryBooks: [Book!]!
}最后，我们需要定义一个 Mutation，来修改 Book 数据。在我们的示例中，我们将定义一个 addBookMutation 变更操作，来新增一本 Book。
type Mutation {
addBookMutation(title: String!, author: String!, publisher: String!): Book!
}实现 Resolver
定义完 Schema 后，我们需要实现 Resolver，来处理查询和变更操作。在我们的示例中，我们需要实现 queryBooks 查询和 addBookMutation 变更操作。
-- -------------------- ---- -------
----- ----- - -
- ------ -------- ------- ---------- ---------- ------------ --
- ------ -------- ------- ---------- ---------- ------------ --
- ------ -------- ------- ---------- ---------- ------------ --
--
----- --------- - -
------ -
----------- -- -- ------
--
--------- -
---------------- --- - ------ ------- --------- -- -- -
----- ---- - - ------ ------- --------- --
-----------------
------ -----
--
--
--使用 GraphQL API
最后，我们需要使用 GraphQL API，来查询和修改数据。在我们的示例中，我们将使用 Apollo Client 来查询和修改数据。
首先，我们需要定义一个 GraphQL 客户端。
import { ApolloClient, InMemoryCache } from "@apollo/client";
const client = new ApolloClient({
uri: "http://localhost:4000/graphql",
cache: new InMemoryCache(),
});然后，我们可以使用 client.query 方法来查询数据。
-- -------------------- ---- -------
------ - --- - ---- -----------------
----- ----------- - ----
----- -
---------- -
-----
------
---------
-
-
--
------
--------
------ ------------
--
-------------- -- ---------------------最后，我们可以使用 client.mutate 方法来修改数据。
-- -------------------- ---- -------
------ - --- - ---- -----------------
----- ----------------- - ----
-------- ----------------------- -------- -------- -------- ----------- -------- -
---------------------- ------- ------- -------- ---------- ----------- -
-----
------
---------
-
-
--
------
---------
--------- ------------------
---------- - ------ -------- ------- ---------- ---------- ------------ --
--
-------------- -- ---------------------总结
通过上述示例，我们可以看到，使用 GraphQL 构建可扩展干净的 API 是非常简单的。GraphQL 的灵活性、可扩展性和干净性，使得前端开发者能够更加轻松地获取和操作数据。如果你正在构建一个 API，不妨考虑使用 GraphQL，它将大大提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6572deecd2f5e1655dbe35e9