npm 包 @graphql-codegen/visitor-plugin-common 使用教程

前言

GraphQL 是一种 API 查询语言和服务端运行时环境。它允许客户端指定其需要的数据和格式，以及服务端提供响应数据，帮助前端开发者快速开发 Web 应用程序。而 @graphql-codegen/visitor-plugin-common 这个 npm 包则能够帮助前端开发者更加便捷地编写 GraphQL 的类型和转换处理。

本文将为读者详细介绍该 npm 包的使用教程，并提供示例代码以供参考。

前置条件

在使用 @graphql-codegen/visitor-plugin-common 之前，你需要运行如下命令安装该包以及其依赖包：

--- ------- ------ -------------------- --------------------------- -------------------------------------- ---------------------------------------- --------------------------------------

使用方法

插件简介

@graphql-codegen/visitor-plugin-common 是上下文访问器的插件，可以为 GraphQL 文档中每个访问器提供一个公共的上下文实现。它为所有的访问器提供访问器上下文，从而您可以更加容易地编写自定义的访问器。

功能特性

  • 在所有访问器中提供公共的上下文实现
  • 轻松编写自定义访问器

示例代码

首先，您需要在项目中创建一个配置文件 codegen.yml：

---------- ----
------- -----------------------------
---------- ------------------
----------
  --------------------------
    --------
      - ------------
      - -----------------------
      - -------------------------
      - -----------------------
-------
  --------------------
    ----------- -------------------------

然后在 src 文件夹下创建 visitor.ts 文件，编写自定义的访问器：

------ -
  --------------------
  --------------------------
- ---- -----------------------------------------
------ - ---------------------- - ---- ----------

------ ----- ------------------- - -
  ------- --------------------------
-- ------------------------------- -- --
  ------------------- ------ ----------------------- -- -
    ------ -
      ------------------
      ----------------
      ---------------------
      -----------------
      ----------------
      ---------------------
      ------------------------
      ------------- ----------------
    --
  --
---

在 codegen.yml 的 plugins 数组中添加 visitor-plugin-common 插件，然后将自定义的访问器引入到 config 字段中：

----------
  --------------------------
    --------
      - ------------
      - -----------------------
      - -------------------------
      - -----------------------
-------
  --------------------
    ----------- -------------------------
    ------------ 
      - ------------------- - --------

运行如下命令：

--- --------------- -------- -----------

则可生成如下代码：

---
 - ---- ---- -- --------- --------------
 - -- --- ------ -- ---------
 --

-- -------------- --
------ -
  ---------------------
  -----------------
  --------------------------
  ------------------
  ------------------------
  -------------------------
  ----------------------------
  ------------------------
  ---------------------------
  -----------------------
  ----------------------
  -----------------------------
- ---- ----------
------ -
  ------
  ---------------
  ---------
  ------------------
- ---- ---------------
------ - -- ----- ---- ---------------------------
------ - ------- ------------- - ---- --------------
------ - ----------------- -- ------------ - ---- ------------------------------------

------ --------- ------------------------- -
  ---
   - ---- --- --- -------- ------------- ----- -- -------- -------
   --
  ------------------ --------
  ---
   - ------ --- --- ------- ------- -- ----
   --
  -------- -------
  ---
   - --- --- ------ -------
   --
  ----- -------
  ---
   - ---- -------- ---- -- ---- ----- --- ------ -- ----- ------- -----
   --
  --------- -------------- --------
  ---
   - ---- -- -- ------------- ---- ---- -- ------- --- -----
   --
  ---------- -------
  ---
   - --- -- ------ ------ --- --- ------ --------- ------ ------- --------- -- -------
   --
  -------------- ------- - -------
-

------ ------- --------- ------------------- -
  ------ ---- ------------ -
    - ------------------
    - -----------------
    - -----------------
  ------ ---- --------------- - ------
  ------ ---- ------------------
    --------- ------- ------ - -------
    ----- ------- ---------------- - ----------------
  - - -
    -------- ---------- ------
  - - -
    -------- ----- -- ----------- ------
  --
  ------ ---- --------------------- ------- ------ - ------- ----- ------- ---------------- - ----------------- - -
    ----- ----------------- - ----------------------- - -------------------------- - ---------------------- - --------------------- - ----------------------- - ---------------------------- - ------------------------ - --------------------------- - --------------------------
  - -- ------------------------- --------
  ------ ---- -------------------
    --------- ------- ------ - -------
    ----- ------- ---------------- - ----------------
  - - ------------------------- --------

  ------ --------- ------------------------- -
    -------- -------- -------------- -------------------------
    -------- ------ -------------- -------------------------
    -------- ----------- -------------- ----------------------------
    -------- ------- -------------- ------------------------
    -------- ------ -------------- -----------------------
    -------- ----------- -------------- ------------------------------
    -------- -------------- -------------- -------------------------
  -

  ------ ---- ----------------------- ------- ------ - ------- ----- ------- ---------------- - ----------------- - -
    ------- --------------------------
  - -- -
    ------------- -------- ---------------------- -------
  --
-

可以看到，代码中已经根据自定义访问器生成了 FragmentTypeVisitor 相关类型，以方便在业务代码中使用。

小结

通过本文的介绍，读者可以了解到如何使用 @graphql-codegen/visitor-plugin-common 帮助前端开发者更加便捷地编写 GraphQL 的类型和转换处理。当然，该插件除了提供便捷的实现方式以外，还有很多功能特性，读者可以深入了解并灵活运用该插件，以更好地提升项目开发效率。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/graphql-codegen-visitor-plugin-common

阅读全文

猜你喜欢

  • npm 包 pkijs 使用教程

    什么是 pkijs？ pkijs 是一个用于操作公钥基础结构（PKI）标准的 JavaScript 库。PKI 是一种用于证实数字身份和安全通信的系统，依赖于公钥加密和签名。

    4 年前
  • npm 包 asn1-test-suite 使用教程

    在前端开发中，经常使用各种 npm 包来完成自己的业务逻辑和功能实现。其中，asn1-test-suite 就是一种常用的 npm 包，它提供了一些测试 asn1 编解码的工具和方法。

    4 年前
  • npm包pvutils使用教程

    简介 npm是Node Package Manager，用来管理前端的第三方包。pvutils是其中一个npm包，是一组工具库，主要用于从ASN.1编码中解析和序列化公钥，加密和签名消息，并执行其他一...

    4 年前
  • npm 包 safe-compare 使用教程

    在前端开发中，我们经常需要比较两个字符串是否相等。但是，由于 JavaScript 中的字符串比较操作并不总是安全的，因此我们需要一个可靠的字符串比较工具。这时候，npm 包 safe-compare...

    4 年前
  • npm 包 basicauth-middleware 使用教程

    简介 basicauth-middleware 是一个 Node.js 中间件，用于实现基本认证授权（Basic Authentication）。通过该中间件，我们可以在 HTTP 请求头中添加基本认...

    4 年前
  • npm 包 @datastructures-js/priority-queue 使用教程

    在前端开发中，数据结构是一项非常重要的技术，因为合适的数据结构可以大大提高代码效率和可读性。而在数据结构中，优先队列是一种重要的类型。npm 上的 @datastructures-js/priorit...

    4 年前
  • npm 包 @alexbosworth/request 使用教程

    概述 在现代 web 开发中，前端交互性十分重要。其中一个重要的组成部分就是前端与后端的数据交互。通常，前端要获取或更新数据需要向后端发送 http 请求。而 @alexbosworth/reques...

    4 年前
  • npm 包 node-lmdb 使用教程

    介绍 node-lmdb 是一个用于 Node.js 的 LMDB 包装器，LMDB 是一种高效、可靠、事务性的内存映射数据库。该程序库使用了 Node.js 的异步框架，并提供了完整的 LMDB 功...

    4 年前
  • npm 包 bolt09 使用教程

    在前端开发中，npm 包是不可或缺的一部分。它们为我们提供了许多功能强大的工具，加速和简化了我们的开发流程。在这篇文章中，我们将介绍一款名为 bolt09 的 npm 包，这是一个用于生成基于 Lig...

    4 年前
  • npm 包 Macaroon 使用教程

    前言 在前端开发中，我们经常需要向后端发送 HTTP 请求来获取数据或执行某些操作。而在这些请求中，通常需要包含某种形式的身份验证，比如用户名密码，Token，或者 Session ID 等等。

    4 年前
  • npm 包 @mitmaro/http-authorization-header 使用教程

    概述 在进行网络请求时，通常需要在请求头中添加 Authorization 字段，以便与服务器进行身份验证交互。@mitmaro/http-authorization-header 是一个 npm 包...

    4 年前
  • npm 包 squeaky 使用教程

    前言 在前端开发中，随着项目规模越来越大，我们经常需要编写一些复杂的 JavaScript 代码。为了提高我们的开发效率，我们经常选择通过 npm 包来引入已有的优秀的 JavaScript 库。

    4 年前
  • npm 包 promise-poller 使用教程

    随着前端异步编程的发展，Promise 已经成为了 JavaScript 中最为流行的异步编程方式之一。在进行异步编程的同时，我们有时需要对异步请求进行轮询，以实现某些特定的业务逻辑。

    4 年前
  • npm包 nsqjs 使用教程

    npm包 nsqjs 使用教程 前言 Nsq是一种轻量级，高可用性的消息队列系统，nsqjs则是一个用于NSQ生产者和消费者的Node.js库。使用nsqjs可以快速建立对NSQ的连接，并发送和接收消...

    4 年前
  • npm 包 log-a-log 使用教程

    随着日志在前端应用程序中的重要性越来越大，前端开发人员需要更好的方法来管理和记录这些日志。log-a-log 是一个十分实用的 npm 包，它提供了一种便捷且简单的方法来记录日志，本文将阐述如何使用 ...

    4 年前
  • npm 包 @buzuli/url 的使用教程

    前言 在前端开发中，处理 URL 是一个非常常见的任务，例如实现页面跳转、获取当前页面 URL 的查询参数等等。而在处理 URL 时，开发者经常会遇到需要对 URL 进行解析或格式化的情况，这时候就可...

    4 年前
  • npm 包 @buzuli/throttle 使用教程

    前言 开发一个前端应用或者网站时，我们经常会面对一个问题：如何在限定时间内限制用户的操作次数？为了解决这个问题，我们可以使用 @buzuli/throttle，一个基于 Node.js 平台下的函数节...

    4 年前
  • npm 包 @buzuli/json 使用教程

    简介 @buzuli/json 是一个由 buzuli 创建的 npm 包，它提供了一些便利的方法来操作和解析 JSON 格式的数据。该包适用于在 Node.js 环境和浏览器中使用。

    4 年前
  • npm 包 @buzuli/http 使用教程

    简介 @buzuli/http 是一个 Node.js 的 HTTP 库，它提供了方便易用的 API 和丰富的功能，使得 Node.js 开发者可以轻松地创建、发送，甚至完全控制 HTTP 请求和响应...

    4 年前
  • npm包@buzuli/hexdump使用教程

    简介 @buzuli/hexdump是一个用来将数据以十六进制形式进行可视化展示的npm包，支持多种展示模式和配置。 在前端开发中，我们经常需要对二进制数据进行处理和分析，将其转化为人类可读的形式，这...

    4 年前

相关推荐

    暂无文章