GraphQL 是一种用于 API 的查询语言，与传统的 REST API 相比具有更高的效率和更好的灵活性。在前端领域，GraphQL 在使用中需要使用 JavaScript 库和工具来呈现 UI，包括 “graphql-query-renderer ” 这个 npm 包。
安装与引入
graphql-query-renderer 是一个 npm 包，你可以通过以下命令进行安装：
--- ------- ----------------------
然后在你的项目中引入它：
------ ------------- ---- ------------------------ -- -- ----- ------------- - ---------------------------------
使用方法
该包提供了一个名为 QueryRenderer 的 React 组件，用于将 GraphQL 查询渲染成 React 展示组件。我们将了解如何使用它，并通过一个实际应用的例子演示它的使用。这里我们需要用到以下几个必要的库： react，react-dom，graphql，relay-runtime 和 graphql-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