如何在 Deno 中使用 GraphQL 进行数据交互

前言

GraphQL 是一种数据交互语言,由 Facebook 开发并开源,它可以让客户端指定需要的数据结构和具体数据。GraphQL 的优势在于可以按需获取数据,避免了传统接口的二次开发和数据过多传输等问题。本文将介绍如何在 Deno 中使用 GraphQL 进行数据交互。

安装

安装 Deno 和 graphql 客户端

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

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

创建服务器

我们使用 Oak 创建一个简单的服务器,同时借助 Oak GraphQL 中间件来处理 GraphQL 的请求。

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

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

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

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

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

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

其中,typeDefsresolvers 分别用于声明 GraphQL 的类型和数据处理方法。

创建 Schema

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

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

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

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

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

这里我们定义了一个 Book 类型,包括图书 id、标题 title 和作者 author。同时,Query 定义了获取图书列表的方法 getBooksMutation 定义了增加图书的方法 addBook,入参为 BookInput

创建 Resolver

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

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

每个 resolver 都对应一个 typeDef 中定义的 GraphQL 方法。在 resolver 中,我们把处理逻辑定义在这个函数中,它会被对应的类型调用。

这里我们使用一个 DataStore 作为数据源,定义了 getBooksaddBook 方法,用于获取图书列表和添加图书。

创建数据源

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

这里我们定义了一个 DataStore 类,它包含了图书数据和操作这些数据的方法,使用类的方式来管理和维护数据,使其更加灵活和易于扩展。

发起GraphQL请求

我们可以使用 gql 客户端发起 GraphQL 请求。

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

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

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

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

这里我们使用 mutation 来调用 addBook 方法,入参是一本新的图书。我们通过 gql 发起请求,并使用 fetch 发出网络请求,最终将返回的结果打印到控制台。

总结

在本文中,我们介绍了如何在 Deno 中使用 GraphQL 进行数据交互,通过创建服务器和定义 SchemaResolver 和数据源等步骤,带您了解了 GraphQL 的基础知识,同时,使用 Deno 中的 GraphQL 客户端,我们发起了构建时 GraphQL 类型检查、客户端查询和变异等请求。GraphQL 能够高效地处理数据,解决了 API 数据传输成本高,无法满足不同客户端需求等问题。希望本文能给您带来帮助。

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


猜你喜欢

  • Custom Elements 中如何进行属性的类型检查?

    随着 Web 技术的不断发展,Custom Elements 被越来越多的前端开发者所使用。然而,Custom Elements 本身并没有提供强类型属性的支持,这就给开发者的工作带来了一些困扰。

    1 年前
  • 通过 ECMAScript 2021 (ES12) 中的 Map 对象优化代码性能

    通过 ECMAScript 2021 (ES12) 中的 Map 对象优化代码性能 在前端开发中,我们经常需要使用数据结构来实现一些常见的操作,比如查找、筛选、排序等等。

    1 年前
  • 如何使用 Express.js 与 MySQL 数据库交互

    在前端开发的过程中,我们经常需要与数据库进行交互。而目前最为流行的后端框架之一就是 Express.js,同时 MySQL 作为一款常用的关系型数据库也备受关注。本文将介绍如何使用 Express.j...

    1 年前
  • Koa.js 运用 Github Actions 自动化集成部署

    本文将介绍如何使用 Koa.js 和 Github Actions 实现自动化集成部署。我们将以一个简单的示例应用程序为例。该应用程序将通过 Github Actions 在每次提交后,自动运行测试、...

    1 年前
  • 使用 Babel 编译 ES6 代码时如何实现单元测试

    为什么需要单元测试? 在开发过程中,我们需要保证代码质量,避免将低质量的代码发布到生产环境。单元测试是保证代码质量的一种方法,它通过测试代码的每一个组成部分,避免了在集成测试和验收测试时出现的一些问题...

    1 年前
  • 在 Webpack 中使用 PostCSS

    介绍 随着前端技术的不断发展,现在的前端工程化越来越重要,而 Webpack 作为一种流行的前端打包工具,被广泛应用于前端工程化项目中。 在 Webpack 中使用 PostCSS 可以帮助我们更方便...

    1 年前
  • ESLint:如何禁止在循环内使用 await?

    在前端开发中,使用 async/await 可以方便地处理异步请求,但是如果在循环中使用 await,可能会导致程序性能下降。本文将介绍通过 ESLint 来禁止在循环内使用 await。

    1 年前
  • Redux 中的 Context 对象详解

    在 Redux 中,Context 是一个非常重要的概念。它可以让你跨越组件树访问 store,这在一些情况下非常有用,比如在使用多个 Redux store 的情况下。

    1 年前
  • ECMAScript 2019 中新增的 flatMap() 方法详解

    在 ECMAScript 2019 中,新增了一个名为 flatMap() 的方法,它可以帮助开发者更方便地处理数组操作,提高操作效率。在本篇文章中,我们将详细解释 flatMap() 方法的作用、用...

    1 年前
  • TypeScript 中遇到的 “Cannot find module” 的问题及解决方法

    在使用 TypeScript 进行前端开发时,我们可能会遇到“Cannot find module”的错误提示。这个问题一般是由于模块的导入出现了问题,下面将介绍一些常见的解决方法。

    1 年前
  • Cypress 测试框架中如何模拟用户超时操作

    如果你是前端开发人员,你一定知道Cypress测试框架的用处。Cypress是一个现代化的前端测试框架,将E2E测试和行为驱动测试集中到一个工具中,让测试变得更为简单和可靠,且它是开源的。

    1 年前
  • 解决 Fastify 运行时报错:Invalid schema error

    Fastify 是一个基于 Node.js 的 WEB 框架,它支持快速构建高性能的 WEB 应用程序。在使用 Fastify 开发应用程序时,有时候会遇到“Invalid schema error”...

    1 年前
  • Mongoose 插入数据时如何避免数据重复

    Mongoose 是 Node.js 中流行的 MongoDB Object Modeling Tool,它可以在 Node.js 应用程序中定义数据模型、访问 MongoDB 数据库并处理与数据相关...

    1 年前
  • Socket.io 如何处理多个房间的同时连接

    Socket.io 是一款基于 WebSocket 协议的实时通讯框架,可以在前端和后端实现双向通信、事件触发和数据传输等功能。在实际项目中,我们可能需要同时创建多个房间,隔离不同的用户或功能,但是又...

    1 年前
  • Enzyme 测试 React 组件时如何模拟接口返回数据?

    在进行前端开发过程中,测试是非常重要的一环。而在 React 中,Enzyme 可以针对组件进行测试。在测试 React 组件时,拦截数据请求也是很常见的一种情况。

    1 年前
  • 如何在 Serverless 框架中使用 S3 触发器实现对象级别事件通知

    概述 S3 是亚马逊 Web 服务(Amazon Web Services)提供的存储服务。它可以存储任意文件,包括文本文件、图片、视频等等。S3 的另一个特点是可以设置触发器,使得在对象级别事件(如...

    1 年前
  • PWA 项目中的动态导航菜单实现

    作为一种流行的 Web 技术,PWA 在许多场景下都能为用户带来更好的体验。在 PWA 项目中,动态导航菜单可以为用户提供更快捷、更高效的页面导航方式,从而提升用户体验。

    1 年前
  • Hapi.js 编写 API 接口时解决 CORS 跨域问题

    在前端开发过程中,由于浏览器同源策略的限制,我们常常会遇到跨域问题。CORS(Cross-Origin Resource Sharing)是一种解决跨域问题的机制,可以让浏览器向不同源的服务器发起跨域...

    1 年前
  • Custom Elements 如何实现键盘响应事件?

    在前端开发中,Custom Elements 是一个非常有用的概念。它允许你创建自定义的 HTML 元素,并使得这些元素可以像普通的 HTML 元素一样被使用。在本文中,我们将探讨如何使用 Custo...

    1 年前
  • 从 ECMAScript 2021 (ES12) 到 TypeScript,TypeScript 入门指南

    前言 随着前端技术的发展,JavaScript 成为了大众熟知的编程语言之一,并且在不断地完善和进化。 ECMAScript 是 JavaScript 的标准化规范,每年的版本都会有新的特性添加进来。

    1 年前

相关推荐

    暂无文章