介绍
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 项目，可以使用以下命令：
npx create-react-app my-app cd my-app
2. 安装 Relay 和 @binarymuse/relay-compiler
然后，在项目文件夹下，执行以下命令，安装 Relay 和 @binarymuse/relay-compiler：
yarn add relay-runtime react-relay yarn add -D @binarymuse/relay-compiler
3. 生成 Relay 编译器插件
在项目文件夹下，创建一个 relay-compiler.js 文件，内容如下：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------------- - ----------------------------------------------- ----- ---------- - ----------------------- -------------------- -- ---- ------------------- ----- ------- - ----------------------- --------- --------------- ------- ----------- ---- -------- --------- ------------- ----------- ------ ------- ---
其中，schemaPath 是 GraphQL 的 schema 文件，srcPath 是源代码文件夹路径。可以根据实际情况进行修改。最后，需要在 package.json 中定义一个脚本，用于生成 Relay 编译器插件，如下：
{
"scripts": {
"relay": "node relay-compiler.js"
}
}在项目文件夹下执行以下命令，即可生成编译器：
yarn relay
4. 定义 GraphQL 查询
在 src 文件夹下，创建一个 query.graphql 文件，定义 GraphQL 查询。例如：
query AppQuery {
todos {
id
title
completed
}
}5. 编写 React 组件
在 src 文件夹下，创建一个 App.tsx 文件，编写 React 组件，如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ---------------------------
------ - ---------------- - ---- --------------------
---- ----- - ---
----- ---- --------------- - -- -- -
----- ---- - ---------------------------
--------
----- -------- -
----- -
--
-----
---------
-
-
--
--
--
------ -
-----
-------------------- -- -
---- --------------
---------------------
------------------ - ----- - ----------
------
---
------
--
--
------ ------- ----其中，AppQuery 是通过 yarn relay 自动生成的类型定义。需要对 TypeScript 进行配置，否则会报错。
在 tsconfig.json 中，添加以下配置：
{
"compilerOptions": {
"plugins": [
["babel-plugin-relay"]
]
}
}6. 运行项目
在命令行中执行以下命令：
yarn start
打开浏览器，访问 http://localhost:3000，即可看到从 GraphQL 查询返回的数据。
总结
@binarymuse/relay-compiler 是一个非常方便的 npm 包，使用它可以使得 React+Relay 的开发变得更加简单和高效。本教程介绍了如何使用该 npm 包进行开发，并附有详细的示例代码。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a481e8991b448dfdee