解决 GraphQL 变量类型检查问题的方法

GraphQL 是一种用于 API 的查询语言，它允许客户端精确地指定需要的数据，从而避免了传统 REST API 中的过度获取或不足获取的问题。然而，在使用 GraphQL 进行查询时，我们经常会遇到变量类型检查问题。本文将介绍一些解决 GraphQL 变量类型检查问题的方法。

问题描述

在 GraphQL 中，我们可以通过变量来传递参数。例如，我们可以通过以下查询获取某个用户的信息：

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

在上面的查询中，我们定义了一个名为 $id 的变量，并指定了它的类型为 ID!，也就是必须传递一个非空的 ID。然而，在客户端传递变量时，我们很容易出现类型不匹配的问题，例如将一个字符串类型的值传递给了一个期望数字类型的变量。

解决方法

使用 TypeScript

TypeScript 是一种静态类型检查的 JavaScript 超集，它可以帮助我们在编译时发现类型不匹配的问题。在使用 GraphQL 查询时，我们可以使用 graphql-codegen 工具自动生成 TypeScript 类型定义文件，从而在编写客户端代码时获得类型检查的支持。

首先，我们需要安装 graphql-codegen：

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

然后，在项目根目录下创建一个名为 codegen.yml 的文件，用于配置代码生成器。以下是一个示例配置：

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

在上面的配置中，我们指定了 GraphQL API 的 schema 和查询文件的路径，并配置了三个插件用于生成 TypeScript 文件。其中，typescript-operations 插件可以根据查询文件自动生成对应的 TypeScript 类型定义文件。

接下来，我们可以使用 graphql-codegen 命令生成 TypeScript 文件：

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

这将会根据配置文件自动生成 TypeScript 文件，并保存在 src/generated/graphql.ts 中。然后，我们就可以在客户端代码中使用这些类型定义了，例如：

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

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

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

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

在上面的代码中，我们使用 GetUserQuery 和 GetUserQueryVariables 类型来指定查询结果和变量的类型，并在查询时传递了一个类型正确的变量。

使用 Joi

Joi 是一个 Node.js 中的对象模式描述语言和验证器，它可以帮助我们对变量进行详细的类型检查和验证。在使用 GraphQL 查询时，我们可以使用 Joi 来对传递的变量进行验证，从而避免类型不匹配的问题。

首先，我们需要安装 joi：

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

然后，我们可以使用以下代码来验证变量：

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

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

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

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

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

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

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

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

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

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

在上面的代码中，我们首先定义了一个 GraphQL schema 和 resolvers，然后定义了一个查询和变量，并使用 Joi.object 来定义变量的验证规则。最后，我们使用 Joi.validate 方法来验证变量是否符合规则，如果验证通过，则执行 GraphQL 查询并返回结果。

使用 Yup

Yup 是一个 JavaScript 对象模式验证器，它可以帮助我们对变量进行详细的类型检查和验证。在使用 GraphQL 查询时，我们可以使用 Yup 来对传递的变量进行验证，从而避免类型不匹配的问题。

首先，我们需要安装 yup：

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

然后，我们可以使用以下代码来验证变量：

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

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

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

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

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

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

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

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

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

在上面的代码中，我们使用 yup.object().shape 来定义变量的验证规则，并使用 yup.validate 方法来验证变量是否符合规则。如果验证通过，则执行 GraphQL 查询并返回结果，否则抛出异常。

总结

在使用 GraphQL 进行查询时，我们经常会遇到变量类型检查问题。本文介绍了三种解决 GraphQL 变量类型检查问题的方法：使用 TypeScript、使用 Joi 和使用 Yup。这些方法都可以帮助我们在客户端代码中获得类型检查的支持，从而提高代码的可靠性和可维护性。

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

阅读全文

猜你喜欢

  • Promise 加强版 bluebird 的使用技巧

    Promise 是前端开发中常用的异步编程方式，它可以将异步操作转换为同步操作，使得代码更加简洁和易于维护。而 Promise 加强版 bluebird 则是 Promise 的一个优秀实现库，它提供...

    1 年前
  • Vue.js 中使用 $nextTick 实现 DOM 更新后的回调函数

    Vue.js 是一款流行的前端框架，它提供了丰富的工具和功能来帮助我们构建复杂的应用程序。其中一个非常有用的功能是 $nextTick 方法，它可以让我们在 DOM 更新后执行回调函数。

    1 年前
  • 使用 Mongoose 访问 MongoDB 数据库的详细教程

    前言 随着互联网的快速发展，前端技术也在不断地更新迭代，现在已经成为了互联网开发的重要组成部分。而其中的一个重要技术就是 MongoDB 数据库，它是一种 NoSQL 数据库，具有高性能、可扩展性等特...

    1 年前
  • 使用 Koa2 和 SQLite 构建 Blog 系统

    在现代 Web 应用程序开发中，建立一个 Blog 系统是一个很好的练手项目，也是一个很好地学习机会。在本文中，我们将介绍如何使用 Koa2 和 SQLite 构建一个 Blog 系统。

    1 年前
  • PWA 在不同浏览器下的兼容性问题及解决方法

    什么是 PWA？ PWA（Progressive Web App）是一种新型的 Web 应用程序，它结合了 Web 应用和原生应用的优点，可以在多个平台上运行，并具有离线访问、推送通知、桌面快捷方式等...

    1 年前
  • 在 ES6 中使用 Map 和 WeakMap 优化你的代码

    在前端开发中，我们经常需要处理键值对的数据结构。在 ES6 中，我们可以使用 Map 和 WeakMap 来优化我们的代码。这两个数据结构都提供了一种更好的方式来存储和访问键值对。

    1 年前
  • 解析 Fastify 配置文件的最佳实践

    Fastify 是一个快速、低开销的 Web 框架，它提供了一种简单而强大的方式来构建 Web 应用程序和 API。在使用 Fastify 构建应用程序时，配置文件是非常重要的一部分，它可以让你轻松地...

    1 年前
  • RxJS without extension – 如何将 observable 转换为 promise

    RxJS 是一个强大的 JavaScript 库，它提供了一种响应式编程的方式，可以帮助我们更好地处理异步数据流。在 RxJS 中，我们可以使用 Observable 来处理异步数据流。

    1 年前
  • ES7 中的 async/await 语句和 Promise 的区别

    在前端开发中，异步操作是非常常见的，而 Promise 和 async/await 是两种常用的处理异步操作的方式。在 ES7 中，async/await 语句被引入，它是一种更加简单明了的处理异步操...

    1 年前
  • 用 Express.js 和 MongoDB 实现可扩展且高性能的 RESTful API 的实践经验

    在现代 Web 应用程序中，RESTful API 已经成为了一种非常流行的架构风格。它可以帮助我们构建可扩展、易于维护和高性能的 Web 应用程序。在本文中，我们将介绍如何使用 Express.js...

    1 年前
  • 如何使用 ES10 的 Array.prototype.includes() 方法判断数组是否包含某元素

    在前端开发过程中，我们经常需要判断数组中是否包含某个元素。在 ES6 中，我们可以使用 Array.prototype.indexOf() 方法来实现，但是这个方法有一些缺陷，比如不能判断是否包含 N...

    1 年前
  • Kubernetes 中的 CSI 插件及使用技巧

    在 Kubernetes 中，CSI（Container Storage Interface）插件是一种标准的存储插件，它可以让 Kubernetes 管理者轻松地将不同的存储系统集成到 Kubern...

    1 年前
  • ES9: 使用合适的捕获方法

    在 JavaScript 中，错误处理是非常重要的一部分。当代码出现错误时，我们需要能够捕获并处理这些错误，以便程序能够继续运行或者提供友好的错误信息给用户。在 ES9 中，新增了一些捕获方法，使错误...

    1 年前
  • 在 Jest 中如何测试 Canvas 绘图的效果

    在前端开发中，Canvas 绘图是一个非常重要的技能。但是，如何测试绘图效果，成为了一个让人头疼的问题。本文将介绍如何在 Jest 中测试 Canvas 绘图的效果。

    1 年前
  • 使用 HTML 和 CSS 快速打造 Material Design 应用程序

    使用 HTML 和 CSS 快速打造 Material Design 应用程序 Material Design 是 Google 推出的一种视觉风格，它的设计理念是基于纸张和墨水的传统印刷术，结合现代...

    1 年前
  • SSE 在互联网金融场景中的应用实践

    SSE 在互联网金融场景中的应用实践 随着互联网金融的快速发展，实时数据推送技术变得越来越重要。SSE（Server-Sent Events）是一种用于实现服务器向客户端推送数据的技术，它可以提供实时...

    1 年前
  • JVM 性能优化：JIT Compiler 教程

    在 Java 应用程序中，JIT Compiler（Just-In-Time Compiler）是一个非常重要的组件，它可以将 Java 代码转换为本地机器代码，从而提高应用程序的执行效率。

    1 年前
  • 在 Ruby on Rails 中实现 GraphQL API

    GraphQL 是一种用于 API 开发的查询语言和运行时，它旨在提高 API 的效率和灵活性。它允许客户端精确地指定需要的数据，并且可以在一个请求中获取多个资源。

    1 年前
  • Node.js 中如何使用 Sequelize 进行数据存储

    什么是 Sequelize Sequelize 是一个 Node.js 中的 ORM（对象关系映射）库，它支持多种数据库（如 MySQL、PostgreSQL、SQLite 和 MSSQL）的数据存储...

    1 年前
  • 如何解决 Angular 中的打包问题？

    在 Angular 应用开发中，打包是一个非常关键的环节。打包的过程不仅涉及到代码的压缩和合并，还需要考虑到应用的体积和性能等问题。因此，如何解决 Angular 中的打包问题，是每个前端开发者都需要...

    1 年前

相关推荐

    暂无文章