npm 包 @graphql-codegen/core 使用教程

前言

GraphQL（Graph Query Language）是一种用于 API 开发的新型查询语言，已经被广泛应用于各种 Web 应用程序中。为了方便使用 GraphQL，发展出了许多与其相关的工具，如 GraphiQL、GraphQL Playground 等。

@graphql-codegen/core 是一个类库，它可以自动化生成一些 GraphQL 相关的东西，比如 TypeScript 定义、React Hooks 等。本文将为大家介绍如何使用 @graphql-codegen/core。

安装

使用 npm 来安装：

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

基本用法

生成 TypeScript 定义

首先需要创建一个配置文件 codegen.yml：

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

然后运行以下命令来生成代码：

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

生成 React Hooks

除了生成 TypeScript 定义，@graphql-codegen/core 还可以生成一些 React Hooks：

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

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

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

运行以下命令生成代码：

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

总结

本文为大家介绍了如何使用 @graphql-codegen/core，希望对大家学习 GraphQL 以及前端技术有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 @beisen-platform/common-mount 使用教程

    背景说明 前端开发中，常常需要将一个组件或者页面挂载到不同的容器中，基于此，@beisen-platform/common-mount 库应运而生。它可以帮助我们快速地将组件或页面挂载到指定的容器中。

    5 年前
  • npm 包 @beisen-platform/common-label 使用教程

    在前端开发中，我们经常需要使用一些工具和库来帮助我们快速地开发和部署应用。其中，npm 是一个非常重要和实用的包管理工具，它能够为我们提供丰富的第三方库和组件。而 @beisen-platform/c...

    5 年前
  • npm 包 @beisen-platform/common-input 使用教程

    作为一名前端开发人员，我们经常需要使用各种 npm 包来快速构建我们的项目。而 @beisen-platform/common-input 就是一个能够帮助前端开发人员快速构建常用表单组件的 npm ...

    5 年前
  • npm 包 @beisen-platform/common-func 使用教程

    npm 包 @beisen-platform/common-func 是一款非常实用的前端常用方法集合，它包含了常用的数据格式转换、时间格式化、数组去重等多个功能，可以大大提高前端开发的效率和准确性。

    5 年前
  • npm 包 @beisen-platform/base-button 使用教程

    前言 在前端开发中，常常需要用到各种 UI 组件来优化用户使用体验和提高开发效率。而 @beisen-platform/base-button 是一款基于 Vue.js 开发的按钮组件库，提供了多种样...

    5 年前
  • npm 包 @beisen/talentui-webpack-config 使用教程

    简介 在前端开发中，webpack 是一个非常强大的工具，可以对项目进行打包、优化、调试等，然而对于初学者而言，webpack 的配置可能会比较复杂，其中涉及到的技术和概念也比较多。

    5 年前
  • NPM 包 @talentui/cz-package-changelog 使用教程

    介绍 @talentui/cz-package-changelog 是一个用于自动生成 CHANGELOG.md 文件的 NPM 包。CHANGELOG.md 文件用于记录项目的版本历史和修改内容，方...

    5 年前
  • npm 包 @lerna/validation-error 使用教程

    前言 在前端开发中，我们常常会使用 npm 包来帮助我们完成一些程序上的功能。其中，@lerna/validation-error 是一款可以帮助我们进行错误校验的包，它可以对我们的代码中的错误进行有...

    5 年前
  • npm 包 @lerna/prerelease-id-from-version 使用教程

    前言 在前端开发中，我们经常需要创建和维护多个相关的 npm 包。这些包需要同步版本，版本号的生成和维护也是比较麻烦的。@lerna/prerelease-id-from-version 是 lern...

    5 年前
  • npm 包 @beisen/publisher 使用教程

    前言 随着现代化前端开发的发展，前端的工具链也越来越复杂。为了方便开发者进行项目的构建、编译、打包和发布等操作，有很多优秀的 npm 包被开发出来。其中，@beisen/publisher 就是一款非...

    5 年前
  • npm 包 @beisen/package-graph 使用教程

    前言 在前端开发中，很多时候我们需要管理多个包的依赖关系，以及它们的引用关系。为了便于管理这些信息，@beisen 开源了一个 npm 包 @beisen/package-graph。

    5 年前
  • npm 包 @beisen/monorepo-manager 使用教程

    概述 NPM 是一个包管理器，可以让我们轻松地引用并使用代码。而 @beisen/monorepo-manager 不仅仅是一个 NPM 包，还是一个 monorepo 管理工具，它可以帮助我们更好地...

    5 年前
  • npm 包 @beisen/cmp-publisher 使用教程

    介绍 在前端开发过程中，我们经常需要发布组件到公司的私有 npm 仓库中，以供其他团队成员使用。@beisen/cmp-publisher 是一个 npm 包，它可以帮助我们快速并且方便地发布组件到私...

    5 年前
  • npm 包 @beisen/bscpm-next 使用教程

    在前端开发中，可能经常需要引入一些第三方库或框架，npm 是一个非常方便的包管理工具。@beisen/bscpm-next 是一个由北森前端团队开发的 npm 包，它提供了一些方便实用的工具和组件，下...

    5 年前
  • npm 包 @beisen/bscpm 使用教程

    前言 在前端开发中，npm 是一个必不可少的工具，它让我们可以轻松地管理和分享代码包。而 @beisen/bscpm 则是一款非常优秀的 npm 包，它可以帮助我们在企业级项目中快速构建打包工具，提高...

    5 年前
  • npm 包 @lerna/describe-ref 使用教程

    在前端开发中，经常会使用到多个包，而这些包之间的依赖关系非常复杂，需要我们管理。npm 包 @lerna/describe-ref 就是为了方便对多个包之间的依赖关系进行管理而出现的一个工具。

    5 年前
  • `npm` 包 `@lerna/child-process` 使用教程

    前言 在进行前端开发时，我们经常需要运行一些脚本，例如打包、测试、发布等。而运行脚本时，我们又经常需要创建子进程来执行命令。这时候，child_process 模块就显得十分重要了。

    5 年前
  • npm 包 @dreipol/babel-preset-google-apps-script 使用教程

    介绍 在前端开发过程中，JavaScript 是最常用的编程语言之一。然而在某些场景下，我们需要将 JS 脚本部署到 Google Apps Script (GAS) 平台。

    5 年前
  • npm 包 aaa 使用教程

    介绍 npm 是 Node.js 的包管理工具，是前端开发和后端开发的必备工具。npm 上有大量的开源包，可以为前端开发带来很大的便利。aaa 是一款优秀的 npm 包，它提供了很多优秀的前端组件。

    5 年前
  • npm 包 zzl201956 使用教程

    什么是 zzl201956 ? zzl201956 是一个 npm 包，是一个可以提供各种实用函数，以简化编程过程的实用工具库。zzl201956 的主要目的是提高开发人员的生产力，让开发工作更加高效...

    5 年前

相关推荐

    暂无文章