前言
GraphQL 是一种 API 查询语言和服务端运行时环境。它允许客户端指定其需要的数据和格式，以及服务端提供响应数据，帮助前端开发者快速开发 Web 应用程序。而 @graphql-codegen/visitor-plugin-common 这个 npm 包则能够帮助前端开发者更加便捷地编写 GraphQL 的类型和转换处理。
本文将为读者详细介绍该 npm 包的使用教程，并提供示例代码以供参考。
前置条件
在使用 @graphql-codegen/visitor-plugin-common 之前，你需要运行如下命令安装该包以及其依赖包：
npm install --save @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo @graphql-codegen/visitor-plugin-common
使用方法
插件简介
@graphql-codegen/visitor-plugin-common 是上下文访问器的插件，可以为 GraphQL 文档中每个访问器提供一个公共的上下文实现。它为所有的访问器提供访问器上下文，从而您可以更加容易地编写自定义的访问器。
功能特性
- 在所有访问器中提供公共的上下文实现
- 轻松编写自定义访问器
示例代码
首先，您需要在项目中创建一个配置文件 codegen.yml：
-- -------------------- ---- -------
---------- ----
------- -----------------------------
---------- ------------------
----------
--------------------------
--------
- ------------
- -----------------------
- -------------------------
- -----------------------
-------
--------------------
----------- -------------------------然后在 src 文件夹下创建 visitor.ts 文件，编写自定义的访问器：
-- -------------------- ---- -------
------ -
--------------------
--------------------------
- ---- -----------------------------------------
------ - ---------------------- - ---- ----------
------ ----- ------------------- - -
------- --------------------------
-- ------------------------------- -- --
------------------- ------ ----------------------- -- -
------ -
------------------
----------------
---------------------
-----------------
----------------
---------------------
------------------------
------------- ----------------
--
--
---在 codegen.yml 的 plugins 数组中添加 visitor-plugin-common 插件，然后将自定义的访问器引入到 config 字段中：
-- -------------------- ---- -------
----------
--------------------------
--------
- ------------
- -----------------------
- -------------------------
- -----------------------
-------
--------------------
----------- -------------------------
------------
- ------------------- - --------运行如下命令：
npx graphql-codegen --config codegen.yml
则可生成如下代码：
-- -------------------- ---- -------
---
- ---- ---- -- --------- --------------
- -- --- ------ -- ---------
--
-- -------------- --
------ -
---------------------
-----------------
--------------------------
------------------
------------------------
-------------------------
----------------------------
------------------------
---------------------------
-----------------------
----------------------
-----------------------------
- ---- ----------
------ -
------
---------------
---------
------------------
- ---- ---------------
------ - -- ----- ---- ---------------------------
------ - ------- ------------- - ---- --------------
------ - ----------------- -- ------------ - ---- ------------------------------------
------ --------- ------------------------- -
---
- ---- --- --- -------- ------------- ----- -- -------- -------
--
------------------ --------
---
- ------ --- --- ------- ------- -- ----
--
-------- -------
---
- --- --- ------ -------
--
----- -------
---
- ---- -------- ---- -- ---- ----- --- ------ -- ----- ------- -----
--
--------- -------------- --------
---
- ---- -- -- ------------- ---- ---- -- ------- --- -----
--
---------- -------
---
- --- -- ------ ------ --- --- ------ --------- ------ ------- --------- -- -------
--
-------------- ------- - -------
-
------ ------- --------- ------------------- -
------ ---- ------------ -
- ------------------
- -----------------
- -----------------
------ ---- --------------- - ------
------ ---- ------------------
--------- ------- ------ - -------
----- ------- ---------------- - ----------------
- - -
-------- ---------- ------
- - -
-------- ----- -- ----------- ------
--
------ ---- --------------------- ------- ------ - ------- ----- ------- ---------------- - ----------------- - -
----- ----------------- - ----------------------- - -------------------------- - ---------------------- - --------------------- - ----------------------- - ---------------------------- - ------------------------ - --------------------------- - --------------------------
- -- ------------------------- --------
------ ---- -------------------
--------- ------- ------ - -------
----- ------- ---------------- - ----------------
- - ------------------------- --------
------ --------- ------------------------- -
-------- -------- -------------- -------------------------
-------- ------ -------------- -------------------------
-------- ----------- -------------- ----------------------------
-------- ------- -------------- ------------------------
-------- ------ -------------- -----------------------
-------- ----------- -------------- ------------------------------
-------- -------------- -------------- -------------------------
-
------ ---- ----------------------- ------- ------ - ------- ----- ------- ---------------- - ----------------- - -
------- --------------------------
- -- -
------------- -------- ---------------------- -------
--
-可以看到，代码中已经根据自定义访问器生成了 FragmentTypeVisitor 相关类型，以方便在业务代码中使用。
小结
通过本文的介绍，读者可以了解到如何使用 @graphql-codegen/visitor-plugin-common 帮助前端开发者更加便捷地编写 GraphQL 的类型和转换处理。当然，该插件除了提供便捷的实现方式以外，还有很多功能特性，读者可以深入了解并灵活运用该插件，以更好地提升项目开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/graphql-codegen-visitor-plugin-common