简介
forked-relay-runtime 是一个开源的 npm 包，它提供了对于 React 的 Relay 框架的支持。它是在 relay-runtime 的基础上进行的修改和扩展，可以帮助开发者更加高效地开发 Relay 应用。
在本篇文章中，我们将会介绍如何使用 forked-relay-runtime 这个 npm 包，包括如何安装、初始化、进行查询以及渲染结果等。
安装
首先，你需要安装 forked-relay-runtime 的 npm 包。你可以通过 npm 安装这个包：
npm install forked-relay-runtime
或者使用 yarn 安装：
yarn add forked-relay-runtime
初始化
在开始使用 forked-relay-runtime 之前，我们需要先进行一些初始化的操作。我们需要创建一个 Relay 环境变量。这个环境变量定义了我们的应用程序与 GraphQL 服务器之间的连接。具体来说，它需要 following properties：
network: 一个方法，它定义了在查询 GraphQL 可交互式节点时要使用的网络传输方法。store: 一个可选值，它定义了 Relay 缓存数据的存储位置。它可以是一个简单的 JavaScript 对象或一个支持特定的缓存数据存储方式的存储对象。
以下是创建环境变量的代码示例：
-- -------------------- ---- -------
------ - ------------ -------- ------------- ----- - ---- ----------------
-------- -----------
----------
----------
- -
-- ------- ------- --- - --- --
------ -------------------------------- -
------- -------
-------- -
-- ------
--------------- -------------------
--
----- ----------------
------ --------------- -- ------ ------- ----
---------- -- ------
---
---------------- -- -
------ ----------------
---
-
----- ----------- - --- -------------
-------- ---------------------------
------ --- --------- ----------------
---在上面的代码中，我们定义了一个名为 fetchQuery 的函数，它将作为我们在配置对象中传递给 Network 的函数，并在 Relay 请求 GraphQL API 时被调用。在这里，我们使用了 fetch 方法来获取我们的查询结果。然后我们使用 RecordSource 和 Store 构建了一个 Relay 状态，使 Relay 可以跟踪 State 的变化。
查询
Relay 框架基于 GraphQL 查询语言，并涉及了一些特定于 Relay 的扩展，如 "fragments" 和 "mutations"。如果你不熟悉这些概念，你可以进行一些阅读之后再继续阅读这篇文章。
以下是一个示例 GraphQL 查询：
query MyQuery {
viewer {
id
email
firstName
lastName
}
}有了这个查询，我们可以发现 viewer 字段定义了一个特殊的对象，它代表了我们应用程序的当前用户。在一个实际的应用中，这个对象可能包含多个字段和嵌套对象，并且可能包含对其他数据类型的引用。
我们可以通过 Relay 使用以下方法执行这个查询：
-- -------------------- ---- -------
------ ------- ---- ---------------------------
----- ----- - --------
----- ------- -
------ -
--
-----
---------
--------
-
-
--
-----------
----------
---------- ------
--
------------
-------- ---- -- -- -
------------------
--
--------在这个例子中，我们首先使用 graphql 模板字符串 API 来定义我们要查询的查询语句。然后，我们使用刚刚创建的 environment 去执行查询，并在 Promise 中接收查询的结果。最后，我们在 Promise 中调用 console.log 来输出查询结果。
渲染
渲染和查询过程紧密相连，它们工作的方式非常类似。在这个例子中，我们可以将查询结果渲染为 React 组件。
以下是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------------ ------- - ---- -----------------------
-------- ------------- ------ -- -
------ -
--
---------------------- ----------------------
--------- ------------------
---
--
-
------ ------- ------------------------------------ -
------- --------
-------- ------------------ -- ---- -
--
-----
---------
--------
-
--
---在这个例子中，我们首先定义了一个 React 组件，使用查询结果的属性作为其 props，在这里它是 viewer。在组件中，我们可以轻松地访问属性，然后根据需要在页面中呈现它们。
然后，我们使用 createFragmentContainer 函数将组件包装起来。这个函数将 viewer 对象作为 props 传递到我们的组件中，并指定了我们使用的查询的格式。
结论
以上是 forked-relay-runtime npm 包的使用教程。在本文中，我们介绍了如何安装、初始化、查询以及渲染结果。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aba81e8991b448d854f