GraphQL 是一种用于 API 的查询语言,与传统的 REST API 相比具有更高的效率和更好的灵活性。在前端领域,GraphQL 在使用中需要使用 JavaScript 库和工具来呈现 UI,包括 “graphql-query-renderer ” 这个 npm 包。
安装与引入
graphql-query-renderer 是一个 npm 包,你可以通过以下命令进行安装:
npm install graphql-query-renderer
然后在你的项目中引入它:
import QueryRenderer from 'graphql-query-renderer' // OR const QueryRenderer = require('graphql-query-renderer')
使用方法
该包提供了一个名为 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