GraphQL 是一种用于构建 API 的查询语言，它允许客户端精确地指定需要从服务器获取的数据。与 REST API 不同，GraphQL 具有更大的灵活性和可扩展性，因此它成为了许多前端开发者的首选。
本教程将介绍 GraphQL 的基础知识，并提供一些示例代码，帮助你了解如何在前端应用中使用 GraphQL。
GraphQL 简介
GraphQL 是 Facebook 开发的一种查询语言，它于 2015 年首次发布。GraphQL 通过定义一个类型系统来描述 API 的能力，并提供了一种类似 SQL 的查询语言，使得客户端可以精确地指定需要从服务器获取的数据。
与 REST API 不同，GraphQL 具有以下特点：
- 灵活性：GraphQL 允许客户端指定需要获取的数据，因此可以避免不必要的数据传输。
- 可扩展性：GraphQL 的类型系统允许 API 开发者定义新的类型和字段，从而使 API 更加灵活和可扩展。
- 强类型：GraphQL 的类型系统可以确保客户端和服务器之间传输的数据是符合预期的。
GraphQL 基础知识
定义类型
GraphQL 的类型系统由类型和字段组成。类型是数据的抽象，而字段则是类型的属性。GraphQL 定义了以下基本类型：
- String：字符串类型
- Int：整数类型
- Float：浮点数类型
- Boolean：布尔类型
- ID：唯一标识符类型
可以使用以下语法定义类型：
type Person {
name: String
age: Int
isMarried: Boolean
}上面的代码定义了一个名为 Person 的类型，它有三个字段：name、age 和 isMarried。
查询数据
客户端可以使用查询语言来指定需要从服务器获取的数据。查询语言类似于 SQL，但更加灵活。以下是一个简单的查询示例：
query {
person(id: 1) {
name
age
}
}上面的代码从服务器获取 id 为 1 的 Person 对象的 name 和 age 字段。
变更数据
GraphQL 也可以用于修改服务器上的数据。变更操作使用 mutation 关键字，例如：
mutation {
updatePerson(id: 1, name: "John") {
name
age
}
}上面的代码将 id 为 1 的 Person 对象的 name 字段设置为 "John"。
在前端应用中使用 GraphQL
安装 GraphQL 客户端
在前端应用中使用 GraphQL，需要使用一个 GraphQL 客户端库。目前比较流行的 GraphQL 客户端库有 apollo-client、relay 和 urql 等。
以 apollo-client 为例，可以使用以下命令安装：
npm install apollo-client graphql-tag graphql --save
创建 GraphQL 客户端
在前端应用中，需要创建一个 GraphQL 客户端来与服务器进行通信。可以使用以下代码创建一个 apollo-client：
-- -------------------- ---- -------
------ ------------ ---- ----------------
------ - -------- - ---- -------------------
------ - ------------- - ---- ------------------------
----- ------ - --- --------------
----- --- ----------
---- --------------------------------
---
------ --- ----------------
---上面的代码创建了一个 apollo-client，并指定了服务器的 GraphQL API 地址。
查询数据
使用 apollo-client 查询数据非常简单。以下是一个示例：
-- -------------------- ---- -------
------ --- ---- --------------
----- ---------- - ----
----- ----------- ---- -
---------- ---- -
----
---
---------
-
-
--
------
--------
------ -----------
---------- - --- - --
--
------------ -- ---------------------------------上面的代码从服务器获取 id 为 1 的 Person 对象的 name、age 和 isMarried 字段，并将结果打印到控制台。
变更数据
使用 apollo-client 变更数据也非常简单。以下是一个示例：
-- -------------------- ---- -------
------ --- ---- --------------
----- ------------- - ----
-------- ----------------- ---- ------ -------- -
---------------- ---- ----- ------ -
----
---
-
-
--
------
---------
--------- --------------
---------- - --- -- ----- ------ --
--
------------ -- ---------------------------------------上面的代码将 id 为 1 的 Person 对象的 name 字段设置为 "John"，并将结果打印到控制台。
总结
本教程介绍了 GraphQL 的基础知识，并提供了一些示例代码，帮助你了解如何在前端应用中使用 GraphQL。
GraphQL 具有更大的灵活性和可扩展性，因此它成为了许多前端开发者的首选。如果你正在寻找一种更好的方式来构建 API，那么 GraphQL 是一个值得尝试的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66373aafd3423812e456518b