前言
GraphQL 在 Web 开发中得到越来越广泛的应用，而且随着 GraphQL API 数量的增加，我们不得不考虑代码生成（Code Generation）的问题。虽然 Code Generation 形式多样，但是我们可以使用 @graphql-codegen 包来自动生成一些 GraphQL 相关的代码。
@graphql-codegen/plugin-helpers 包则提供了一组工具函数，让我们方便地编写自定义的 GraphQL 生成器。
安装
我们可以使用 npm 或者 yarn 来安装 @graphql-codegen/plugin-helpers 包：
npm install @graphql-codegen/plugin-helpers # or yarn add @graphql-codegen/plugin-helpers
使用
在编写自定义的生成器时，我们可以使用 @graphql-codegen/plugin-helpers 提供的函数来获取必要的信息。
parseImportLine
从 import 语句中解析出导入的模块名称以及默认导出的名称。
import { parseImportLine } from '@graphql-codegen/plugin-helpers';
const { moduleName, exportName } = parseImportLine(`import myModule from 'my-module';`);
console.log(moduleName); // my-module
console.log(exportName); // myModulestripMapperTypeInterpolation
将映射类型中的插值和空格去掉。
import { stripMapperTypeInterpolation } from '@graphql-codegen/plugin-helpers';
const str = '{ [key: string]: Date }';
const result = stripMapperTypeInterpolation(str); // { [key: string]: Date }getBaseTypeNode
获取 GraphQL 类型的基本类型节点。
-- -------------------- ---- ------- ------ - --------------- - ---- ---------------------------------- ------ - ------ ------------- - ---- ---------- ----- ------ - --- --------------- ------ ---------- --------- ---------- --- -- ----- --- ------- -------- --- ----- -------- - --------------------------------- ----- ------ - ------------------------- -------- ------------------------- -- --------- ------------------------------- -- -- ------------------------- -- ----
convertNameParts
根据配置文件中的命名规则转换名称。
-- -------------------- ---- ------- ------ - ---------------- - ---- ---------------------------------- -- ------- ----- ------ - ------------------------- ------ -------------- -------------- -------------------- -- ------- -- ------ ----- ------ - ------------------------- ------ -------------- ------------- -------------------- -- ------
groupTypes
根据给定的配置文件将类型分组。
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------------------------- ----- ----- - -------- ------- -------- ------------ ----- ------ - - ----- -------- ----- -------- ------ ---------- --------- ------------ -- ----- ------ - ----------------- -------- -------------------- -- - -------- - ------- -- ---------- - ---------- -- ------ - ------- ------ - - --
例子
下面是一个使用 @graphql-codegen/plugin-helpers 的例子，它使用 graphql-codegen-core 中提供的 Config 的信息来生成查询操作。
-- -------------------- ---- -------
------ - ------ -------------- - ---- ----------------------------------
------ - ----------------- - ---- ----------------------------------------
------ --------- -------------- -
---------------------- -------
-
---
- -- ------ ---------
--
------ ----- --------- ------------------------------ - -------- ---------- ------- -- -
----- ------- - -------- - --- - ---- -------------------
----- -------- -------- - ---
-- -- --------------------- ---- ------- --
----- ----------- - --------------------------------------
-- - ----------- ------------
--------------------------------------- -- -
----- ---- - ---------------------
-- ----- -- ------------------ --- ----------------------- -
----- ----- - ---------------------------- -- ------------ --- ----------
-- ------- -
-------------
------------------------------------------------- -- ------------------- ---------------------------- ---- -
-------------
--
--
-
-
---
-- -- ----------------- ---------------------
----- -------- - --- -------------------
------ ----- --------- - -
----------------------
----
------ -
-------- --------
-------- ------------------
--
--
-- ----------- -------------- ---
------ ----- ------------- -------------------------------------- - -
------- ---
---------- ---
------- ---------
------- ---
--这是如何在 package.json 中配置的样例：
-- -------------------- ---- -------
-
------- -------------
---------- -
----------- -----------------
--
--------------- -
----------------------- ----------
---------------------------------- ----------
------------------------------ ----------
---------------------------------------- ----------
---------------- ---------
---------- ----------
------------- ---------
--
------------------ -
------------ -----
--------- -------------------
------------ ----------------------------
------------ -
--------------------------- -
---------- -
-
------------- --
--
-
------------ -
------------------------ -----------------------
-
-
-
-
-
-
-这是 schema.ts 文件的样例：
-- -------------------- ---- ------- ------ --------- ---- - --- ------- --------- ------- - ------ --------- ---- - --- ------- ------ ------- -------- ------- - ------ --------- ----- - --------- -------- ----- --------------- -------- ----- -------- -------- ----- -
结论
@graphql-codegen/plugin-helpers 是一个实用的 npm 包，它封装了一些常用的工具函数，让我们能够更加方便的编写自定义的 GraphQL 生成器。本文介绍了该包的基本使用方式，并提供了一个例子来说明如何使用该包来实现具体的生成器。在任何写代码中，选择性、方便和能力都非常重要，所以使用 @graphql-codegen/plugin-helpers 的能力，将为您的前端开发工作增加灵活性和低调的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/148470