如何在浏览器中实现 GraphQL 查询-JavaScript中文网-JavaScript教程资源分享门户

如何在浏览器中实现 GraphQL 查询

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

前言

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