如果你正在开发一个前端项目，并且需要使用 GraphQL 作为数据查询和管理的方式，那么 react-graphql-container 这个 npm 包就是一个非常好的选择。这个 npm 包提供了一个 React 组件，可以快速方便地将 GraphQL 查询结果渲染到你的 React 组件中。
什么是 GraphQL
GraphQL 是一种用于 API 的查询语言，是一个前后端通用的 API 解决方案，可以大大简化 API 的设计和维护工作。使用 GraphQL 可以减少请求次数、减少数据传输量，同时还可以提高数据查询的精确度和可定制性。
如何使用 react-graphql-container
要使用 react-graphql-container，你需要先安装它，可以在命令行中使用以下命令：
npm install react-graphql-container --save
安装完成后，你可以在你的项目中引入这个 npm 包，并使用它提供的 React 组件。例如，你可以在你的 React 组件中使用以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ---------------- - ---- --------------------------
----- ----- - -
----- -
----- -
--
----
---
-
-
--
----- --------------- - ------------------------------
----------------
----------------- ------------- ---------------------------
--- ----- -------- ----- -- -- -
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
----
-------------------- -- -
--- --------------
------------ ----------
-----
---
-----
--
--
--------------------
------------------------------
--在上面的代码中，我们使用 GraphQLContainer 组件来获取 GraphQL 查询结果，并将渲染逻辑放在了组件内部。这个组件接受两个参数，query（GraphQL 查询语句）和 endpoint（GraphQL API 的 URL）。当数据加载完成后，GraphQLContainer 组件会将结果传递给它的子组件（即渲染逻辑），你可以在子组件中对数据进行处理和渲染。
示例代码
下面是一个完整的代码示例，这个示例展示了如何使用 react-graphql-container 获取 GraphQL 查询结果并渲染到页面中：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ---------------- - ---- --------------------------
----- ----- - -
----- -
----- -
--
----
---
-
-
--
----- --------------- - ------------------------------
----------------
----------------- ------------- ---------------------------
--- ----- -------- ----- -- -- -
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
----
-------------------- -- -
--- --------------
------------ ----------
-----
---
-----
--
--
--------------------
------------------------------
--总结
如果你想要快速方便地在 React 项目中使用 GraphQL，那么 react-graphql-container 是一个非常好的选择。它提供了一个简单易用的 React 组件，可以帮助你获取 GraphQL 查询结果并渲染到页面中。希望这篇文章能够帮助你理解和使用这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005538e81e8991b448d0be5