GraphiQL - upload file

Question

How can we upload files using in-browser GraphQL IDE GraphiQL, is that even possible ? (apart from base64 encoded string)

Once I have the file stream / file contents I can create a mulipart request and store on DB or some object-storage service. But I am not able to figure it out how to provide the file input / how the schema would look like. Is it better to use graphql-upload with Curl request. Please suggest which is the optimal solution.

score 39 · Answer 1 · answered Dec 13 '19 at 16:35

39

I was able to upload a file in my mutation input using Altair. You can use the Add files button to upload a file, then use the upload name on your mutation.

answered Dec 13 '19 at 16:35

p8ul

2,212
19
19

Cool! I consumed much time to find this solution. I use Altair extension, which is really awesome! Thanks, @p8ul! – iconique Oct 31 '20 at 08:41
You are welcome @TaiJinYuan. Happy coding. – p8ul Dec 31 '20 at 15:58
1

Can someone help me? After doing the above and writing scalar and resolvers for that I'm getting this error. """graphql.error.graphql_error.GraphQLError: Operation data should be a JSON object""" Need help on server-side implementation. – Sagar Wankhede Jun 27 '21 at 10:45
This answer should be accepted as a solution for the question. @p8ul you save my day, lol. – Andrii Aug 19 '22 at 11:16

score 16 · Answer 2 · answered May 19 '19 at 10:14

16

Guys just try Altair, saved me a lot of trouble and time. It has extension for chrome too, just like Apollo playground or graphiql, but with file upload option underneath the variables option.

answered May 19 '19 at 10:14

Amaar Hassan

338
2
7

2

Could you provide an example with Altair? – Roman S. Nov 21 '19 at 12:57
1

Here's an article explaining how to use it. https://sirmuel.design/working-with-file-uploads-using-altair-graphql-d2f86dc8261f – Samuel Imolorhe Feb 18 '20 at 22:23

score 13 · Answer 3 · answered Jan 17 '19 at 15:32

Currently GraphIQL does not support file uploads. You can use an API tool to do this such as Postman, Insomnia or plan old cURL. The important distinction is that it needs to be a multi-part form upload.

Example request:

curl --request POST \
  --url http://localhost:4000/ \
  --header 'accept: application/json' \
  --header 'accept-encoding: gzip, deflate, br' \
  --header 'connection: keep-alive' \
  --header 'dnt: 1' \
  --header 'origin: http://localhost:4000' \
  --form 'operations={"query": "mutation UploadFile($file: Upload!) {  uploadFile(file: $file)}",   "variables": { "file": null } }' \
  --form 'map={ "nFile": ["variables.file"] }' \
  --form nFile=@/tmp/testfile

Substitute /tmp/testfile in the request above with a path to the file you want to upload.

GraphiQL - upload file

3 Answers3