How can I upload file in Apollo server V4

There’s a great blog post by Apollo on Apollo file uploads here, essentially they recommend using a 3rd party image service or pre-signed upload urls (e.g. fetch a pre-signed url via graphql, upload the image directly to that url, then save the location / id of the image through a graphql mutation).

There is a standard for uploading images through a graphql request, although Apollo don’t recommend it, but the most popular Node.js package to help with this is graphql-upload.

To get this working with Apollo 4 and Express (if this is what you’re using), you’ll need to follow their instructions for using express middleware here.

Note that Apollo will block "simple" CORS requests to prevent CSRF attacks, which is likely to affect your image upload, so you need to follow the instructions here to include additional headers in your request or disable CSRF protection (not recommended). You can see an example of this by excluding the Apollo-Require-Preflight header from the CURL request below.

Here’s a minimal example of graphql upload in codesandbox.

And a CURL request to test it

$ curl https://2nnbw4-4000.csb.app/ 
  -F operations='{ "query": "mutation ($id: String!, $image: Upload!) { uploadImage(id: $id, image: $image) { id filename } }", "variables": { "image": null, "id": "1" } }' 
  -F map='{ "0": ["variables.image"] }' 
  -F [email protected] 
  -H 'Apollo-Require-Preflight: true'

{"data":{"uploadImage":{"id":"1","filename":"tmp.jpg"}}}

In the response section of the Upload request to Cloudinary, you will receive the URL in the key: url.

Sample response: https://cloudinary.com/documentation/image_upload_api_reference#upload_response

You would be able to save this to your database through GraphQL. I’m not sure where you’re stuck ( is the Apollo server connected to the DB? ) but I would advise looking up some guides on how to store data utilizing Apollo/GraphQL.

https://www.apollographql.com/tutorials/fullstack-quickstart/connecting-to-data-sources
https://hasura.io/learn/graphql/intro-graphql/graphql-mutations/

Just in case someone needs this:
A simple workaround for image upload is to convert the image to base64 string at the frontend and send it like any other string. At the backend, you can then save it back as an image.