File uploads

Enabling file uploads in Apollo Server

You can add file upload support to Apollo Server via the third-party graphql-upload library. This package provides support for the multipart/form-data content-type.

New in Apollo Server 3: Apollo Server 3 does not contain a built-in integration with graphql-upload like in Apollo Server 2. Instead, the instructions below show how to integrate it yourself. You cannot do this with the "batteries-included" apollo-server library; you must use a web framework integration such as apollo-server-express instead. This page shows how to integrate graphql-upload with Express and Fastify. To implement similar functionality with another Node.js HTTP framework (e.g., Koa), see the graphql-upload documentation for more information. Some integrations might need to use graphql-upload's processRequest directly.

Integrating with Express

index.ts

1
const express = require('express');
2
const { ApolloServer, gql } = require('apollo-server-express');
3
const {
4
  GraphQLUpload,
5
  graphqlUploadExpress, // A Koa implementation is also exported.
6
} = require('graphql-upload');
7
const { finished } = require('stream/promises');
8

9
const typeDefs = gql`
10
  # The implementation for this scalar is provided by the
11
  # 'GraphQLUpload' export from the 'graphql-upload' package
12
  # in the resolver map below.
13
  scalar Upload
14

15
  type File {
16
    filename: String!
17
    mimetype: String!
18
    encoding: String!
19
  }
20

21
  type Query {
22
    # This is only here to satisfy the requirement that at least one
23
    # field be present within the 'Query' type.  This example does not
24
    # demonstrate how to fetch uploads back.
25
    otherFields: Boolean!
26
  }
27

28
  type Mutation {
29
    # Multiple uploads are supported. See graphql-upload docs for details.
30
    singleUpload(file: Upload!): File!
31
  }
32
`;
33

34
const resolvers = {
35
  // This maps the `Upload` scalar to the implementation provided
36
  // by the `graphql-upload` package.
37
  Upload: GraphQLUpload,
38

39
  Mutation: {
40
    singleUpload: async (parent, { file }) => {
41
      const { createReadStream, filename, mimetype, encoding } = await file;
42

43
      // Invoking the `createReadStream` will return a Readable Stream.
44
      // See https://nodejs.org/api/stream.html#stream_readable_streams
45
      const stream = createReadStream();
46

47
      // This is purely for demonstration purposes and will overwrite the
48
      // local-file-output.txt in the current working directory on EACH upload.
49
      const out = require('fs').createWriteStream('local-file-output.txt');
50
      stream.pipe(out);
51
      await finished(out);
52

53
      return { filename, mimetype, encoding };
54
    },
55
  },
56
};
57

58
async function startServer() {
59
  const server = new ApolloServer({
60
    typeDefs,
61
    resolvers,
62
    csrfPrevention: true,
63
  });
64
  await server.start();
65

66
  const app = express();
67

68
  // This middleware should be added before calling `applyMiddleware`.
69
  app.use(graphqlUploadExpress());
70

71
  server.applyMiddleware({ app });
72

73
  await new Promise<void>(r => app.listen({ port: 4000 }, r));
74

75
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`);
76
}
77

78
startServer();

Integrating with Fastify

1
const { ApolloServer, gql } = require('apollo-server-fastify');
2
const { GraphQLUpload, processRequest } = require('graphql-upload');
3
const { finished } = require('stream/promises');
4

5
const typeDefs = gql`
6
  # The implementation for this scalar is provided by the
7
  # 'GraphQLUpload' export from the 'graphql-upload' package
8
  # in the resolver map below.
9
  scalar Upload
10

11
  type File {
12
    filename: String!
13
    mimetype: String!
14
    encoding: String!
15
  }
16

17
  type Query {
18
    # This is only here to satisfy the requirement that at least one
19
    # field be present within the 'Query' type.  This example does not
20
    # demonstrate how to fetch uploads back.
21
    otherFields: Boolean!
22
  }
23

24
  type Mutation {
25
    # Multiple uploads are supported. See graphql-upload docs for details.
26
    singleUpload(file: Upload!): File!
27
  }
28
`;
29

30
const resolvers = {
31
  // This maps the `Upload` scalar to the implementation provided
32
  // by the `graphql-upload` package.
33
  Upload: GraphQLUpload,
34

35
  Mutation: {
36
    singleUpload: async (parent, { file }) => {
37
      const { createReadStream, filename, mimetype, encoding } = await file;
38

39
      // Invoking the `createReadStream` will return a Readable Stream.
40
      // See https://nodejs.org/api/stream.html#stream_readable_streams
41
      const stream = createReadStream();
42

43
      // This is purely for demonstration purposes and will overwrite the
44
      // local-file-output.txt in the current working directory on EACH upload.
45
      const out = require('fs').createWriteStream('local-file-output.txt');
46
      stream.pipe(out);
47
      await finished(out);
48

49
      return { filename, mimetype, encoding };
50
    },
51
  },
52
};
53

54
const app = require('fastify')({
55
  logger: true
56
});
57

58
const start = async () => {
59
  try {
60
    // Handle all requests that have the `Content-Type` header set as multipart
61
    app.addContentTypeParser('multipart', (request, payload, done) => {
62
      request.isMultipart = true;
63
      done();
64
    });
65

66
    // Format the request body to follow graphql-upload's
67
    app.addHook('preValidation', async function (request, reply) {
68
      if (!request.isMultipart) {
69
        return;
70
      }
71

72
      request.body = await processRequest(request.raw, reply.raw);
73
    });
74

75
    const server = new ApolloServer({
76
      typeDefs,
77
      resolvers,
78
      csrfPrevention: true,
79
    });
80

81
    // Start Apollo Server
82
    await server.start();
83

84
    app.register(server.createHandler());
85
    await app.listen(3000);
86
  } catch (err) {
87
    app.log.error(err);
88
    process.exit(1);
89
  }
90
};
91

92
start();

Edit on GitHub

Error handling

Subscriptions