File uploads using GraphQL don’t seem to be a common thing. On some places people suggest to simply create an endpoind besides your GraphQL-endpoint to POST files to, which returns an URL of the uploaded file. Then you can use this URL in your GraphQL mutation and store it on the server.
However, I like the idea of having a single endpoint for all of my API. This is why I wanted my GraphQL server to handle uploads. Turnsout, you can send arbitrary data with any GraphQL-request. So instead of sending a regular POST-request, you can send a multipart-request. GraphQL needs a multipart field called query, but other than that you can easily transmit your files as part of this multipart-request.
Using graphQL.js on the server side the changes are pretty simple. We need to read the file(s) from the multipart-request, for example using multer middleware. The file(s) will then be available on the request object, which can be passed into context and processed in the resolve function:
The resolve function can for example upload the file to the CDN and return the URL.
This network interface iterates over the request’s variables and looks for a File object. All files are added to the request and the variables are then replaced with a random string that refers to the field name of the file in the multipart-request.