如何使用 Apollo Client 与 GraphQL 交互

阅读时长 6 分钟读完

前言

GraphQL 是一种用于 API 的查询语言,它由 Facebook 开发并开源。GraphQL 允许客户端指定需要的数据,从而避免了 REST API 中的“过度获取”问题。Apollo Client 是一个用于 JavaScript 应用程序的 GraphQL 客户端,它可以与 React、Vue、Angular 等框架集成。本文将介绍如何使用 Apollo Client 与 GraphQL 交互,包括如何构建 GraphQL 查询、如何处理响应等方面。

安装和配置 Apollo Client

要使用 Apollo Client,需要先安装它。可以通过 npm 或 yarn 安装:

或者

安装完成后,在应用程序的入口文件中配置 Apollo Client:

在上面的代码中,我们创建了一个 ApolloClient 实例,然后将 GraphQL API 的地址传递给它。这里的地址可以是你自己的 GraphQL API 地址。

构建 GraphQL 查询

在 Apollo Client 中,可以使用 gql 函数构建 GraphQL 查询。gql 函数使用模板字符串来定义查询,并返回一个包含查询语句的对象。例如:

-- -------------------- ---- -------
------ - --- - ---- ---------------

----- --------- - ----
  ----- -
    ----- -
      --
      ----
      -----
    -
  -
--
展开代码

上面的代码定义了一个名为 GET_USERS 的查询,该查询返回一个包含用户 ID、姓名和电子邮件的数组。在这个查询中,我们只需要指定我们需要的字段,而不是返回整个用户对象。这是 GraphQL 的一个优势。

发送 GraphQL 查询

在 Apollo Client 中,可以使用 Query 组件发送 GraphQL 查询。Query 组件是一个 React 组件,它接收一个查询和一个渲染函数作为参数。渲染函数接收一个包含查询结果的对象,该对象包含 loading、error 和 data 等属性。例如:

-- -------------------- ---- -------
------ - ----- - ---- ---------------

------ ------------------
  --- -------- ------ ---- -- -- -
    -- --------- ------ ------------------
    -- ------- ------ -------- -------

    ------ -
      ----
        -------------------- -- -
          --- --------------
            ----------- - ------------
          -----
        ---
      -----
    --
  --
--------
展开代码

上面的代码使用 Query 组件发送 GET_USERS 查询,并将查询结果传递给渲染函数。如果查询正在加载,渲染函数将返回“Loading...”文本。如果查询出错,渲染函数将返回“Error :(”文本。如果查询成功,渲染函数将返回一个包含用户列表的无序列表。

发送 GraphQL 变异

在 Apollo Client 中,可以使用 Mutation 组件发送 GraphQL 变异。Mutation 组件是一个 React 组件,它接收一个变异和一个渲染函数作为参数。渲染函数接收一个包含变异结果的对象,该对象包含 loading、error 和 data 等属性。例如:

-- -------------------- ---- -------
------ - -------- - ---- ---------------

----- -------- - ----
  -------- --------------- ----------- -
    -------------- ------- -
      --
      ----
      -----
    -
  -
--

--------- --------------------
  ---------- - -------- ------ ---- -- -- -
    -----
      ----------- -- -
        -------------------
        ---------
          ---------- -
            ------ -
              ----- -----------------------------
              ------ ------------------------------
            --
          --
        ---
      --
    -
      ------ ----------- ----------- ------------------ --
      ------ ------------ ------------ ------------------- --
      ------- ----------------- -------------
      -------- -- ------------------
      ------ -- -------- -------
      ----- -- -
        ---
          ---- ------ ------------------- - --------------------
        ----
      --
    -------
  --
-----------
展开代码

上面的代码使用 Mutation 组件发送 ADD_USER 变异,并将变异结果传递给渲染函数。渲染函数返回一个表单,用户可以在表单中输入姓名和电子邮件,并提交表单以添加新用户。如果变异正在加载,渲染函数将显示“Loading...”文本。如果变异出错,渲染函数将显示“Error :(”文本。如果变异成功,渲染函数将显示一个包含新用户信息的段落。

结论

使用 Apollo Client 和 GraphQL 可以使前端开发更加高效和灵活。在本文中,我们介绍了如何安装和配置 Apollo Client,如何构建 GraphQL 查询,如何发送 GraphQL 查询和变异,并提供了示例代码。希望本文对你有所帮助,让你更好地理解如何使用 Apollo Client 和 GraphQL 交互。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67676b3a98e3e1ab1a77c1aa

纠错
反馈

纠错反馈