@dww/relay-compiler 是一款非常实用的 npm 包，特别适用于前端从事 GraphQL 相关工作。它可以帮助我们在 Relay 环境中更加方便的进行 GraphQL Schema 的编译。本文将介绍如何正确地使用 npm 包 @dww/relay-compiler，旨在帮助前端开发者学习并掌握这个npm 包的使用方法。
安装
首先，我们需要使用 npm 安装 @dww/relay-compiler：
npm install @dww/relay-compiler --save-dev
我们的 schema 也要通过 graphql 包对其进行解析，所以我们也需要把 graphql 包安装：
npm install graphql --save-dev
配置
接下来，让我们在项目的 package.json 文件中新增如下的 scripts 配置项：
{
"scripts": {
"relay": "relay-compiler --src=src/ --schema=schema.graphql --language=typescript --watch"
}
}这里我们指定要使用的 --src 路径 和 --schema GraphQL schema 的文件路径，--language 指定 typescript 作为生成代码的目标语言，--watch 让它可以自动重新编译。
如果你的项目中使用了 TypeScript，那么你还需要在根目录新建 tsconfig.json 文件，内容大致如下：
-- -------------------- ---- -------
-
------------------ -
---------------- -----
--------- ------
------ -----------
------------------- -------
--------- --------
------------------------- -----
------------------------ ----
-
-其中，experimentalDecorators 和 emitDecoratorMetadata 两个属性是为了适配 @relay-runtime 库而加入的。
使用
现在，我们就可以使用 npm run relay 命令来生成 Relay 相关的 TypeScript 类型了。运行命令会检测项目中所有以 .graphql 结尾的文件，并将其编译为 Relay 所用的代码。编译后的文件默认生成在 relay 文件夹中。
例如，我们有一个 GraphQL 查询：
query SampleQuery($filter: String!) {
search(query: $filter) {
id
name
description
}
}运行 npm run relay 命令后，会根据 schema 文件生成一个类型为 SampleQuery 的 TypeScript 类。如果我们的 schema 文件中有定义类似 search 这样的字段，则它们也会自动被转为变量。
-- -------------------- ---- -------
-- -------------- --
-- -------------- --
-- ----------
-- ---- ---- --- ------------- --------- --- ------ --- -- -------
------ - ----------- - ---- ------------------
------ - ----------------- - ---- ----------------
------ ---- -------------------- - -
------- -------
--
------ ---- ------------------- - -
-------- ------- ---------------
-------- --- -------
-------- ----- ------ - -----
-------- ------------ ------ - -----
---
--
------ ---- ----------- - -
-------- --------- --------------------
-------- ---------- ---------------------
--
--
----- ------------
-------- -------
- -
------------- -------- -
--
----
-----------
-
-
--
----- -------- - ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------ ------- ---------
------ ----- ------------------- - ----------------------聪明的你一定能看懂这个文件的意思，这是使用 @dww/relay-compiler 自动生成的 TypeScript 模板代码。
总结
@dww/relay-compiler 的使用看上去很简单，但它可以大大提高前端开发人员的 GraphQL 开发效率，使我们可以更方便地编写查询和变异，而无需在编写代码时担心与 schema 不兼容。希望这篇文章可以帮助您快速学习并掌握如何使用这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d381e8991b448e020b