An interoperable multipart form field structure for GraphQL requests, used by various file upload client/server implementations.

It’s possible to implement:

• Files nested anywhere within operations (typically in variables).
• Batched operations.
• File deduplication.
• File upload streams in resolvers.
• Aborting file uploads in resolvers.

An “operations object” is an Apollo GraphQL POST request (or array of requests if batching). An “operations path” is an object-path string to locate a file within an operations object.

So operations can be resolved while the files are still uploading, the fields are ordered:

1. operations: A JSON encoded operations object with files replaced with null.
2. map: A JSON encoded map of where files occurred in the operations. For each file, the key is the file multipart form field name and the value is an array of operations paths.
3. File fields: Each file extracted from the operations object with a unique, arbitrary field name.

{
  query: '…',
  operationName: 'updateAvatar',
  variables: {
    userId: '…',
    image: File
  }
}

1. operations: {"query": "…", "operationName": "updateAvatar", "variables": {"userId": "…", image: null}}
2. map: {"1": ["variables.image"]}
3. 1: File

{
  query: '…',
  operationName: 'addToGallery',
  variables: {
    galleryId: '…',
    images: [File, File, File]
  }
}

1. operations: {"query": "…", "operationName": "addToGallery", "variables": {"galleryId": "…", images: [null, null, null]}}
2. map: {"1": ["variables.images.0"], "2": ["variables.images.1"], "3": ["variables.images.2"]}
3. 1: File
4. 2: File
5. 3: File

[
  {
    query: '…',
    operationName: 'updateAvatar',
    variables: {
      userId: '…',
      image: File
    }
  },
  {
    query: '…',
    operationName: 'addToGallery',
    variables: {
      galleryId: '…',
      images: [File, File, File]
    }
  }
]

1. operations: [{"query": "…", "operationName": "updateAvatar", "variables": {"userId": "…", image: null}}, {"query": "…", "operationName": "addToGallery", "variables": {"galleryId": "…", images: [null, null, null]}}]
2. map: {"1": ["0.variables.image", "variables.images.0"], "2": ["variables.images.1"], "3": ["variables.images.2"]}
3. 1: File
4. 2: File
5. 3: File

• apollo-upload-server
• apollo-upload-client
• apollo-fetch-upload
• extract-files