在 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 项目中。通过这种方式,你可以更加方便地管理你的数据和状态。