npm 包 graphql-up 使用教程

GraphQL 是一种用于 API 构建协议的查询语言,它提供了对 API 数据的强大且灵活的查询方式,同时附带了强大的类型系统,让我们能够以更高的效率和精准度完成开发工作。graphql-up 是一个方便的 npm 包,能够帮助我们将 GraphQL schema(模式)上传至 apollo server,接下来我们就来深入了解一下如何使用 graphql-up。

安装

使用 npm 安装:

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

graphql-up 需要 node.js 环境,默认使用的是你的命令行最新的版本。同时,在通过命令行上传 schema 版本时,你的命令行需要联网。

使用

graphql-up 主要是两个命令行工具,它们分别是 initpush。从字面上能够看出它们分别对应了两个操作:初始化工具和上传 schema 到云服务器。

初始化 schema

在对 schema 进行操作之前,我们需要将当前项目初始化为一个带有 schema 结构的 graphql 项目。

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

在初始化阶段,程序会引导你创建一个可编辑文件,你可以直接关闭编辑器回车跳过,将使用默认配置。否则,你可以手动进入工具所生成的项目结构,进行各种自定义配置,例如 schema 定义位置, endpoint 地址等。具体可参见初始化建议部分。

上传 schema

在你的项目配置完成之后,你可以使用 push 命令直接将 schema 上传至云服务器。

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

输入命令后,系统会自动进行 schema 的检查,根据检查结果为你提供修改意见,保证上传的 schema 结构正确无误。在修正后,你就可以预览当前 schema 文件,确认无误后将你的 schema 推送至云服务器。具体可参见上传建议部分。

初始化建议

在初始化之前,我们需要对开发环境进行一些调整以适应 graphql-up 的工作方式。

目录结构

使用 graphql-up 要求项目中必须包含 schema 文件,因此,我们建议创建如下的目录结构:

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

package.json 配置

在 package.json 中添加以下配置:

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

在 tsconfig.json 中添加:

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

schema 配置

在你的 schema 文件中,需包含基础的 schema 定义信息,例如 type Query,type Mutation 等。

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

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

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

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

在你的 schema 文件夹下,可以另外定义查询或者变异:

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

endpoint 配置

endpoint 是允许用户定义的云服务器地址,通常存在于 .env 配置文件中。

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

上传建议

在上传 schema 之前,你需要确定以下信息:

  • endpoint 地址(如 https://graphql.example.com/graphql
  • 你的 engine api key

将一个包含 schema 代码的文件夹上载到 apollo server 中:

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

总结

使用 graphql-up 走向 GraphQL 的道路就不再是路上行人,而是跳跃挑战,因为 graphql-up 快捷高效的上手能力使我们可以省去很多配置繁琐的步骤,让我们更加专注业务本身。希望这篇文章能对你在接下来的工作中有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005626981e8991b448dfb2a


猜你喜欢

  • npm 包 @async-generators/to-array 使用教程

    前言 在前端开发中,我们经常需要使用异步生成器来处理数据流。这个过程中,我们很容易遇到将异步生成器转换为数组的需求。幸运的是,在 npm 上有一个很方便的包:@async-generators/to-...

    3 年前
  • npm 包 passport-service-client 使用教程

    介绍 passport-service-client 是一个 Node.js 环境下的,基于 Passport 的认证服务客户端框架。它提供了一种简单、可扩展的方式处理需要认证的应用程序逻辑。

    3 年前
  • npm 包 test-bm-package 使用教程

    什么是 test-bm-package? test-bm-package 是一个由 bm 前端开发团队创建并发布的 npm 包,用于前端单元测试。这个包的主要作用是帮助开发者更轻松地进行测试,以确保代...

    3 年前
  • npm 包 feathers-telegram-bot 使用教程

    介绍 Feathers-Telegram-Bot 是一个 node.js 的 npm 包,可以让你轻松地构建 Telegram Bot。该包是基于 Feathers 和 Telegram Bot AP...

    3 年前
  • npm 包 femacs 使用教程

    简介 femacs 是一个基于 Ace 编辑器 的前端文本编辑器组件,它支持 Emacs 风格的快捷键,可以让你更高效地编辑文本。本文将详细介绍 femacs 的安装方法、基本使用方法,以及如何自定义...

    3 年前
  • npm 包 pilot-cli 使用教程

    介绍 pilot-cli 是一个可以快速创建项目的命令行工具。它可以帮助前端开发人员省去重复性的工作,快速生成项目模板,并且支持多种技术栈。pilot-cli 可以从 GitHub 或者 GitLab...

    3 年前
  • npm 包 mdc-date 使用教程

    前言 在前端开发过程中,日期选择是一个不可避免的需求,而 mdc-date 是一款非常优秀的日期选择器组件,它使用了 Material Design 风格,具有美观、易用、易扩展的特点,非常适合用于 ...

    3 年前
  • npm 包 openseadragonselection 使用教程

    简介 openseadragonselection 是一个 JavaScript 库,用于在 OpenSeadragon 基础之上实现图像区域选择的功能。通过该库,我们可以使用 OpenSeadrag...

    3 年前
  • npm 包 babel-plugin-react-import-extends 使用教程

    在 React 开发中,我们经常需要导入各种组件、属性、方法等,但是在导入的过程中,由于各个模块都是相互独立的,导致导入的语句非常冗长。为了解决这个问题,我们可以使用一个叫做 babel-plugin...

    3 年前
  • npm包angular2-callcomponent使用教程

    在Angular应用程序中,组件之间的通讯是必不可少的。angular2-callcomponent是一个npm包,它提供了一种简单的方式来访问指定组件的函数或属性, 安装 使用npm安装angula...

    3 年前
  • npm 包 immutable-state-components 使用教程

    什么是 immutable-state-components immutable-state-components 是一个可以帮助前端开发者管理状态的 npm 包。

    3 年前
  • npm 包 ngm-common-dialogs 使用教程

    简介 ngm-common-dialogs 是一个基于 Angular Material 的管理系统常用对话框组件库。它包含了常见的确认对话框、信息提示对话框、输入框等等。

    3 年前
  • npm 包 react-native-tweet 使用教程

    在前端开发中,使用 npm 包可以帮助我们更加高效地开发应用程序。其中,react-native-tweet 是一个非常有用的 npm 包,它可以用于在 React Native 应用程序中添加 Tw...

    3 年前
  • NPM 包`react-web3-network-status`的使用教程

    1. 背景 React 是一种非常流行的 JavaScript 前端库,Web3.js 是一个强大的以太坊 JavaScript 库。在开发以太坊 DApp 时,我们通常会使用 Web3.js 来与以...

    3 年前
  • npm 包 serverless-copy-s3-object 使用教程

    前言 在前端开发中,经常需要将文件上传到 AWS S3 存储桶中。但在实际使用过程中,上传文件到 S3 存储桶中可能会遇到各种问题,比如授权问题、网络问题等等。这些问题会大大延迟项目开发进度。

    3 年前
  • npm 包 gulp-asset-time 使用教程

    在前端开发中,我们常常需要将多个 CSS、JavaScript 或图片等资源合并成一个或者将它们压缩、优化等处理以提高页面加载速度。gulp-asset-time 就是这样一款优秀的 npm 包,它可...

    3 年前
  • npm 包 p-auto 使用教程

    在前端开发的过程中,我们常常需要对文本进行调整,例如对文字的排版、长度限制等。p-auto 是一个能够自动调整文字排版的 npm 包,它可以很方便地帮助我们解决这些问题。

    3 年前
  • 使用 webpack-browser-log 管理前端应用的日志

    在前端开发过程中,日志记录非常重要,它可以帮助我们了解程序的运行情况,快速发现问题,并加快问题解决的速度。但在开发中,经常会遇到日志信息无法及时获取的问题,特别是在生产环境中。

    3 年前
  • angularjs-emoji 使用教程

    简介 angularjs-emoji 是一个方便的 AngularJS 应用表情包库。这个库可以帮助开发人员在网站或应用中使用表情。使用这个库,您可以轻松地在您的 AngularJS 应用程序中集成表...

    3 年前
  • npm 包 curl.lib.js 使用教程

    在前端开发中,使用 curl 发送 HTTP 请求是一种很常见的做法。然而,手动构建 curl 命令字符串并不是一件方便的事情。在这种情况下,npm 包 curl.lib.js 就可以派上用场了。

    3 年前

相关推荐

    暂无文章