npm 包 react-apollo 使用教程

阅读时长 6 分钟读完

本文将介绍如何使用 npm 包 react-apollo 实现 GraphQL 在 React 应用中的数据管理。

什么是 react-apollo?

react-apollo 是一个为 React 应用提供数据管理的 npm 包,它与 Apollo Client 配合使用,可以使得 React 应用在处理 GraphQL 数据时变得更加简单和高效。

安装 react-apollo

在开始使用 react-apollo 前,需要先安装它。你可以在终端中运行以下命令来安装:

创建一个 Apollo Client

为了使用 react-apollo,我们首先需要创建一个 Apollo Client,可以在应用入口处进行创建:

在上述代码中,我们使用 ApolloClientInMemoryCache 来创建一个 Apollo Client。其中,uri 参数指定了 GraphQL API 的地址,cache 参数指定了数据缓存的方式。

在组件中使用 Query

一旦我们有了一个 Apollo Client,就可以在组件中使用 Query 来获取 GraphQL 数据了。例如,我们可以创建一个组件来显示所有用户:

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

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

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

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

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

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

在上述代码中,我们使用 useQuery hook 来发送 GraphQL 查询,并在组件中渲染返回的数据。其中,ALL_USERS_QUERY 是一个 GraphQL 查询,它将返回所有用户的 id 和 name。

在组件中使用 Mutation

除了获取数据外,我们还可以使用 Mutation 来修改数据。例如,我们可以创建一个表单来添加新用户:

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

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

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

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

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

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

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

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

在上述代码中,我们使用 useMutation hook 来发送 GraphQL 变更,并在提交表单后更新缓存。其中,ADD_USER_MUTATION 是一个 GraphQL 变更,它将添加一个新用户,并返回该用户的 id 和 name。

总结

通过 react-apollo 和 Apollo Client 的帮助,我们可以在 React 应用中更加方便和高效地管理 GraphQL 数据。在本文中,我们介绍了如何创建一个 Apollo Client,并在组件中使用 QueryMutation hooks 来

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

纠错
反馈