介绍
Relay 是一个 Facebook 开源的 JavaScript 框架，用于搭建复杂的 React 应用。其中，Relay Compiler 可以将 GraphQL 查询转换为可执行的 JavaScript 代码，在 GraphQL 和 JavaScript 之间建立了桥梁，使得前端开发更加高效便捷。而 @binarymuse/relay-compiler 是由 Ryan Florence 开发的一个 npm 包，能够进一步简化开发过程。本文将介绍如何使用该 npm 包进行 React+Relay 的开发。
准备工作
在使用该 npm 包之前，需要安装以下工具：
- Node.js
- yarn（或 npm）
- GraphQL
步骤
1. 创建项目
首先，需要创建一个 React 项目，可以使用以下命令：
--- ---------------- ------ -- ------
2. 安装 Relay 和 @binarymuse/relay-compiler
然后，在项目文件夹下，执行以下命令，安装 Relay 和 @binarymuse/relay-compiler：
---- --- ------------- ----------- ---- --- -- --------------------------
3. 生成 Relay 编译器插件
在项目文件夹下，创建一个 relay-compiler.js 文件，内容如下：
----- ---- - ---------------- ----- ------------- - ----------------------------------------------- ----- ---------- - ----------------------- -------------------- -- ---- ------------------- ----- ------- - ----------------------- --------- --------------- ------- ----------- ---- -------- --------- ------------- ----------- ------ ------- ---
其中，schemaPath 是 GraphQL 的 schema 文件，srcPath 是源代码文件夹路径。可以根据实际情况进行修改。最后，需要在 package.json 中定义一个脚本，用于生成 Relay 编译器插件，如下：
-
---------- -
-------- ----- ------------------
-
-在项目文件夹下执行以下命令，即可生成编译器：
---- -----
4. 定义 GraphQL 查询
在 src 文件夹下，创建一个 query.graphql 文件，定义 GraphQL 查询。例如：
----- -------- -
----- -
--
-----
---------
-
-5. 编写 React 组件
在 src 文件夹下，创建一个 App.tsx 文件，编写 React 组件，如下：
------ ----- ---- --------
------ ------- ---- ---------------------------
------ - ---------------- - ---- --------------------
---- ----- - ---
----- ---- --------------- - -- -- -
----- ---- - ---------------------------
--------
----- -------- -
----- -
--
-----
---------
-
-
--
--
--
------ -
-----
-------------------- -- -
---- --------------
---------------------
------------------ - ----- - ----------
------
---
------
--
--
------ ------- ----其中，AppQuery 是通过 yarn relay 自动生成的类型定义。需要对 TypeScript 进行配置，否则会报错。
在 tsconfig.json 中，添加以下配置：
-
------------------ -
---------- -
----------------------
-
-
-6. 运行项目
在命令行中执行以下命令：
---- -----
打开浏览器，访问 http://localhost:3000，即可看到从 GraphQL 查询返回的数据。
总结
@binarymuse/relay-compiler 是一个非常方便的 npm 包，使用它可以使得 React+Relay 的开发变得更加简单和高效。本教程介绍了如何使用该 npm 包进行开发，并附有详细的示例代码。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562a481e8991b448dfdee