npm 包 graphql-json-schema 使用教程

GraphQL 是一种用于 API 的查询语言和运行时环境，它使得客户端能够精确地调用 API 所需的数据，而无需过多依赖于服务端的决策。而 graphql-json-schema 是一个快速生成 GraphQL 类型定义的 npm 包。本文将介绍如何使用 graphql-json-schema 包。

安装

安装 graphql-json-schema 包非常简单，只需要运行以下命令：

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

使用

转换单个 JSON 对象

我们首先来看如何将一个单独的 JSON 对象转换成 GraphQL 类型定义。假设我们有以下 JSON 对象：

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

要将此 JSON 对象转换为 GraphQL 类型定义，我们只需编写以下代码：

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

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

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

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

此代码将输出如下所示的 GraphQL 类型定义：

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

------ ----

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

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

我们可以看到，GraphQL 类型定义包括一个 Query 类型，一个 scalar JSON 类型，以及一个名为 Json 的自定义类型，该类型与我们给出的 JSON 对象结构相对应。

请注意，我们也可以选择将 Json 类型定义作为 mutation 类型的字段。

转换多个 JSON 对象

要将多个 JSON 对象转换为 GraphQL 类型定义，我们可以使用 fromJSONList 方法。假设我们有以下两个 JSON 对象：

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

要将这两个 JSON 对象转换为 GraphQL 类型定义，我们只需编写以下代码：

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

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

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

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

此代码将输出如下所示的 GraphQL 类型定义：

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

------ ----

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

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

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

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

我们可以看到，在这个例子中，GraphQL 类型定义包括一个 Query 类型，一个 scalar JSON 类型，以及一个名为 Json 的自定义类型，该类型与我们给出的 JSON 对象结构相对应。此外，还会包括一个名为 JsonList 的类型，该类型由一个 items 字段和一个 pageInfo 字段组成，用于分页查询多个 JSON 对象。

使用 Schema Directives

schema directives 是 GraphQL 的一项强大特性。使用 graphql-json-schema，我们可以轻松地将 schema directives 应用到我们生成的 GraphQL 类型定义上。假设我们要将 @uppercase schema directives 应用到生成的 GraphQL 类型上，我们可以这样做：

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

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

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

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

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

此代码将输出如下所示的 GraphQL 类型定义：

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

------ ----

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

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

我们可以看到，我们自定义的 uppercase schema directive 被应用到了我们生成的 GraphQL 类型定义中。

结论

此处我们详细介绍了如何使用 graphql-json-schema 包将 JSON 对象转换成 GraphQL 类型定义，并展示了如何使用 fromJSONList 方法在多个 JSON 对象之间进行转换。我们还介绍了如何使用 schema directives 对生成的 GraphQL 类型定义进行自定义。因此，在前端开发中使用 graphql-json-schema 包可以更快、更方便地将多个 JSON 对象转换成 GraphQL 类型定义，同时也能更好地实现分页查询和 schema directives。

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

阅读全文

猜你喜欢

  • npm 包 hyper-mono-material 使用教程

    简介 hyper-mono-material 是一款基于 Hyper 终端的主题，主要特点是采用了单色调的风格和 Material Design 的元素。它具有简洁、美观、易用的特点，深受前端开发者的...

    3 年前
  • npm 包 jqy 使用教程

    前言 在前端开发中，经常会用到 jQuery 这个强大的库。而 jqy 则是 jQuery 的一个简化版，只包含了最核心的部分代码，文件大小只有 jQuery 的一半左右。

    3 年前
  • npm 包 react-native-vector-icons-yuncess 使用教程

    在 React Native 开发中，我们常常需要使用图标来方便地展示操作或状态信息。而 react-native-vector-icons-yuncess 这个 npm 包则为我们提供了广泛且丰富的...

    3 年前
  • npm 包 @hspkg/generator-rc 使用教程

    介绍 随着前端技术的发展，前端工程化已经渐渐成为Web前端开发的重要组成部分。在构建和维护前端项目时，我们经常需要进行重复的工作，如建立项目目录结构、添加配置文件等，这些复杂、繁琐的工作常常使开发者感...

    3 年前
  • npm 包 daostack-arc-fork 使用教程

    介绍 daostack-arc-fork 是一个基于 Ethereum 平台的分散式自治组织（DAO）框架，它提供了一个易于使用的工具集，用于创建 DAO 并管理 DAO 的各种操作。

    3 年前
  • npm 包 hexo-sync 使用教程

    如果你正在使用 Hexo 静态网站生成器来创建博客，那么 hexo-sync 包将是一个非常有用的工具。hexo-sync 提供了一种简单的方式来同步 Hexo 博客的源文件夹和 Github Pag...

    3 年前
  • npm 包 react-unsplash-container 使用教程

    简介 react-unsplash-container 是一个 React 组件库，用于在网站上显示 Unsplash 页面，其中包括高质量的图片。这个库使用 Unsplash API，只需一个 AP...

    3 年前
  • npm 包 roc-plugin-test-jest 使用教程

    前言 在前端开发中，测试是一个不可或缺的部分。在测试过程中，我们需要使用各种测试框架和工具帮助我们完成测试。而 Jest 就是其中一种非常流行的测试框架。在使用 Jest 进行测试的过程中，我们可以使...

    3 年前
  • npm 包 rua-event 使用教程

    背景与目的 在前端开发中，我们常常需要使用事件来监听 DOM 元素上的各种操作，比如点击、鼠标移动、键盘输入等等。而业务场景中可以涉及到大量的事件绑定，使得代码变得冗长而难以维护。

    3 年前
  • npm 包 vue-pod 使用教程

    vue-pod 是一个基于 Vue.js 的组件库，它包含了一系列常用的 UI 组件，例如按钮、输入框、表格等，可以帮助前端工程师快速地构建一些常见的前端界面。本文将为大家介绍如何使用 npm 包 v...

    3 年前
  • npm 包 @sprii/eslint-config 使用教程

    在开发前端项目的过程中，代码的规范化是非常重要的，一个高质量的项目需要有一套完整的编码规范。而使用 ESLint 工具可以很好地达到这个目的，而 @sprii/eslint-config 包则是一个包...

    3 年前
  • 用法指南：npm 包 awesome-firework

    前言 awesome-firework 是一个 JavaScript 库，用于产生炫目的烟花效果。它是一个很棒的工具，可以为网站、游戏或者其他互动体验提供惊艳的特效。

    3 年前
  • npm 包 development-mock-server 使用教程

    在前端开发中，经常会遇到需要与后端进行接口联调的情况。而如果后端接口还未完成开发，我们可能需要自己模拟数据进行开发和测试。这时候就可以使用 npm 包 development-mock-server。

    3 年前
  • npm 包 @benjie/pg-query-native 使用教程

    本篇文章主要介绍 npm 包@benjie/pg-query-native 的使用方法，它是一个用于 Node.js 的 PostgreSQL 查询库，使用它可以让开发人员更轻松地使用 Node.js...

    3 年前
  • npm 包 itomic-vue-input-tag 使用教程

    简介 itomic-vue-input-tag 是一个基于 Vue.js 的输入框组件，用于输入多个标签。它支持自定义样式和事件，并提供了多个属性以定制标签的显示和行为。

    3 年前
  • npm 包 interpolate-math 使用教程

    在前端开发中，我们常常需要进行数据的插值计算。interpolate-math 是一个帮助我们进行数字插值计算的 npm 包，它可以方便地进行数学表达式的计算和数值范围的生成。

    3 年前
  • npm 包 @sprii/stylelint-config 使用教程

    在前端开发中，代码风格是非常重要的一环。为了保持团队代码的一致性以及避免常见的代码错误，我们可以借助 stylelint 工具来进行代码风格的检查。 然而，具体的 stylelint 配置是比较繁琐的...

    3 年前
  • npm 包 advanced-compare 使用教程

    在前端开发过程中，我们经常需要比较两个对象的值。但是 JavaScript 的 == 和 === 可能会给我们带来一些意料之外的结果。为了更准确地比较两个对象，我们可以使用 npm 包 advance...

    3 年前
  • npm 包 @mrbatista/ngx-loader 使用教程

    在前端开发中，我们经常需要在页面中加载一些资源，如图片、音频、视频等。而这些资源的加载会消耗一定的时间，会导致页面加载变慢，影响用户体验。为了解决这个问题，我们可以使用某些技术手段来优化页面资源的加载...

    3 年前
  • npm 包 cot-javascript-api-sdk 使用教程

    COT（Cloud of Things）是一个由 Bosch 创建的 IoT 平台，它提供了丰富的 API 以便开发者使用。cot-javascript-api-sdk 是一个基于 JavaScrip...

    3 年前

相关推荐

    暂无文章