如何处理 GraphQL 中的文件上传

GraphQL 是一种用于 API 开发的查询语言和运行时环境。它可以与多种后端语言和数据库集成，并且其灵活性也为前端提供了更好的开发体验。然而，与传统的 RESTful API 不同的是，GraphQL 并不支持简单的文件上传。本文将介绍在 GraphQL 中处理文件上传的方式，并提供示例代码。

概述

GraphQL 自身并不支持文件上传，但可以使用第三方包来达到该目的。其中，最常用的包是 apollo-upload-client 和 graphql-upload。前者是 Apollo 官方提供的包，可以在前端和后端同时使用；而后者则是纯 JavaScript 实现的，可以在任何语言和平台上使用。

逐步实现

前端实现

安装依赖

在前端项目中安装 apollo-upload-client：

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

创建上传组件

接下来，我们创建一个上传组件，用于选择文件和上传文件。示例代码如下：

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

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

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

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

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

定义 GraphQL Mutation

接下来，我们需要在 GraphQL 服务端中定义 Upload Mutation。示例代码如下：

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

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

创建 Apollo 实例

接下来，我们需要创建 Apollo 客户端实例，并将 apollo-link-http 和 apollo-upload-client 包分别传递给该实例。示例代码如下：

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

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

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

后端实现

安装依赖

我们需要安装 graphql-upload 包，用于处理文件上传。示例代码如下：

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

配置 Express

我们使用 Express 作为 GraphQL 服务端，需要用 graphql-upload 包提供的 graphqlUploadExpress 函数来配置 Express。示例代码如下：

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

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

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

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

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

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

处理文件上传

最后，在 GraphQL 服务端的 Resolver 中，我们需要处理文件上传。示例代码如下：

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

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

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

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

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

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

结论

上述就是使用 apollo-upload-client 和 graphql-upload 包处理 GraphQL 中的文件上传的方法。虽然这不是标准的 GraphQL API，但这种方法已被广泛采用，并且很容易在实现 GraphQL API 时遇到。希望这篇文章能对您有所帮助。

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

阅读全文

猜你喜欢

  • 调试 Serverless 应用程序中的 Lambda 函数

    简介 在 Serverless 应用程序中，Lambda 函数是重要的组成部分。相比于传统的应用程序，Serverless 应用程序具有更高的弹性、可伸缩性和可靠性，然而由于使用服务器无关架构，调试 ...

    4 天前
  • 如何使用 Babel 实现 ES6+API 的支持

    JavaScript 是一门动态、解释型的编程语言，它被广泛应用于前端开发。随着时间的推移，JavaScript 的版本也不断升级，其中 ECMAScript 6（简称 ES6）是目前最新的正式版本。

    4 天前
  • 响应式设计中如何选择合适的前端框架

    随着移动设备和平板电脑的普及，响应式设计成为现代web应用程序的必备功能。响应式设计允许web应用程序在不同设备的显示器上呈现出不同的布局和样式，从而提供更好的用户体验。

    4 天前
  • Webpack 代码分离的原理与实践

    Webpack 代码分离的原理与实践 前言 Webpack 是当下前端最流行的打包工具之一，它的优点众所周知：处理模块化、自动化，优化代码结构，加速页面加载速度等。

    4 天前
  • RxJS 中 mergeAll 操作符的应用场景

    RxJS 中 mergeAll 操作符的应用场景 RxJS 是一个流行的函数响应式编程库，它提供了许多操作符来处理大量的数据流。其中一个常用的操作符是 mergeAll，它非常适合用于从多个可观察对象...

    4 天前
  • 使用 Jest 框架测试 React Hooks 的指导与建议

    随着 React Hooks 的出现，前端开发者们在组件开发过程中得到了更加优秀和强大的实现方式。而测试在开发过程中也变得越来越重要，以确保组件的正确性和维护性。在这篇文章中，我们将会探讨如何使用 J...

    4 天前
  • 基于 Tailwind CSS 实现响应式背景图的技巧

    Tailwind CSS 是一种相对较新和流行的 CSS 框架，它采用了一种不同于传统 CSS 的工作思路，提供了一系列可复用的类，可以大大简化前端开发中的 CSS 编写工作。

    4 天前
  • Dockerfile 构建 Java 应用时的常见问题及解决方法

    Docker 可以帮助我们轻松地部署应用程序，同时还能确保应用程序在不同环境中的一致性。本文将介绍在使用 Dockerfile 构建 Java 应用程序时可能遇到的一些常见问题以及解决方法。

    4 天前
  • 解析 ES10 中的异步迭代器 (AsyncIterator) 及使用方式

    异步迭代器概念 在 ES10 中，异步迭代器 (AsyncIterator) 是实现了一个[Symbol.asyncIterator]的对象，它可以在迭代过程中返回 Promise 对象，使得迭代过程...

    4 天前
  • 在 Fastify 中实现微服务架构

    随着云计算、容器化等技术的广泛应用，微服务架构在企业级应用中越来越受欢迎。微服务架构通过将应用拆分成多个独立的小服务单元，提高了应用的可伸缩性、可维护性和可测试性。

    4 天前
  • Gulp + Mocha：使用 Stream 进行自动测试

    前端开发离不开自动化工具，而 Gulp 和 Mocha 是两个很有用的工具。Gulp 是一个基于流的自动化构建工具，可以帮助前端开发者自动化地处理重复性的工作。而 Mocha 是一个 JavaScri...

    4 天前
  • 在 Deno 中如何实现任务调度？

    简介 Deno 是一款基于 V8 引擎的 JavaScript/TypeScript 运行时，它具有安全、快速、轻量、易用等优点。它为前端/后端/中间件等多个场景提供支持，并且可以通过模块化方式扩展功...

    4 天前
  • Serverless 框架实现微服务：一个全面指南

    什么是 Serverless Serverless，中文翻译为“无服务器”，其实并不是真的没有服务器，而是指开发者可以不需要管理服务器或运行环境，专注于应用程序的业务代码编写。

    4 天前
  • 响应式设计中如何解决视觉框架缩放失真问题？

    当我们打开一个网站时，可以随意地改变浏览器的大小，但是有些网站在改变浏览器大小后，网站的布局和内容会出现缩放失真的情况，这对用户体验来说并不友好。这就是视觉框架缩放失真问题（Visual Framew...

    4 天前
  • 处理 Jest 测试中的 timeout 及其原因

    在进行前端自动化测试时，我们经常使用 Jest 这个测试框架，它提供了一些强大的功能，如快照测试、模拟函数和异步测试等。然而，在进行异步测试时，我们常常会遇到 Jest 的 timeout 问题，本文...

    4 天前
  • 如何在 Chai.js 中测试大型 JSON 字符串

    Chai.js 是一款流行的 JavaScript 测试库，它可以与各种测试框架结合使用，例如 Mocha 和 Jasmine。在前端开发中，我们通常需要测试数据的正确性和完整性，特别是当我们处理大型...

    4 天前
  • 如何解决 Vue-Router 层级嵌套模式下导航条 Bug

    在使用 Vue-Router 搭建前端路由时，层级嵌套模式是经常使用的一种方式。但是在这种模式下，我们可能遇到一个导航条的 BUG，即当前激活的菜单项与当前页面的路由不匹配。

    4 天前
  • Vue.js 单页面应用 SEO 问题及其解决技巧

    如果您是一个前端开发者或開發者，您肯定熟悉 Vue.js，一个流行的 JavaScript 框架。Vue.js 提供了用于开发单页面应用程序 (SPA) 的工具，并且可以使用其高效且灵活的 API 来...

    4 天前
  • ECMAScript 2019（ES10）新特性之 Array.flat()

    在 JavaScript 的开发中，经常需要处理多维数组。如果需要将多维数组转换为单一维度数组，以前的做法通常是使用循环或递归遍历所有的数组元素，将它们加入到一个新的数组中。

    4 天前
  • 使用 Mocha 测试 JavaScript 应用程序

    Mocha 是一个 JavaScript 测试框架，用于测试 Node.js 和浏览器中的 JavaScript 应用程序。它提供了一种简单的方式来编写和运行测试，并生成可读性强的报告。

    4 天前

相关推荐

    暂无文章