将 GraphQL 和 React 纠缠在一起的最佳指南

阅读时长 8 分钟读完

GraphQL 是一个功能强大的查询语言和执行引擎,它被广泛用于构建 API 和 Web 应用程序。React 是一个流行的 JavaScript 库,用于构建用户界面,它强调组件化和声明性编程。将 GraphQL 和 React 结合起来可以为前端开发者带来很多好处,本文将介绍如何将它们纠缠在一起。

了解 GraphQL

在开始使用 GraphQL 和 React 前,我们需要先了解一下 GraphQL 的基础知识。GraphQL 是一种用于 API 的查询语言,它允许客户端指定需要的数据。GraphQL 的一个关键特性是它的类型系统,它让你清楚地知道你的 API 可以提供的数据类型和关系。GraphQL 的另一个重要特性是它可以在一个请求中获取多个资源,这通常称为“批处理”。

GraphQL 的一个典型的查询示例如下:

这个查询表示我们要获取一个 ID 为 1 的作者的姓名和他的所有文章的标题。

为 React 应用程序添加 GraphQL

要将 GraphQL 添加到 React 应用程序中,我们需要使用一个称为 Apollo 的库。Apollo 提供了一种简化使用 GraphQL 的方式,它为 React 应用程序提供了一些工具和组件来处理数据。

在使用 Apollo 之前,我们需要安装它:

现在,我们可以使用 Apollo Client 创建一个应用程序级别的 GraphQL 客户端。Apollo Client 是一个可以与任何 GraphQL API 集成的完整的状态管理库。下面是一个基本的 Apollo 客户端配置:

我们还需要将 Apollo 提供的 ApolloProvider 组件嵌套在 React 应用程序的根组件中。这个组件为整个应用程序提供了一个 Apollo 客户端实例:

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

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

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

现在我们已经设置了 Apollo 客户端,我们可以开始编写我们的查询。在 React 中,我们可以使用查询组件(Query)从一个 GraphQL API 中获取数据。下面是一个查询和渲染一个简单的组件的示例:

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

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

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

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

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

这个组件使用 Query 组件来发送一个 GraphQL 查询并渲染一个 ul 列表。

将查询作为 props 传递

查询组件是一种方便的方式来使用 GraphQL,但是在更深入的组件层次结构中使用它们可能会变得很麻烦。在这种情况下,我们可以使用 graphql 高阶组件来将查询组件作为 props 传递给我们的组件。例如,下面是一个使用高阶组件的示例:

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

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

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

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

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

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

在这个示例中,我们使用 graphql 高阶组件包装了我们的 PostsList 组件。这将 GET_POSTS 查询作为 props 传递到 PostsList 中。

在组件中提交 GraphQL 变更

除了从 GraphQL API 获取数据之外,我们还可以使用 GraphQL 提交变更。这就是 GraphQL 的另一个强大特性,它允许客户端更新和修改数据。

在 React 应用程序中提交变更通常使用 Mutation 组件来实现。例如,下面是一个提交变更的示例:

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

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

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

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

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

这个组件使用 Mutation 组件来提交一个名为 AddPost 的 GraphQL 变更。它还包含一个表单,允许用户输入新文章的标题并将其添加到数据库中。

结论

GraphQL 和 React 是相互兼容的技术,可以使前端开发者的工作更容易和高效。使用 Apollo 客户端和相关的工具,我们可以轻松地在 React 应用程序中使用 GraphQL 和提交变更。这项技术的重要性已经得到了认可,越来越多的开发者正在学习和使用它。希望本文能够对你学习 GraphQL 和 React 相关知识有所帮助。

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

纠错
反馈