GraphQL 是一种新兴的 API 查询语言，它允许客户端精确地指定需要从服务器获取的数据，并将多个查询合并为一个请求。React 是一种流行的 JavaScript 库，用于构建用户界面。结合使用 GraphQL 和 React 可以创建出现代 Web 应用，本文将介绍如何使用这两种技术构建 Web 应用的完整指南。
GraphQL 基础知识
定义 GraphQL Schema
GraphQL Schema 定义了数据模型和查询语言。在 GraphQL 中，Schema 由类型定义和查询定义组成。类型定义包括对象类型、枚举类型、输入类型和接口类型。查询定义包括查询类型、变量定义、输入值定义和查询语句。
以下是一个简单的 GraphQL Schema 示例：
-- -------------------- ---- ------- ---- ---- - --- --- ------ ------- ------- ------- -------------- ------- - ---- ----- - -------- ----- ---- ------ ------ - ----- --------- - ------ ------- ------- ------- -------------- ------- - ---- -------- - ----------------- ------------ ---- -------------- ---- ------ ------------ ---- -------------- ----- ------- -
上述 Schema 定义了一个 Book 类型，包括 id、title、author 和 publishedDate 属性。Query 类型定义了两个查询，一个用于获取单个 Book 对象，另一个用于获取所有 Book 对象。Mutation 类型定义了三个操作，用于创建、更新和删除 Book 对象。
查询 GraphQL API
在 GraphQL 中，客户端可以精确地指定需要获取的数据。以下是一个查询的示例：
query {
books {
id
title
author
}
}上述查询将获取所有 Book 对象的 id、title 和 author 属性。客户端可以使用变量来传递参数，以下是一个带参数的查询示例：
query($id: ID!) {
book(id: $id) {
id
title
author
}
}上述查询将获取指定 id 的 Book 对象的 id、title 和 author 属性。
使用 GraphQL 客户端库
GraphQL 客户端库可以帮助客户端发送 GraphQL 查询并处理响应。以下是一些常见的 GraphQL 客户端库：
- Apollo Client：一个功能强大的 GraphQL 客户端库，支持 React、Angular、Vue 和原生 JavaScript。
- Relay：Facebook 开源的 GraphQL 客户端库，专为 React 应用而设计。
- Urql：一个轻量级的 GraphQL 客户端库，支持 React 和原生 JavaScript。
React 基础知识
创建 React 组件
在 React 中，组件是 UI 的构建块。以下是一个简单的 React 组件示例：
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;上述组件接收一个名为 name 的 props，并在页面上显示一条问候语。
使用 React 组件
在 React 中，可以使用 JSX 语法来声明组件。以下是一个使用 Greeting 组件的示例：
import React from 'react';
import Greeting from './Greeting';
function App() {
return <Greeting name="John" />;
}
export default App;上述示例将在页面上显示一条问候语，其中 name 属性的值为 John。
状态管理
在 React 中，组件状态可以通过 useState Hook 进行管理。以下是一个使用 useState Hook 的示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ----------- -
-------------- - ---
-
------ -
-----
--------- -----------
------- --------------------------------------
------
--
-
------ ------- --------上述示例定义了一个 Counter 组件，其中 count 状态的初始值为 0。当用户点击 Increment 按钮时，count 状态将增加 1。
使用 GraphQL 和 React 构建 Web 应用
使用 Apollo Client
在 React 应用中使用 Apollo Client 可以方便地管理 GraphQL 查询和响应。以下是一个使用 Apollo Client 的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -------------- --------------- --------- --- - ---- -----------------
----- ------ - --- --------------
---- ----------------------------------
------ --- ---------------
---
----- ----------- - ----
----- -
----- -
--
-----
------
-
-
--
-------- ------- -
----- - -------- ------ ---- - - ----------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
-------------------- -- -
--- --------------
---------------------
----- -----------------
-----
---
-----
--
-
-------- ----- -
------ -
--------------- ----------------
------ --
-----------------
--
-
------ ------- ----上述示例使用 Apollo Client 发送 BOOKS_QUERY 查询，并在页面上显示所有 Book 对象的标题和作者。
使用 Relay
使用 Relay 可以更方便地管理 GraphQL 查询和响应，并提供更好的性能和可维护性。以下是一个使用 Relay 的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------------- ------------------ ------- - ---- --------------------
------ - ----------------- - ---- ---------------------
----- ----------- - --------
----- -------- -
----- -
--
-----
------
-
-
--
-------- ------------ -
----- ---- - ------------------------------ --------------------
------ -
----
-------------------- -- -
--- --------------
---------------------
----- -----------------
-----
---
-----
--
-
-------- ----- -
----- ----------- - --------------------
----- ------------ - -------------------------------- ----
------ -
------------------------- --------------------------
------ --------------------------- --
---------------------------
--
-
------ ------- ----上述示例使用 Relay 发送 BOOKS_QUERY 查询，并在页面上显示所有 Book 对象的标题和作者。
总结
本文介绍了如何使用 GraphQL 和 React 构建现代 Web 应用的完整指南。首先介绍了 GraphQL 的基础知识，包括 Schema 定义和查询语言。然后介绍了 React 的基础知识，包括组件创建和状态管理。最后介绍了如何使用 Apollo Client 和 Relay 在 React 应用中管理 GraphQL 查询和响应。希望本文能够对读者学习和使用 GraphQL 和 React 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65692f6ad2f5e1655d1bc3e0