1. 简介
Relay-runtime 是基于 React 的一种 GraphQL 客户端，可以帮助前端开发者更方便地管理 GraphQL 查询请求和响应。本文将详细介绍 npm 包 relay-runtime 的使用教程，包括安装、配置和使用细节。
2. 安装
在使用 relay-runtime 之前，需要安装以下依赖：
- React
- GraphQL
- Babel
在命令行中输入以下命令进行安装：
npm install relay-runtime
3. 配置
在项目中的 Babel 配置文件（.babelrc）中添加以下配置：
-- -------------------- ---- -------
-
---------- -
-
---------------------
-
--------- -------------------------- -- ------ -----
-
-
-
-其中的 schema 文件是 GraphQL 定义类型的一个集合（通常是一个 .graphql 文件）。这个文件描述了可用查询和可用的数据类型。
4. 使用
4.1. 查询
在使用 relay-runtime 的客户端查询之前，需要定义一个查询。一个查询应该被定义为一个类，继承自 Relay 中的 RelayQL class。并且应该有一些需要查询的字段。例如：
-- -------------------- ---- -------
------ ----- ---- ----------------
----- ------------ ------- --------
----- -
------- -
--
----
-----------
-
-
--然后，我们可以使用 createRequest 函数发起查询请求：
const query = new ExampleQuery({});
const request = Relay.createRequest(query, { someVariable: 'value' });其中，第一个参数是查询对象，第二个参数是变量对象。在上述例子中，我们可以使用 ${someVariable} 来代替 value 这个值。
4.2. 渲染查询结果
一旦请求成功，我们可以在 React 组件中使用 Relay 的 createContainer 函数，从查询结果中取得，过滤以及格式化数据。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------------
----- ------- ------- --------------- -
-------- -
----- - ---- - - -----------
-- ------- -
------ -----
-
------ -
-----
----------------------------
---------------------------------
------
--
-
-
------ ------- ------------------------------ -
---------- -
----- -- -- ---------
-------- -- ----- -
------- -
----
-----------
-
--
-
---这里我们使用了 fragment 来选择从查询结果取得的字段及其具体格式。如上面的代码所示，我们只取得了 example 对象中的 name 和 description 两个字段。
5. 总结
通过本文的介绍，我们了解了怎样使用 npm 包 relay-runtime 来进行 GraphQL 的查询请求，并成功得到了相应的数据，也了解了如何将请求结果渲染到 React 组件中来以达到更加可读性的目的。希望这篇文章对在使用 relay-runtime 这个工具时的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69641