@dww/relay-compiler
是一款非常实用的 npm 包,特别适用于前端从事 GraphQL 相关工作。它可以帮助我们在 Relay 环境中更加方便的进行 GraphQL Schema 的编译。本文将介绍如何正确地使用 npm 包 @dww/relay-compiler
,旨在帮助前端开发者学习并掌握这个npm 包的使用方法。
安装
首先,我们需要使用 npm 安装 @dww/relay-compiler
:
--- ------- ------------------- ----------
我们的 schema 也要通过 graphql
包对其进行解析,所以我们也需要把 graphql
包安装:
--- ------- ------- ----------
配置
接下来,让我们在项目的 package.json
文件中新增如下的 scripts
配置项:
- ---------- - -------- --------------- ---------- ----------------------- --------------------- -------- - -
这里我们指定要使用的 --src
路径 和 --schema
GraphQL schema 的文件路径,--language
指定 typescript
作为生成代码的目标语言,--watch
让它可以自动重新编译。
如果你的项目中使用了 TypeScript,那么你还需要在根目录新建 tsconfig.json
文件,内容大致如下:
- ------------------ - ---------------- ----- --------- ------ ------ ----------- ------------------- ------- --------- -------- ------------------------- ----- ------------------------ ---- - -
其中,experimentalDecorators
和 emitDecoratorMetadata
两个属性是为了适配 @relay-runtime
库而加入的。
使用
现在,我们就可以使用 npm run relay
命令来生成 Relay 相关的 TypeScript 类型了。运行命令会检测项目中所有以 .graphql
结尾的文件,并将其编译为 Relay 所用的代码。编译后的文件默认生成在 relay
文件夹中。
例如,我们有一个 GraphQL 查询:
----- -------------------- -------- - ------------- -------- - -- ---- ----------- - -
运行 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