如何在 React 中使用 GraphQL 查询
GraphQL 是一个用于 API 的查询语言，它可以让前端开发者以一种灵活的方式获取数据。React 中使用 GraphQL，可以使我们避免繁杂的数据处理和传递操作，实现前端与后台数据交互的分离，提高了前端的灵活性和响应速度。
1. 安装相关库
在 React 中使用 GraphQL，需要引入相关的库。这里我们以 apollo-client 为例。在项目中使用以下命令进行安装。
npm install apollo-boost react-apollo graphql-tag graphql
2. 配置 Apollo 客户端
在 React 项目中，我们需要创建一个 Apollo 客户端。通过配置客户端可以连接服务器，定义数据获取的逻辑。以下是一个简单的配置示例，在 src/index.js 中添加以下代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --- ---- --------
------ - -------------- - ---- ---------------
------ ------------ ---- ---------------
----- ------ - --- --------------
---- ------------
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--其中，uri 表示执行 GraphQL 查询的服务器地址。
3. 编写 GraphQL 查询
在 React 中使用 GraphQL，需要编写 GraphQL 查询语句。这里我们以查询 GitHub 上的仓库为例。在 src/App.js 中添加以下代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------------
------ --- ---- --------------
----- ---------------- - ----
-
------ -
------------------- -- -
----- -
---- -
--
----
-
-
-
-
-
--
-------- ----- -
------ -
-----
------ -----------------
------ -------------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
-------------------------------------- ---- -- -- -
--- ------------------------------
---
-----
--
--
--------
------
--
-
------ ------- ----在以上代码中，我们使用 gql 将查询语句转换成了字符串形式。然后使用 Query 组件传入查询语句 GET_REPOSITORIES，使用 data 属性渲染数据。
4. 声明 GraphQL Fragment
在 React 中使用 Fragment 可以将组件内多个元素返回。GraphQL 也有类似的概念，我们可以将其称为 Fragment，这样可以重复使用查询结果中相同的字段。
在 src/App.js 中添加以下代码：
-- -------------------- ---- -------
----- ------------------- - ----
-------- ---------------- -- ---------- -
--
----
-----------
---------- -
----------
-
-
--在 GET_REPOSITORIES 查询语句中使用声明好的 Fragment：
-- -------------------- ---- -------
----- ---------------- - ----
-
------ -
------------------- -- -
----- -
---- -
-------------------
-
-
-
-
-
----------------------
--以上代码中，我们声明了一个名为 repositoryFields 的 Fragment，它包含了查询结果中所需的字段。然后通过使用 ...repositoryFields 引入该 Fragment，避免了查询语句的重复。
5. 变量化查询
GraphQL 支持将查询语句变量化，使查询更具有灵活性。例如，我们需要按照关键字搜索仓库，就可以将请求传递一个查询变量进行操作。
在 src/App.js 中添加以下代码：
-- -------------------- ---- -------
----- ------------------- - ----
----- ---------------- -------- -
------------- --------- ----- ----------- ------ -- -
----- -
---- -
-------------------
-
-
-
-
----------------------
--
-------- -------------------- -
----- --------- ----------- - -------------------
----- ------------ - ----- -- -
-------------------------------
--
----- ------------ - ----- -- -
-----------------------
--
------ -
-----
----- ------------------------
------ ----------- --------------- ----------------------- --
------- -----------------------------
-------
-------- -- -
------ --------------------------- ------------ ------- ---
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
------------------------- ---- -- -- -
--- --------------
-- -------------------------------
-------------------------
------------------------------- ---------
-----
---
-----
--
--
--------
--
------
--
-在以上代码中，我们定义了一个 SEARCH_REPOSITORIES 查询语句，使用 query 变量进行搜索。然后在 SearchRepositories 组件中，使用变量 keyword 来传递查询参数。当 keyword 不为空时，使用 Query 组件传入 SEARCH_REPOSITORIES 查询语句和变量。
总结
在 React 中使用 GraphQL 查询，可以使前端数据获取的操作更加简洁高效，提升用户体验和开发效率。本文演示了如何配置 Apollo 客户端，编写 GraphQL 查询语句，声明 Fragment 和变量化查询。
以上便是使用 GraphQL 查询数据的基础操作，读者可以根据实际需求进一步探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664a41e7d3423812e4933004