前言
在 React 开发中，使用 GraphQL 查询方式可以方便地获取需要的数据，但是 GraphQL 查询很难在前端中读取。为了解决这个问题，Facebook 推出了一个叫做 Relay 的框架。
Relay 是一个基于 React 的现代化 JavaScript 框架，它可以管理数据的获取和存储，使得应用能够更快更强大。但是，集成 Relay 的过程中需要编写复杂的配置文件，这可能会影响开发的速度和效率。所以，Facebook 推出了一个叫做 relay-compiler 的 npm 包来自动生成 Relay 的配置。
在本文中，我们将介绍如何使用 relay-compiler 这个 npm 包。
环境搭建
首先，我们需要在项目目录中创建一个名为 schema.graphql 的文件，这个文件中会定义我们的 GraphQL schema。在步骤中，我们将会根据这个 schema 自动生成代码。
然后，在 package.json 文件中添加以下依赖：
"devDependencies": {
"babel-plugin-relay": "^11.0.0",
"relay-compiler": "^11.0.0"
}其中，babel-plugin-relay 和 relay-compiler 这两个依赖是我们接下来需要使用的。
配置
在 package.json 文件中添加编译命令：
"scripts": {
"relay": "relay-compiler --src './src' --schema './schema.graphql'"
}这里的 --src 表示输入文件的路径，--schema 表示 schema 文件的路径。我们可以根据自己的需要进行修改。
然后，在根目录中创建一个名为 .babelrc 的文件，输入以下代码：
-- -------------------- ---- -------
-
---------- -
--------
-----
--
---------- -
-------
-
-这里的 "relay" 插件会把 GraphQL 查询编译成 Relay 所需要的语法，使得我们可以在前端中使用 Compone、Mutation、Fragment 等 Relay 的概念。
最后，在根目录中创建一个名为 .env 的文件，输入以下代码：
NODE_ENV=development
这里的 NODE_ENV 设置为 development，表示我们在开发模式下使用 relay-compiler。
示例代码
接下来，我们将通过一个示例代码来演示如何使用 relay-compiler。
首先，在 schema.graphql 文件中定义 GraphQL schema：
-- -------------------- ---- ------- ---- ---- - --- --- ------ ------- -------- ------- - ---- ----- - -------- ----- ---- - ---- -------- - ----------------- -------- -------- --------- ---- -------------- ---- ------ ------- -------- -------- ---- -------------- ----- ------- -
然后，在 src 文件夹下创建一个名为 App.js 的文件，输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ------- - ---- --------------
------ ----------- ---- ----------------
----- --- - -- -- -
--------------
-------------------------
---------------
----- -------- -
-------- ---- -
-----
-------
-
-
--
---------- ------ ----- -- -- -
-- ------- -
------ ---------------------------
-
-- -------- -
------ ----------------------
-
------ -
--
---------------------------
---------------------------
---
-
--
--
--
------ ------- ----这个组件会调用一个 GraphQL 查询，查询名为 AppQuery，查询文本为：
query AppQuery {
post(id: "1") {
title
content
}
}接着，在运行编译命令前，我们还需要创建一个名为 environment.js 的文件，输入以下代码：
-- -------------------- ---- -------
------ - ------------ -------- ------------- ----- - ---- ----------------
-------- --------------------- ---------- -
------ -------------------------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
------ ---------------
----------
---
---------------- -- -----------------
-
----- ----------- - --- -------------
-------- ---------------------------
------ --- --------- ----------------
---
------ ------- ------------这个文件创建了一个 Relay 环境，配置了查询时从后端服务器获取 GraphQL 数据。
最后，我们运行以下命令：
npm run relay
接着，relay-compiler 就会根据我们在 src 文件夹中编写的 GraphQL 查询，生成与查询相关的 Relay 组件、查询定义等必要的代码。这些代码会放到 src/generated 文件夹中，我们可以直接使用它们。
现在，我们就可以在 App.js 文件中使用生成的代码了，把查询文本从 GraphQL 字符串转换为 Relay 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- --------------
------ - -------- - ---- -----------------------------------
------ ----------- ---- ----------------
----- --- - -- -- -
--------------
-------------------------
----------------
------------
--- ----
--
---------- ------ ----- -- -- -
-- ------- -
------ ---------------------------
-
-- -------- -
------ ----------------------
-
------ -
--
---------------------------
---------------------------
---
-
--
--
--
------ ------- ----接下来，我们可以通过修改环境变量 NODE_ENV 或者在 package.json 中的配置文件中更新相关命令，让代码的生成更加自动化。
结束语
通过使用 npm 包 relay-compiler，我们可以自动生成大量代码，省去了手写一大堆配置文件的烦恼，从而提高了开发效率。它可以更好地帮助前端开发人员集中精力于业务需求的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69639