npm 包 graphql-query-renderer 使用教程

阅读时长 5 分钟读完

GraphQL 是一种用于 API 的查询语言,与传统的 REST API 相比具有更高的效率和更好的灵活性。在前端领域,GraphQL 在使用中需要使用 JavaScript 库和工具来呈现 UI,包括 “graphql-query-renderer ” 这个 npm 包。

安装与引入

graphql-query-renderer 是一个 npm 包,你可以通过以下命令进行安装:

然后在你的项目中引入它:

使用方法

该包提供了一个名为 QueryRenderer 的 React 组件,用于将 GraphQL 查询渲染成 React 展示组件。我们将了解如何使用它,并通过一个实际应用的例子演示它的使用。这里我们需要用到以下几个必要的库: reactreact-domgraphqlrelay-runtimegraphql-tag

在我们的 App.js 文件中,我们首先要做的是设置 GraphQL entpoint 和 定义我们的查询字符串。然后,我们调用 QueryRenderer 组件将查询和渲染函数传递给它。

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

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

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

在上面的代码中,我们引入了 RelayEnvironmentProvider 组件,实现了一个可重用的环境配置。然后,我们引入了 GraphQL 查询字符串(SampleQuery),并配置 fetchQuery 函数来获取数据。

接下来,我们调用了 QueryRenderer 组件,将查询和渲染函数传递给它。渲染函数将返回我们的组件,并使用传递给它的 props 进行渲染。

在这个例子中,我们将传递 viewer 并将其传递给 UserList 组件,展示所有用户的列表。QueryRenderer 组件将等待数据被处理,或者如果数据没有加载完成,它将显示一个 Loading 文字。

总结

graphql-query-renderer 帮助我们将 GraphQL 查询渲染成 React 展示组件。通过定义查询字符串,并将其传递给 QueryRenderer 组件,我们可以轻松地获取并显示数据。在这个教程中,我们还看到了如何设置 GraphQL endpoint 和使用 RelayEnvironmentProvider 组件来组织我们的代码。

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

纠错
反馈

纠错反馈