graphql-upload

What is graphql-upload?

The graphql-upload npm package provides middleware and utilities for handling file uploads in GraphQL APIs. It allows you to upload files via GraphQL mutations, making it easier to manage file uploads in a GraphQL-based server.

What are graphql-upload's main functionalities?

File Upload Middleware

This feature provides middleware for handling file uploads in an Express-based GraphQL server. The code sample demonstrates how to set up the middleware and define a mutation for uploading files.

const { graphqlUploadExpress } = require('graphql-upload');
const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

const typeDefs = gql`
  type File {
    filename: String!
    mimetype: String!
    encoding: String!
  }

  type Query {
    _ : Boolean
  }

  type Mutation {
    uploadFile(file: Upload!): File!
  }
`;

const resolvers = {
  Mutation: {
    uploadFile: async (parent, { file }) => {
      const { createReadStream, filename, mimetype, encoding } = await file;
      // Save the file to the filesystem or cloud storage here
      return { filename, mimetype, encoding };
    }
  }
};

const server = new ApolloServer({ typeDefs, resolvers });
const app = express();
app.use(graphqlUploadExpress());
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () => {
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`);
});

Handling File Streams

This feature demonstrates how to handle file streams in a GraphQL mutation. The code sample shows how to extract the file stream from the uploaded file and process it as needed.

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
  type File {
    filename: String!
    mimetype: String!
    encoding: String!
  }

  type Query {
    _ : Boolean
  }

  type Mutation {
    uploadFile(file: Upload!): File!
  }
`;

const resolvers = {
  Mutation: {
    uploadFile: async (parent, { file }) => {
      const { createReadStream, filename, mimetype, encoding } = await file;
      const stream = createReadStream();
      // Process the file stream here (e.g., save to disk, cloud storage, etc.)
      return { filename, mimetype, encoding };
    }
  }
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

Other packages similar to graphql-upload

apollo-upload-server

The apollo-upload-server package provides similar functionality for handling file uploads in Apollo Server. It integrates seamlessly with Apollo Server and offers a straightforward way to manage file uploads in GraphQL APIs. Compared to graphql-upload, it is more tightly coupled with Apollo Server and may not be as flexible for use with other GraphQL server implementations.

README

graphql-upload

Middleware and a scalar Upload to add support for GraphQL multipart requests (file uploads via queries and mutations) to various Node.js GraphQL servers.

Clients implementing the GraphQL multipart request spec upload files as Upload scalar query or mutation variables. Their resolver values are promises that resolve file upload details for processing and storage. Files are typically streamed into cloud storage but may also be stored in the filesystem.

Installation

[!TIP]

First, check if there are GraphQL multipart request spec server implementations (most for Node.js integrate graphql-upload) that are more suitable for your environment than a manual setup.

To install graphql-upload and its peer dependency graphql with npm, run:

npm install graphql-upload graphql

Use the middleware graphqlUploadKoa or graphqlUploadExpress just before GraphQL middleware. Alternatively, use the function processRequest to create custom middleware.

A schema built with separate SDL and resolvers (e.g. using the function makeExecutableSchema from @graphql-tools/schema) requires the scalar Upload to be setup.

Then, the scalar Upload can be used for query or mutation arguments. For how to use the scalar value in resolvers, see the documentation in the module GraphQLUpload.mjs.

Examples

• Apollo upload examples repo; a full stack demo of file uploads via GraphQL mutations using apollo-server-koa and @apollo/client.

Tips

• The process must have both read and write access to the directory identified by os.tmpdir().
• The device requires sufficient disk space to buffer the expected number of concurrent upload requests.
• Promisify and await file upload streams in resolvers or the server will send a response to the client before uploads are complete, causing a disconnect.
• Handle file upload promise rejection and stream errors; uploads sometimes fail due to network connectivity issues or impatient users disconnecting.
• Process multiple uploads asynchronously with Promise.all or a more flexible solution such as Promise.allSettled where an error in one does not reject them all.
• Only use the function createReadStream before the resolver returns; late calls (e.g. in an unawaited async function or callback) throw an error. Existing streams can still be used after a response is sent, although there are few valid reasons for not awaiting their completion.
• Use stream.destroy() when an incomplete stream is no longer needed, or temporary files may not get cleaned up.

Architecture

The GraphQL multipart request spec allows a file to be used for multiple query or mutation variables (file deduplication), and for variables to be used in multiple places. GraphQL resolvers need to be able to manage independent file streams. As resolvers are executed asynchronously, it’s possible they will try to process files in a different order than received in the multipart request.

busboy parses multipart request streams. Once the operations and map fields have been parsed, scalar Upload values in the GraphQL operations are populated with promises, and the operations are passed down the middleware chain to GraphQL resolvers.

fs-capacitor is used to buffer file uploads to the filesystem and coordinate simultaneous reading and writing. As soon as a file upload’s contents begins streaming, its data begins buffering to the filesystem and its associated promise resolves. GraphQL resolvers can then create new streams from the buffer by calling the function createReadStream. The buffer is destroyed once all streams have ended or closed and the server has responded to the request. Any remaining buffer files will be cleaned when the process exits.

Requirements

Supported runtime environments:

• Node.js versions ^18.18.0 || ^20.9.0 || >=22.0.0.

Projects must configure TypeScript to use types from the ECMAScript modules that have a // @ts-check comment:

• compilerOptions.allowJs should be true.
• compilerOptions.maxNodeModuleJsDepth should be reasonably large, e.g. 10.
• compilerOptions.module should be "node16" or "nodenext".

Exports

The npm package graphql-upload features optimal JavaScript module design. It doesn’t have a main index module, so use deep imports from the ECMAScript modules that are exported via the package.json field exports:

• GraphQLUpload.mjs
• graphqlUploadExpress.mjs
• graphqlUploadKoa.mjs
• processRequest.mjs
• Upload.mjs

Changelog

17.0.0

Major

• Updated Node.js support to ^18.18.0 || ^20.9.0 || >=22.0.0.

• Updated dev dependencies, some of which require newer Node.js versions than previously supported.

• Use the TypeScript v5.5+ JSDoc tag @import to import types in modules.

• Removed JSDoc tag @typedef that were unintentionally re-exporting types; to migrate import TypeScript types from the correct module:

  - import type { GraphQLUpload } from "graphql-upload/Upload.mjs";
  + import type GraphQLUpload from "graphql-upload/GraphQLUpload.mjs";
  

  - import type { processRequest } from "graphql-upload/Upload.mjs";
  + import type processRequest from "graphql-upload/processRequest.mjs";
  

  - import type { GraphQLUpload } from "graphql-upload/processRequest.mjs";
  + import type GraphQLUpload from "graphql-upload/GraphQLUpload.mjs";
  

• Refactored tests to use the standard AbortController, fetch, File, and FormData APIs available in modern Node.js and removed the dev dependencies node-abort-controller and node-fetch.

• Replaced the test utility function streamToString with the function text from node:stream/consumers that’s available in modern Node.js.

• Use the Node.js test runner API and remove the dev dependency test-director.

Minor

• Support Express v5 by updating the optional peer dependency @types/express to 4.0.29 - 5 and the dev dependency express to v5, via #389.

Patch

• Tweaked the package description.
• Updated the package.json field repository to conform to new npm requirements.
• Updated the package scripts:
  • Reordered the scripts.
  • Replaced npm run with node --run.
• Updated GitHub Actions CI config:
  • No longer run the workflow on pull request.
  • Enable manual workflow dispatching.
  • Run checks in seperate jobs.
  • Removed custom step names.
  • Replaced npm run with node --run.
  • Updated the tested Node.js versions to v18, v20, v22.
  • Updated actions/checkout to v4.
  • Updated actions/setup-node to v4.
• Migrated to the ESLint v9 CLI and “flat” config.
• Integrated a new dev dependency eslint-plugin-jsdoc and revised types.
• Removed the Node.js CLI option --unhandled-rejections=throw in the package script tests as it’s now the default for all supported Node.js versions.
• Avoid hardcoding a default value in the type FileUploadCreateReadStreamOptions property highWaterMark description and use the function getDefaultHighWaterMark from node:stream in tests.
• Replaced the test helper class Deferred with polyfilled Promise.withResolvers.
• Removed an unnecessary await in tests.
• Omit unused catch bindings in the function processRequest.
• Corrected the JSDoc type FileUploadCreateReadStreamOptions in the module processRequest.mjs.
• Avoid using return in the middleware.
• Added a new dev dependency async-listen to replace the test utility function listen.
• Enabled the TypeScript compiler options noUnusedLocals and noUnusedParameters and used the prefix _ for purposefully unused function parameters in tests.
• Updated the GitHub Markdown syntax for alerts in the readme.
• Tweaked wording in the readme and JSDoc descriptions.