前言
GraphQL 是一种用于API的查询语言和运行时环境。尽管它最初是由Facebook开发的，但它已经被许多不同的公司和组织采用。相对于REST API，GraphQL具有更好的可读性、可预测性和可扩展性。
在本文中，我们将研究如何在浏览器中实现GraphQL查询。
基本概念
查询
GraphQL 查询是一种类似于JSON的结构，由字段、参数和嵌套查询组成。它被用于向服务器发出请求，以获取所需的数据。
下面是一个简单的查询示例：
query {
posts {
title
author {
name
}
}
}这个查询将请求所有帖子的标题和作者的名称。
Schema
在GraphQL中，Schema定义了API提供的类型、查询、变量和操作。Schema是GraphQL API的合同，客户端和服务器都需要符合它。
Resolver
Resolver是GraphQL查询的核心实现，用于将请求转换为实际的数据。Resolver将从数据源中提取数据并将其格式转换为GraphQL的返回值。
在浏览器中实现GraphQL查询
要在浏览器中实现GraphQL查询，我们需要三件事情：
- 构建GraphQL Schema
- 编写GraphQL Resolver
- 进行GraphQL操作
构建GraphQL Schema
我们需要定义GraphQL Schema，以便GraphQL API可以暴露出我们希望公开的所有类型、查询、变量和操作。在客户端中，我们可以使用 graphql-tag 库来定义GraphQL Schema，以便将它们传递给GraphQL服务器。
-- -------------------- ---- -------
------ --- ---- --------------
----- ------ - ----
---- ------ -
--- -------
----- -------
------ --------
-
---- ---- -
--- -------
------ -------
------- -------
-
---- ----- -
------ --------
-------- --------- ----
-
--上面的示例定义了Author和Post类型、查询中的posts和post操作以及它们的返回类型。
编写GraphQL Resolver
Resolver实现GraphQL查询，用于调用服务器上的数据源并将其格式化为GraphQL类型的返回。因为GraphQL GraphQL操作是单个入口点，所以Resolver可以根据请求的参数来提取正确的数据。
在客户端中，我们要使用 Apollo Client（一个用于管理GraphQL状态的客户端库）来将Resolver带到浏览器中。
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: '/graphql',
cache: new InMemoryCache(),
});进行GraphQL操作
在客户端中，我们要使用Apollo Client来实现GraphQL查询。我们可以使用 React Hooks在我们的React组件中进行查询。我们可以使用 useQuery 钩子，以便获取我们的查询结果。
-- -------------------- ---- -------
------ - -------- - ---- -----------------
----- --------- - ----
----- -------- -
----- -
-----
------ -
----
-
-
-
--
-------- ---------- -
----- - -------- ------ ---- - - --------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
--
------ ----------
----
---------------------- -- -
--- --------------
---------------------
----- ----------------------
-----
---
-----
---
--
-上面的代码将使用useQuery钩子查询所有帖子，然后渲染它们的标题和作者。
总结
本文介绍了如何在浏览器中实现GraphQL查询。我们讨论了GraphQL的基础知识、Schema、Resolver和操作。我们介绍了Apollo Client，一种使用React的GraphQL状态管理客户端库。这将帮助你开始在你的React应用程序中使用GraphQL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471a94b968c7c53b0f8d2e6