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 包 sarah.js 使用教程

    在前端开发中,我们常常需要使用各种工具来提高编码效率和应用性能。其中,npm 管理的包是一种非常常用的工具,可以加速开发和部署流程。在这里,我们将介绍一种名为 sarah.js 的 npm 包,该包提...

    3 年前
  • npm包 react-resolve-element 使用教程

    前言 在开发React应用时,我们经常需要创建复杂的组件层次结构并处理各种复杂情况的渲染。react-resolve-element是一个非常有用的npm包,可以帮助开发人员更轻松地编写这样的代码。

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

    简介 在前端开发中,随着项目规模逐渐扩大,传统的手动测试已无法满足需求,自动化测试变得越来越重要。而 npm 包 test-arg 可以轻松帮助你完成命令行参数的测试。

    3 年前
  • npm 包 google-blockly 使用教程

    什么是 google-blockly google-blockly 是一款由 Google 开发的 JavaScript 库,用于创建可视化编程界面。利用 google-blockly,我们可以轻松地...

    3 年前
  • npm 包 @xa-neso/job-common 使用教程

    简介 @xa-neso/job-common 是一款专为前端工程师打造的 npm 包,旨在帮助工程师快速搭建一套符合规范、易于维护的项目结构,同时提供各种实用的工具函数,让开发过程更加高效、便捷。

    3 年前
  • `react-instantsearch-meteor` 包的使用教程

    在现代的网络应用程序中,搜索是非常重要的一个功能。react-instantsearch-meteor 是一个使用 Algolia 搜索引擎和 React 框架实现的全文搜索组件,可以轻松地集成到您的...

    3 年前
  • npm 包 node-red-contrib-mattermost 使用教程

    在前端开发中,使用 npm 包是非常常见的。而其中一款 npm 包,node-red-contrib-mattermost,是专门用于处理 Mattermost 消息的工具包。

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

    在一款移动应用中,添加一个闹钟功能几乎是必不可少的一步。为了方便开发者实现这个功能,许多 npm 包也被不断更新,其中一款比较值得推荐的是 react-native-alarm 包。

    3 年前
  • npm 包 @new/project 使用教程

    前言 随着前端开发技术的不断发展,我们越来越需要使用现有的前端框架、库甚至自己编写的组件进行开发。而这些代码和组件的复用则需要通过 npm 包进行实现。在这篇文章中,我们将介绍一个实用的 npm 包 ...

    3 年前
  • npm 包 @new/project-web 使用教程

    简介 @new/project-web 是一个基于 React 技术栈的前端项目开发脚手架,可以帮助前端开发者快速搭建基于 React 的项目,并提供了丰富的配置选项、插件等便于开发的功能。

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

    什么是 @new/new @new/new 是一个优秀的前端脚手架工具,它提供了快速搭建 React/Vue.js 项目的能力,同时也支持 TypeScript 和 Preact 等其他技术栈。

    3 年前
  • npm 包 pull-spawn-process 使用教程

    本文章主要介绍使用 pull-spawn-process 进行进程间通信的方法。 前置条件 在使用 pull-spawn-process 之前,需要先了解以下知识: Node.js 的基础知识 ...

    3 年前
  • npm 包 react-scrolling-list 使用教程

    前言 随着前端技术的不断发展,我们现在能够在浏览器端实现非常复杂的交互效果了。而针对一些比较常见的组件,例如滚动列表,大家也都希望能够使用一些简单的工具来实现。这时,npm 包 react-scrol...

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

    什么是 t-lru-cache? t-lru-cache 是一个基于 LRU 缓存算法的 npm 包。它可以帮助我们在前端应用中优化资源的加载和读取速度,提高应用的性能。

    3 年前
  • npm 包 i-cookie 使用教程

    前言 在前端开发中,我们常常需要实现一些与浏览器的 cookies 相关操作,如设置、获取、删除等,这时候我们可以使用 i-cookie 这款 npm 包进行操作。

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

    前言 随着 Web 技术的不断发展,现代化的前端技术栈也日益成熟。其中,Vue.js 是目前较为热门的前端框架之一,在搭建 Web 应用时,可以显著提高开发效率和代码质量。

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

    什么是 fint-client? fint-client 是一款基于 node.js 的 npm 包,用于实现对 fints(协议,Financial Transaction Services)的访问...

    3 年前
  • npm 包 clisp 使用教程

    前言 在前端编程中,我们经常需要使用 JavaScript 的函数式编程风格来解决一些问题。而 Common Lisp 作为函数式编程的重要语言之一,其语法精简且表达能力强,完全可以提高我们代码的质量...

    3 年前
  • npm 包 graphql-partition 使用教程

    GraphQL 是一个 API 查询语言和运行时,它提供了一种更高效,更强大和更灵活的访问 API 数据的方式。GraphQL 容易被用于构建 API,因为它强大的类型系统和查询语言可以让 API 的...

    3 年前
  • npm 包 react-xd-admin-lte 使用教程

    react-xd-admin-lte 是一款基于 React 技术栈的开源 UI 组件库,它提供了多种常用的 UI 控件和组件,如表格、图表、表单、可视化等,能够极大地提高前端开发的效率和质量。

    3 年前

相关推荐

    暂无文章