Handbook
Other integrations
GraphQL Upload

GraphQL Upload

This example has two independent services that are stitched together into a single gateway schema. It uses Schema Extensions to add some local type definitions and resolvers.

This example demonstrates:

Sandbox

You can also see the project on GitHub here (opens in a new tab).

The following services are available for interactive queries:

Summary

Visit the stitched gateway and try running the following query:

query {
  readFile(name: "yoga.png") {
    name
    type
    resizedBase64(width: 720, height: 405)
  }
}

In this example query, readFile of Upload Files subservice is called to read the file from the disk and resizedBase64 of Resize Images subservice is called to resize the image. In our additional resolver we take base64 representation of the file from the Upload Files subservice and pass it to the Resize Images subservice like below;

Created file object is passed to Resize Images as a file upload under the hood;

    resolvers: {
      FileEntry: {
        resizedBase64: {
          // We ask required fields to create a `File` instance
          selectionSet: `{ name type base64 }`,
          resolve(
            { name, type, base64 }: { name: string; type: string; base64: string },
            { width, height },
            context,
            info
          ) {
            if (!type.startsWith('image/')) {
                throw new GraphQLError('File is not an image');
            }
            const buffer = Buffer.from(base64, 'base64');
            const file = new File([buffer], name, { type });
            return delegateToSchema({
              schema: resizeImagesSubschema,
              fieldName: 'resizeImage',
              args: {
                file,
                width,
                height,
              },
              context,
              info,
            });
          },
        },
      },
    },

Upload a File from the gateway

Run the following command from the terminal to upload the file file.txt. To learn more, visit graphql-multipart-request-spec (opens in a new tab)

curl localhost:4000/graphql \
  -F operations='{ "query": "mutation($file: File!) { uploadFile(input: $file) { name type text } }", "variables": { "file": null } }' \
  -F map='{ "0": ["variables.file"] }' \
  -F 0=@graphql-upload/file.txt
 
# output
# {"data":{"uploadFile":{"filename":"file.txt","mimetype":"text/plain","text":"test file but not image\n"}}}