介绍
GraphQL 是一种用于 API 的查询语言，由 Facebook 开发并开源。GraphQL 的主要特点是：只返回请求的数据，避免了 RESTful API 中数据冗余和频繁的网络请求，使得前端开发更加高效和灵活。
React 是一个流行的 JavaScript 前端框架，可以用于构建单页应用和复杂的用户界面。React 支持使用 GraphQL 查询和更新数据，和其他前端框架一样，可以通过现有的 GraphQL 库实现 React 和 GraphQL 的集成。
本文将详细介绍如何在 React 中使用 GraphQL。
安装依赖
要在 React 中使用 GraphQL，需要安装以下依赖：
react-apollo: 提供了一个 Apollo Provider，用于将 Apollo Client 的结果整合到 React 组件中。可以使用npm install react-apollo或yarn add react-apollo安装。apollo-boost: 提供了一个自带 GraphQL 的 Apollo Client，可以方便地集成 GraphQL。可以使用npm install apollo-boost或yarn add apollo-boost安装。
使用步骤
使用 GraphQL 在 React 中共分为以下几个步骤：
- 创建 GraphQL 客户端
import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: "http://localhost:4000/graphql"
});创建一个 ApolloClient 实例，其中 URI 是 GraphQL API 的地址。
- 创建 Apollo Provider
import { ApolloProvider } from "react-apollo";
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root")
);在代码的最外层，使用 ApolloProvider 组件将 React 应用程序包裹起来，以便 Apollo Client 可以将数据注入到 React 组件中。
- 创建 GraphQL 查询
-- -------------------- ---- -------
------ --- ---- --------------
----- --------- - ----
----- -
----- -
--
----
----
-
-
--使用 gql 创建 GraphQL 查询语句。此处的查询将返回一个名为 todos 的数组，包括所需要的属性（id、text 和 done）。
- 创建 GraphQL 组件
-- -------------------- ---- -------
------ - ----- - ---- ---------------
----- ---------------- - -- -- -
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
------------------ --- ----- ---- -- -- -
--- ---------
-------------------
------ --------------- -------------- --
-----
---
-----
--
--
--------
--使用 Query 组件来获取数据，传入 GET_TODOS 查询，并在回调函数中处理数据。
loading 表示是否正在加载数据，error 表示加载数据是否出错，data 表示数据对象。当数据加载完成时，可以对返回的数据进行遍历，并在组件的渲染中显示它们。
示例
下面是一个简单的示例，演示了如何在 React 中使用 GraphQL。假设有一个待办事项的应用程序，需要显示待办事项列表和已完成的待办事项数量。该应用程序将从 GraphQL API 加载数据。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------ ---- ---------------
------ - --------------- ----- - ---- ---------------
------ --- ---- --------------
----- ------ - --- --------------
---- -------------------------------
---
----- --------- - ----
----- -
----- -
--
----
----
-
-
--
----- -------------- - ----
----- -
---------
-
--
----- --- - -- -- -
--------------- ----------------
-----
-------- ---------
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
------------------ --- ----- ---- -- -- -
--- ---------
-------------------
------ --------------- -------------- --
-----
---
-----
--
--
--------
------ -----------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
---
----- ------------------------------------
----
--
--
--------
------
-----------------
--
-------------------- --- ---------------------------------首先，我们在 App 组件中创建 Apollo Client，并定义了两个 GraphQL 查询：GET_TODOS 用于获取所有待办事项，GET_DONE_COUNT 用于获取已完成的待办事项数量。然后，在组件中使用 Query 组件来处理加载到的数据。
最后在 ReactDOM.render 中，将 App 组件渲染到 HTML 页面上。
总结
GraphQL 是一种用于 API 的查询语言，可以避免 RESTful API 中数据冗余和频繁的网络请求，使得前端开发更加高效和灵活。
React 是一个流行的 JavaScript 前端框架，可以用于构建单页应用和复杂的用户界面。React 支持使用 GraphQL 查询和更新数据，并且可以方便地集成 GraphQL。
如果你正在开发 React 应用程序并需要使用 GraphQL，可以使用上述步骤来集成它们。在使用 GraphQL 时，请务必谨慎考虑数据结构，以确保最佳的性能和体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c632d710032fedd38bc9b3