在 React 应用程序中使用 Relay 是一种很好的方式来管理数据和状态。Relay 是一个强大的 GraphQL 客户端，它可以帮助你在 React 组件中查询和更新数据。
步骤
- 首先，确保你的项目已经安装了 Relay 相关的依赖。你可以使用 npm 或者 yarn 来安装 Relay：
--- ------- ----------- -------------
或者
---- --- ----------- -------------
- 创建一个 Relay 环境对象。在你的项目中创建一个名为
relay-environment.js的文件，并添加以下内容：
------ - ------------ -------- ------------- ----- - ---- ----------------
-------- --------------------- ---------- -
------ ----------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
------ ---------------
----------
---
---------------- -- -
------ ----------------
---
-
----- ----------- - --- -------------
-------- ---------------------------
------ --- --------- ----------------
---
------ ------- ------------- 在你的根组件中使用
RelayEnvironmentProvider提供 Relay 环境。修改index.js文件如下：
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------------------ - ---- --------------
------ ----------- ---- ----------------------
------ --- ---- --------
----------------
------------------------- --------------------------
---- --
----------------------------
-------------------------------
--- 创建一个 GraphQL 查询。在你的项目中创建一个名为
UserQuery.graphql的文件，并添加以下内容：
----- --------- -
-------- ---- -
--
----
-----
-
-- 在你的组件中使用
useLazyLoadQuery钩子来查询数据。修改你的组件如下：
------ ----- ---- --------
------ - ----------------- ------- - ---- --------------
----- ------------- - -- -- -
----- ---- - -----------------
--------
----- ------------------ -
-------- ---- -
--
----
-----
-
-
-
--
------ -
-----
-------------------------
------------------------
------
--
--
------ ------- --------------现在你已经成功地添加了 Relay 到你的 Create React App 项目中。通过这种方式，你可以更加方便地管理你的数据和状态。