简介
Relay Modern 是一个基于 GraphQL 的 JavaScript 框架，它可以帮助开发者构建高效、类型安全的 React 应用程序。相比于 Relay Classic，Relay Modern 更加简单易用，同时也提供了更好的性能和可维护性。
在本篇文章中，我们将会介绍如何使用 Relay Modern 来构建 React 应用程序，并提供一些示例代码和指导意义，帮助你更好的了解该框架。
前置条件
在开始学习 Relay Modern 之前，你需要对以下技术有一定的了解：
- React
- GraphQL
如果你对以上技术还不熟悉，可以先学习相关内容。
安装 Relay
要开始使用 Relay Modern，你需要先安装相关的依赖。
首先，你需要安装 Relay Modern 的核心依赖：
npm install --save relay-runtime
接着，你需要选择一个网络层库，这里我们选择 relay-network-modern.
npm install --save relay-network-modern
最后，在你的应用程序中创建一个 Relay 环境：
-- -------------------- ---- -------
------ - ------------ -------- ------------- ----- - ---- ----------------
------ -
------------------
--------------
---------------
- ---- -----------------------
------ ---- ---- --------- -- ----
----- ------ - --- ---------------
----- ----- - --- --------------
----- ------- - --- -------------------
---------------
---- ----------- -- ------- -----
---
----------------
------ ---------------- -- -- -----
------- --------- -- ----
---
---
----- ----------- - --- -------------
--------
------
---
------ ------- ------------创建 GraphQL Schema
接下来，你需要在你的应用程序中创建一个 GraphQL Schema，用于定义你的数据模型和查询语言。
在这里，我们将使用 graphql-tools 库来创建 Schema。你可以自行选择其他方式。
-- -------------------- ---- -------
------ - -------------------- - ---- ----------------
----- -------- - -
---- ---- -
--- ---
----- -------
------ -------
-
---- ----- -
-------- ----- ----
-
--
----- --------- - -
------ -
----- ----- --- - -- -- -- -
-- ------------ ---- -----
------ -
---
----- --------
------ --------------------
--
--
--
--
----- ------ - ----------------------
---------
----------
---
------ ------- -------创建 Relay 组件
一旦你设置好了 Relay 环境和 GraphQL Schema，你就可以开始创建 Relay 组件了。
在这里，我们将创建一个简单的 UserComponent，该组件将从 GraphQL 服务端获取一个用户对象，并显示该用户的名称和电子邮件地址。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------------ ------- - ---- --------------
----- ------------- - -- ---- -- -- -
------ -
-----
--------------------
-------------------
------
--
--
------ ------- -------------------------------------- -
----- --------
-------- ------------------ -- ---- -
--
----
-----
-
--
---定义查询语句
在 Relay 中，数据查询是通过 GraphQL 的查询语句来定义的。在这里，我们将创建一个包含 UserComponent 的查询语句。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ ----- --------- - --------
----- -------------- ---- -
-------- ---- -
---------------------
-
-
--在组件中使用查询
现在，你可以使用上述定义的 UserQuery 来获取用户对象，并将其传递给 UserComponent。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- --------------
------ ----------- ---- ----------------
------ - --------- - ---- ------------
------ ------------- ---- ------------------
----- -------- - -- -- -- -- -
------ -
--------------
-------------------------
-----------------
------------ -- --
---------- ------ ----- -- -- -
-- ------- -
------ ------------------
-
-- -------- -
------ ----------------------
-
------ -------------- ----------------- ---
--
--
--
--
------ ------- ---------总结
通过上面的步骤，我们已经成功地创建了一个使用 Relay Modern 的 React 应用程序。在这里，我们介绍了 Relay Modern 的基本概念和用法，并演示了如何创建 Relay 组件和定义查询语言。
值得注意的是，本文只是对 Relay Modern 的简单介绍，如果你想深入了解该框架，还需要参考官方文档和其他相关资源。
希望本文对你有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64741a64968c7c53b0189841