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 an Upload scalar to add support for GraphQL multipart requests (file uploads via queries and mutations) to various Node.js GraphQL servers.

⚠️ Previously published as apollo-upload-server.

Support

The following environments are known to be compatible:

• Node.js v8.5+
  • CJS
  • Native ESM with --experimental-modules
• Koa
  • graphql-api-koa
  • apollo-server-koa (inbuilt)
• Express
  • express-graphql
  • apollo-server-express (inbuilt)

See also GraphQL multipart request spec server implementations.

Setup

Setup is necessary if your environment doesn’t feature this package inbuilt (see Support).

To install graphql-upload and the graphql peer dependency from npm run:

npm install graphql-upload graphql

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

A schema built with separate SDL and resolvers (e.g. using makeExecutableSchema) requires the Upload scalar to be setup.

Usage

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.

See the example API and 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 where an error in one does not reject them all.
• Only use 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, Upload scalar 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 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.

API

Table of contents

• class GraphQLUpload
  • Examples
• function graphqlUploadExpress
  • Examples
• function graphqlUploadKoa
  • Examples
• function processRequest
  • Examples
• type FileUpload
• type GraphQLOperation
  • See
• type UploadOptions

class GraphQLUpload

A GraphQL Upload scalar that can be used in a GraphQLSchema. It’s value in resolvers is a promise that resolves file upload details for processing and storage.

Examples

Setup for a schema built with makeExecutableSchema.

import { makeExecutableSchema } from 'graphql-tools'
import { GraphQLUpload } from 'graphql-upload'

const typeDefs = `
  scalar Upload
`

const resolvers = {
  Upload: GraphQLUpload
}

export const schema = makeExecutableSchema({ typeDefs, resolvers })

A manually constructed schema with an image upload mutation.

import { GraphQLSchema, GraphQLObjectType, GraphQLBoolean } from 'graphql'
import { GraphQLUpload } from 'graphql-upload'

export const schema = new GraphQLSchema({
  mutation: new GraphQLObjectType({
    name: 'Mutation',
    fields: {
      uploadImage: {
        description: 'Uploads an image.',
        type: GraphQLBoolean,
        args: {
          image: {
            description: 'Image file.',
            type: GraphQLUpload
          }
        },
        async resolve(parent, { image }) {
          const { filename, mimetype, createReadStream } = await image
          const stream = createReadStream()
          // Promisify the stream and store the file, then…
          return true
        }
      }
    }
  })
})

---

function graphqlUploadExpress

Creates Express middleware that processes GraphQL multipart requests using processRequest, ignoring non-multipart requests. It sets the request body to be similar to a conventional GraphQL POST request for following GraphQL middleware to consume.

Parameter	Type	Description
options	UploadOptions	GraphQL upload options.

Returns: function — Express middleware.

Examples

Basic express-graphql setup.

import express from 'express'
import graphqlHTTP from 'express-graphql'
import { graphqlUploadExpress } from 'graphql-upload'
import schema from './schema'

express()
  .use(
    '/graphql',
    graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }),
    graphqlHTTP({ schema })
  )
  .listen(3000)

---

function graphqlUploadKoa

Creates Koa middleware that processes GraphQL multipart requests using processRequest, ignoring non-multipart requests. It sets the request body to be similar to a conventional GraphQL POST request for following GraphQL middleware to consume.

Parameter	Type	Description
options	UploadOptions	GraphQL upload options.

Returns: function — Koa middleware.

Examples

Basic graphql-api-koa setup.

import Koa from 'koa'
import bodyParser from 'koa-bodyparser'
import { errorHandler, execute } from 'graphql-api-koa'
import { graphqlUploadKoa } from 'graphql-upload'
import schema from './schema'

new Koa()
  .use(errorHandler())
  .use(bodyParser())
  .use(graphqlUploadKoa({ maxFileSize: 10000000, maxFiles: 10 }))
  .use(execute({ schema }))
  .listen(3000)

---

function processRequest

Processes a GraphQL multipart request. Used in graphqlUploadKoa and graphqlUploadExpress and can be used to create custom middleware.

Parameter	Type	Description
request	IncomingMessage	Node.js HTTP server request instance.
response	ServerResponse	Node.js HTTP server response instance.
options	UploadOptions?	GraphQL upload options.

Returns: Promise<GraphQLOperation | Array<GraphQLOperation>> — GraphQL operation or batch of operations for a GraphQL server to consume (usually as the request body).

Examples

How to import.

import { processRequest } from 'graphql-upload'

---

type FileUpload

File upload details, resolved from an Upload scalar promise.

Type: Object

Property	Type	Description
filename	string	File name.
mimetype	string	File MIME type. Provided by the client and can’t be trusted.
encoding	string	File stream transfer encoding.
createReadStream	function	Returns a Node.js readable stream of the file contents, for processing and storing the file. Multiple calls create independent streams. Throws if called after all resolvers have resolved, or after an error has interrupted the request.

---

type GraphQLOperation

A GraphQL operation object in a shape that can be consumed and executed by most GraphQL servers.

Type: Object

Property	Type	Description
query	string	GraphQL document containing queries and fragments.
operationName	string | null?	GraphQL document operation name to execute.
variables	object | null?	GraphQL document operation variables and values map.

See

• GraphQL over HTTP spec.
• Apollo Server POST requests.

---

type UploadOptions

GraphQL upload server options, mostly relating to security, performance and limits.

Type: Object

Property	Type	Description
maxFieldSize	number? = 1000000	Maximum allowed non-file multipart form field size in bytes; enough for your queries.
maxFileSize	number? = Infinity	Maximum allowed file size in bytes.
maxFiles	number? = Infinity	Maximum allowed number of files.

Changelog

8.0.5

Patch

• Updated dependencies.
• Handle invalid types in multipart fields and respond with meaningful HTTP 400 errors, via #139:
  • Invalid operations type.
  • Invalid map type.
  • Invalid map entry type.
  • Invalid map entry array item type.
• Additionally test current Node.js v8 and v10 versions with Travis.
• Reduced the size of the published package.json by moving dev tool config to files. This also prevents editor extensions such as Prettier and ESLint from detecting config and attempting to operate when opening package files installed in node_modules.
• Removed the watch dev dependency and watch script.
• Simplified the prepublishOnly script.
• Change to the classic TAP reporter for tests.
• Add apollo-server-koa and apollo-server-express back to the compatible environments list in the readme, now that they use the current version of this package.