Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File Upload Example? #960

Closed
appjitsu opened this issue Jul 20, 2017 · 7 comments

Comments

Projects
None yet
6 participants
@appjitsu
Copy link

commented Jul 20, 2017

I am trying to create a custom input type using vanilla graphql (ie: non-apollo).

ref: jaydenseric/graphql-upload#9

Got any examples for uploading files?

@papandreou

This comment has been minimized.

Copy link

commented Jul 20, 2017

@appjitsu, for an app I'm working on where I need to be able to receive multiple uploaded files as part of a mutation, I came up with the idea of accepting a multipart/form-data request where the first part is application/graphql and the subsequent ones are arbitrary files that are associated with the mutation.

The multipart/form-data handling is a piece of middleware, so it ought to be reusable. I've uploaded it here along with a very simple usage example: https://gist.github.com/papandreou/abd7b8f00f7bff699a06e21330a2004a

I have no idea if there's a better, more "official" way of achieving the same thing, though :)

@jaydenseric

This comment has been minimized.

Copy link

commented Jul 20, 2017

Perhaps not exactly what you are after since it does use Apollo, but you might find jaydenseric/apollo-upload-examples helpfull.

@robzhu

This comment has been minimized.

Copy link
Contributor

commented Sep 7, 2017

@appjitsu, please take a look at some of the suggestions for handling file upload. Closing this issue for, feel free to re-open if you believe it's unresolved.

@robzhu robzhu closed this Sep 7, 2017

@up9cloud

This comment has been minimized.

Copy link

commented Feb 10, 2018

memo for who wanna use other client with import { GraphQLUpload } from 'apollo-upload-server'

nodejs

import fs from 'fs'
import FormData from 'form-data'
import axios from 'axios'

let o = {
  query: `mutation ($file: Upload!) {
    uploadFile (file: $file)
  }`,
  variables: {
    file: null
  }
}
let map = {
  '0': ['variables.file']
}
let fd = new FormData()
fd.append('operations', JSON.stringify(o))
fd.append('map', JSON.stringify(map))
fd.append(0, fs.createReadStream(`${__dirname}/app.js`), 'app.js')

let res = await axios.post('/graphql', fd, {
  headers: {
    ...fd.getHeaders()
  }
})
expect(res.status).to.be.equal(200)
expect(res.data).to.be.jsonSchema(schema)
@zackify

This comment has been minimized.

Copy link

commented May 30, 2019

Thanks so much @up9cloud. This is a really weird api if you ask me. Thanks to you I was able to make a function that correctly makes the file map from a graphql variables object. Here it is in case this helps someone: https://github.com/zackify/react-uploader/blob/master/src/clients/graphql/create-file-map.js

@jaydenseric

This comment has been minimized.

Copy link

commented May 30, 2019

I no longer use Apollo on the server or client these days, and use just the vanilla GraphQL.js API.

There is a simple server side example of both approaches here:

https://github.com/jaydenseric/graphql-upload#class-graphqlupload

And the best reference for a client library that constructs a fetch request handling possible files is here:

https://github.com/jaydenseric/graphql-react/blob/1b1234de5de46b7a0029903a1446dcc061f37d09/src/universal/graphqlFetchOptions.mjs

An example of uploading a file from a server environment:

https://github.com/jaydenseric/graphql-upload/blob/9b49be4cc5012307e7a08deb6d08ec071a708d5d/src/test.mjs#L79

Alternatively, the GraphQL multipart request spec has example cURL requests:

https://github.com/jaydenseric/graphql-multipart-request-spec#curl-request

This is a really weird api if you ask me.

Rest assured, the spec has to be the way it is for good performance and to handle all sorts of situations like a client disconnecting half way through uploading several files, or using the same file as a variable in multiple mutations.

Only library authors really need to understand how it works; users of server and client implementations can take it for granted.

@zackify

This comment has been minimized.

Copy link

commented May 30, 2019

@jaydenseric thank you for the reply! The spec being that way now makes sense to me. Your client example helps a lot as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.