前言
GraphQL 是一种用于API的查询语言和运行时环境。尽管它最初是由Facebook开发的,但它已经被许多不同的公司和组织采用。相对于REST API,GraphQL具有更好的可读性、可预测性和可扩展性。
在本文中,我们将研究如何在浏览器中实现GraphQL查询。
基本概念
查询
GraphQL 查询是一种类似于JSON的结构,由字段、参数和嵌套查询组成。它被用于向服务器发出请求,以获取所需的数据。
下面是一个简单的查询示例:
----- - ----- - ----- ------ - ---- - - -
这个查询将请求所有帖子的标题和作者的名称。
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带到浏览器中。
------ - ------------- ------------- - ---- ----------------- ----- ------ - --- -------------- ---- ----------- ------ --- ---------------- ---
进行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