GraphQL 是一种用于 API 的查询语言，它允许客户端指定需要的数据，而不是像 RESTful API 那样返回固定的数据结构。由于其灵活性和可扩展性，GraphQL 在现代 Web 应用程序中变得越来越流行。在本文中，我们将学习如何在 React 中使用 GraphQL。
GraphQL 的基础知识
在开始使用 GraphQL 之前，我们需要了解一些基本概念。GraphQL 有三个核心概念：查询、类型和解析器。
查询
查询是 GraphQL 的核心概念之一，它用于描述客户端需要获取的数据。查询是由字段组成的树形结构，每个字段都有一个类型和一个名称。
例如，假设我们有一个查询需要获取用户的名称和电子邮件地址：
query {
user {
name
email
}
}这个查询包含一个名为 user 的字段，它又包含了两个子字段：name 和 email。
类型
GraphQL 中的类型用于定义数据的结构。GraphQL 有两种类型：标量类型和对象类型。
标量类型表示单个值，例如字符串、数字、布尔值等。GraphQL 内置了一些标量类型，例如 String、Int、Float 和 Boolean。
对象类型表示复杂的数据结构，例如用户、文章等。对象类型由多个字段组成，每个字段都有一个名称和一个类型。
例如，我们可以定义一个名为 User 的对象类型：
type User {
id: ID!
name: String!
email: String!
}这个类型包含三个字段：id、name 和 email。其中 ID 和 String 都是标量类型。
解析器
解析器用于将查询转换为实际的数据。每个字段都必须有一个解析器，它用于获取该字段的值。
例如，假设我们有一个名为 getUser 的查询，它需要获取用户的名称和电子邮件地址。我们可以为每个字段定义一个解析器：
-- -------------------- ---- -------
----- --------- - -
------ -
-------- -- -- -
------ -
----- ----- -----
------ -----------------------
--
--
--
----- -
----- ------ -- ----------
------ ------ -- -----------
--
--这个解析器包含两个部分：Query 和 User。Query 部分定义了一个名为 getUser 的查询，它返回一个包含 name 和 email 字段的对象。User 部分定义了 User 类型的解析器，它将 name 和 email 字段映射到实际的用户对象。
在 React 中使用 GraphQL
现在我们已经了解了 GraphQL 的基本概念，让我们看看如何在 React 中使用它。
安装依赖
首先，我们需要安装一些依赖项。我们将使用 graphql、react-apollo 和 apollo-boost。
npm install graphql react-apollo apollo-boost
创建 GraphQL 客户端
在使用 GraphQL 之前，我们需要创建一个 GraphQL 客户端。我们将使用 apollo-boost 库来创建客户端。
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql',
});这个客户端将连接到 http://localhost:4000/graphql，这是我们 GraphQL 服务器的地址。
创建查询
现在我们可以创建一个查询。我们将使用 gql 函数来定义查询。
-- -------------------- ---- -------
------ - --- - ---- ---------------
----- -------- - ----
----- -
---- -
----
-----
-
-
--这个查询将获取用户的名称和电子邮件地址。
在组件中使用查询
现在我们可以在 React 组件中使用查询。我们将使用 Query 组件来获取数据。
-- -------------------- ---- -------
------ - ----- - ---- ---------------
----- ---- - -- -- -
------ -----------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
-----
-------- --------------------
--------- ---------------------
------
--
--
--------
--这个组件将获取用户的名称和电子邮件地址，并将它们呈现在页面上。如果数据还没有加载完成，它将显示 "Loading..."。如果发生错误，它将显示 "Error :("。
将数据传递给组件
如果我们需要将数据传递给子组件，我们可以使用 graphql 高阶组件。
-- -------------------- ---- -------
------ - ------- - ---- ---------------
----- ---- - -- ----- - -------- ------ ---- - -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
-----
-------- ---------------
--------- ----------------
------
--
--
------ ------- ------------------------这个组件将获取用户的名称和电子邮件地址，并将它们传递给子组件。如果数据还没有加载完成，它将显示 "Loading..."。如果发生错误，它将显示 "Error :("。
发送变异
除了查询，GraphQL 还支持变异。变异用于修改数据。我们可以使用 Mutation 组件来发送变异。
-- -------------------- ---- -------
------ - -------- - ---- ---------------
----- ----------- - ----
-------- ----------------- -------- ------- -------- -
---------------- ------ ------ ------- -
----
-----
-
-
--
----- -------- - -- ----- ----- -- -- -
--- ---------- -----------
------ -
--------- -----------------------
------------- -- -
-----
------------- -- -
-------------------
------------ ---------- - ----- ---------------- ------ ---------------- - ---
--
-
------ ----------- ------------------- ----------- -- ---------- - ------ --
------ ----------- -------------------- ----------- -- ----------- - ------ --
------- -----------------------------
-------
--
-----------
--
--这个组件将呈现一个表单，用户可以在其中输入他们的名称和电子邮件地址。当用户提交表单时，它将发送一个变异，将新的名称和电子邮件地址保存到数据库中。
结论
在本文中，我们学习了如何在 React 中使用 GraphQL。我们了解了 GraphQL 的基本概念，包括查询、类型和解析器。我们还学习了如何使用 react-apollo 和 apollo-boost 库来创建 GraphQL 客户端和发送查询。最后，我们还学习了如何使用变异来修改数据。
GraphQL 是一个非常强大和灵活的工具，可以帮助我们构建更加可扩展和高效的 Web 应用程序。如果你还没有尝试过 GraphQL，我强烈建议你去尝试一下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6763ac18856ee0c1d4216796