npm 包 @jstwrt/apollo-upload-server 使用教程

前言

在现代 Web 应用程序开发中,文件上传是必不可少的功能之一。而随着 GraphQL 的大力推广,开发者们将不得不考虑如何在 GraphQL 中处理文件上传。在 GraphQL 中使用文件上传可以是一项棘手的任务,因为 GraphQL 并没有提供与文件上传有关的内置解决方案。然而,我们可以使用一些第三方库来处理这个问题。

其中,@jstwrt/apollo-upload-server 是一个流行的 npm 包,用于实现文件上传到 GraphQL 服务器的解决方案。这个包的主要特点是方便易用,并且基于 Apollo-Server,是一个完全符合 GraphQL 标准的解决方案。在本文中,我们将介绍如何使用 @jstwrt/apollo-upload-server 来处理文件上传功能。

安装 npm 包

首先,我们需要使用 npm 安装 @jstwrt/apollo-upload-server 包。我们可以通过以下命令进行安装:

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

在 Apollo 服务器中使用 @jstwrt/apollo-upload-server

在 Apollo 服务器中使用 @jstwrt/apollo-upload-server 时,首先我们需要导入 createUploadMiddleware 方法。这个方法是用于创建 upload 中间件的工具方法。以下是示例代码:

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

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

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

在上面的示例中,我们导入了 @jstwrt/apollo-upload-server 中的 createUploadMiddleware 方法。然后,我们使用这个方法来创建一个 upload 中间件,并将这个中间件传入 Apollo 服务器的中间件列表中。此外,我们还需要将 uploads 配置项设置为 false,以禁用内置的 GraphQL 文件上传支持。

在 GraphQL Schema 中定义上传类型

在启用 @jstwrt/apollo-upload-server 后,我们需要在 GraphQL Schema 中定义一个可上传的类型。我们可以使用 GraphQL 的 Scalar 类型来定义文件类型。以下是示例代码:

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

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

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

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

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

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

在上面的示例中,我们定义了一个名为 "Upload" 的 Scalar 类型,这个类型用于表示可上传的文件。Upload 类型不需要任何解析器,因为 @jstwrt/apollo-upload-server 会自动处理这种类型。在 Mutation 类型中,我们还定义了一个 uploadFile 操作,用于接收一个可上传的文件,并将其存储到服务器上。

在 GraphQL Resolver 中处理上传请求

在 Resolver 中,我们需要定义 uploadFile 操作的处理程序。我们需要处理上传请求,并将文件保存到服务器上。以下是示例代码:

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

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

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

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

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

在上面的示例中,我们需要将 GraphQLUpload 导入 Resolver 中,并将其添加到 Upload 字段中。然后,在我们的 uploadFile 处理程序中,我们需要等待传入的文件,然后使用 createReadStream 方法创建一个文件流,并将文件保存为服务器上的文件。

结论

在这篇文章中,我们介绍了如何使用 @jstwrt/apollo-upload-server 包来处理 GraphQL 中的文件上传。我们讨论了如何在 Apollo 服务器中使用这个包,并定义了上传类型和 Resolver。如果你对文件上传功能感兴趣,希望你能够在实际项目中使用这个包。

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


猜你喜欢

  • npm 包 vusion-webfonts-generator 使用教程

    在前端开发中,web 字体是一个非常重要的元素。它能够让你的网站或应用程序看起来更加漂亮和专业。但是在使用 web 字体时,有时候我们需要将多个字体合成一个文件,以便减少网络请求次数。

    3 年前
  • npm 包 @1amageek/flow 使用教程

    简介 在前端开发中,数据的流动和状态的管理是非常重要的。而 JavaScript 的函数式编程范式为我们提供了很好的解决方式,其中一种就是使用流(Stream)来描述数据的流动。

    3 年前
  • npm 包 @beradrian/ngx-auto-scroll 使用教程

    什么是 @beradrian/ngx-auto-scroll @beradrian/ngx-auto-scroll 是一个 Angular 插件,用于在滚动容器中自动滚动到底部。

    3 年前
  • NPM 包 @appcarvers/jangular 使用教程

    在前端开发中,使用 NPM 包可以大大提高开发效率和代码质量。其中,@appcarvers/jangular 是一个功能强大的 AngularJS 模板引擎,它可以实现模板的继承、组件化开发、自定义指...

    3 年前
  • npm 包 key-locker 使用教程

    Key-locker 是一款方便管理加密密钥的 npm 包。通过 key-locker,我们可以轻松地对密钥进行加密、解密、保存和读取等操作。 安装 在使用 key-locker 之前,我们需要先安装...

    3 年前
  • npm 包 ng2-opentok 使用教程

    前言 随着实时通信技术的发展,对于前端开发工程师而言,实时音视频通信已经成为了一个重要的应用场景。本文将介绍如何使用 npm 包 ng2-opentok 实现实时音视频通信的功能。

    3 年前
  • npm 包 insertion-sort-algorithm 使用教程

    在前端开发中,排序算法是一项非常重要的技能。而 insertion sort(插入排序)是其中最基础的一种算法之一,也是相对简单易学且在实际应用中较为常见的一种排序算法。

    3 年前
  • npm 包 mdm-cmd-poc 使用教程

    介绍 mdm-cmd-poc 是一个基于 Node.js 的命令行工具,用于提取和呈现 Markdown 文件中的代码块,支持实时预览和语法高亮。使用 mdm-cmd-poc 可以轻松地将 Markd...

    3 年前
  • NPM包platzomlaguaje使用教程

    NPM (Node Package Manager) 是 Node.js 中的包管理工具。它允许您在您的项目中使用和共享代码包。platzomlaguaje是一个NPM包,可以对西班牙语进行转换。

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

    前言 随着前端技术的不断发展,越来越多的工具和框架被开发出来。其中,vue-calendar-picker 是一款 Vue.js 的日历选择器组件,可以用于日历的展示和日期的选择。

    3 年前
  • npm 包 @progress/jsdo 使用教程

    在前端开发中,与后端进行数据交互是必不可少的一环。而 @progress/jsdo 就是一个优秀的用于与后端进行数据交互的 npm 包。本文将详细地介绍 @progress/jsdo 的使用方法和具体...

    3 年前
  • npm 包 egg-istanbul-middleware 使用教程

    在前端开发中使用测试工具进行测试是非常必要的步骤,而在测试覆盖率的评估中,istanbul 是非常重要的工具。而 egg-istanbul-middleware 这一 npm 包则提供了在 egg.j...

    3 年前
  • npm 包 mongoose-auto-increment-uniq-scope 使用教程

    在开发前端项目时,我们通常需要与数据库进行数据的交互。而 MongoDB 作为一个流行的数据库,其在 Node.js 中有着较好的支持。而 mongoose 是一个非常流行的 Node.js Mong...

    3 年前
  • npm 包 fiui 使用教程

    前言 fiui 是一个 Web 前端组件库,提供了一系列包括表单、布局、通知、消息框、提示框等组件。fiui 具有简单易用、易于扩展、优雅美观等特点,适合各种 Web 应用场景。

    3 年前
  • npm 包 swpacks 使用教程

    前置知识 在使用 swpacks 之前,需要了解以下概念: 包管理工具 npm Webpack Service Workers 什么是 swpacks swpacks 是一个 Webpack 插件...

    3 年前
  • npm 包 select-for-tel-input 使用教程

    介绍 select-for-tel-input 是一个适用于前端开发的 npm 包,主要用于在输入电话号码时选择国家/地区代码。 在处理电话号码输入时,我们通常需要输入国家/地区代码,以避免在不同的国...

    3 年前
  • NPM包Angular5-ADAL使用教程

    前言 随着互联网技术的飞速发展,越来越多的应用都被迁移至Web端。而Web应用的开发中,前端技术作为其中至关重要的环节,受到了越来越多的关注。Angular5作为目前最受欢迎的前端框架之一,其优秀的性...

    3 年前
  • npm 包 cache-tree 使用教程

    简介 npm 是 Node.js 的包管理工具,提供了大量的包,方便了开发人员的工作,但随着包数量的增加,npm 缓存中的包也越来越多,这就增加了本地磁盘的占用和网络带宽的使用,因此我们需要一个工具来...

    3 年前
  • npm 包 cart_app 使用教程

    介绍 在现代网络应用中,购物车是一个非常重要的功能。而在前端开发中,实现一个购物车模块是比较繁琐的工作。因此,很多前端开发者会使用现有的 cart_app npm 包来完成这个任务。

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

    在移动端开发中,卡片式交互成为越来越流行的一种操作方式。react-native-swiping-cards 就是一款非常实用的 npm 包,可以方便快捷地实现卡片式交互效果。

    3 年前

相关推荐

    暂无文章