apollographql / apollographql/apollo-server

Apollo Playground incorrectly formats form-data when using many Uploads

Open
#7,610 6 comments 0 reactions 0 assignees View on GitHub
🛰️ Explorer / Sandbox
Dominant language
TypeScript
Stars
14k
Forks
2k
Avg merge
2d 14h
Merged PRs (30d)
2

Description

### Issue Description

When trying to implement a complex mutation that would combine multiple graphql-upload files I noticed that the Playground was incorrectly formatting form-data making it impossible for the server to understand what i wanted. I have provided a playground which covers most use cases with trying to upload files with GraphQL.

I am especially interested in tests 7 and 8 because they seem like they should work.
Other tests seem to fail because Playground prefixes file variables with index thinking it is a batch operation.
If i manually remove those prefixes the server is able to process the request.
Here is example of doing test 11 in Postman
[Postman Screenshot](https://pasteboard.co/3p8NYyXLM6BN.png)
I have also tested in Altair Client and it works aswell
[Altair Screenshot](https://pasteboard.co/0cLVx0L8ZGSb.png)

Maybe I am misunderstanding some kind of a limitation but I hope my tests will be useful in fixing this issue.
Ideally I was looking towards test 14 working because it would come extremely handy for example for user registration which includes a combination of required and optional single files and required and optional multi files as well as normal fields.
Thank You.

### Link to Reproduction

https://codesandbox.io/p/sandbox/quirky-alex-kjwhvx

### Reproduction Steps

Open the sandbox and execute test mutations using the apollo playground.
Upload any test files depending on what the test is for.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the upload mutations in the linked CodeSandbox through Apollo Playground, focusing on tests 7, 8, 11, and 14, then compare the generated form-data with the working Postman and Altair examples. Done means the server can process the intended combinations of required, optional, single, and multiple uploads without incorrect index prefixes.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, typescript
Domain
api, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.