什么是 GraphQL？
GraphQL 是一种数据查询语言和运行时环境，用于 API 的开发。它旨在提高 API 所能提供的效率、强度和灵活性。GraphQL 由 Facebook 开发，并于 2015 年开源。
相比于 RESTful API，GraphQL 的主要优势在于它能够提供只返回所需数据的能力，客户端无需多个请求和响应来获得完整的数据。因为其简化了 API 的使用，同时允许客户端非常精确地指定需要的数据，所以 GraphQL 在 Web 应用开发中越来越受欢迎。
在 React 中，GraphQL 可以帮助我们更好地管理我们的状态和 UI 层。我们通常使用 React 作为前端库来构建客户端应用程序，并将 GraphQL 用作与服务器交互的中间件。
并且，React 有专门的用于 GraphQL 的库：Relay 和 Apollo，它们的API接口简单易懂，注重性能。在 React 项目中使用这些库，能够更加有效地使用 GraphQL，从而更好地组织我们的代码和管理数据。
在以下的代码示例中，我们将介绍如何在 React 中使用 Apollo 客户端和GraphQL 来获取数据。
安装依赖
首先，需要安装必要的依赖：
npm install apollo-boost react-apollo graphql
apollo-boost提供了 Apollo 客户端的所有必要功能react-apollo可以与我们的 React 应用程序协同 Werk，从而更好地使用 Apollo 客户端graphql用于定义我们的查询和模式
创建客户端
在项目文件中，需创建客户端：
import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: "https://api.example.com/graphql",
});创建 ApolloClient 实例时，需要将服务器 URI 传递到 uri 选项中，此处替换为你自己的服务器端点。
编写查询
我们可以通过编写 GraphQL 查询来获取数据。在这里，我们首先创建了一个查询，并使用 gql （import 的 graphql 方法）将查询定义为一个字符串值。
-- -------------------- ---- -------
------ - --- - ---- ----------
----- ----- - ----
----- -------------- -
------- -
--
----
-
-
--在组件中使用查询
使用 useQuery hook 将查询绑定到 React 组件上。 还需要将我们的 client 传递给 ApolloProvider 组件，从而为我们的应用程序提供 Apollo 客户端。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- -------- - ---- ---------------
-------- ------------------ -
----- - -------- ------ ---- - - ----------------
-- --------- ------ ------------------
-- ------- ------ --------- --------------------
------ -
-----
----------------------------
------
--
-
-------- ----- -
------ -
--------------- ----------------
----------------- --
-----------------
--
-在上面的示例中，我们使用了 useQuery 钩子来将查询绑定到 React 组件上，查询返回的数据可以通过 loading、error 和 data 参数访问。其中 loading 和 error 变量设置为布尔值，告知我们是否正在等待查询结果或遇到错误。最后，我们将 data.example.name 渲染在我们的组件中。
常见的 GraphQL 操作
GraphQL 除了获取数据外，使用方法也包括增、删、改，以下是常见的 GraphQL 操作方法：
- 查询：通过查询获取数据。
- 变更：允许API 用户更改数据。
- 订阅：让您能够实时获取变化的数据流。
结论
GraphQL 是 React 中非常有用的工具之一，旨在改善应用的性能和可维护性。在本文中，我们介绍了如何在 React 应用程序中使用 Apollo 客户端和 GraphQL 来获取数据，并且还通过上面的示例介绍了我们如何以自己的方式轻松地更新和呈现我们的 UI。
虽然整个方案的开发和实施需要额外投入时间和精力，但从长期来看，它将为您的应用程序提供更出色的可扩展性、可维护性和可重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670f197a5f5512810262edfe