graphql-server-express-upload

Graphql Server Express file upload middleware. Used together with UploadNetworkInterface.

Usage

#### 1. Add graphqlExpressUpload middleware to your Express GraphQL endpoint

``
import { graphqlExpress, graphiqlExpress } from 'graphql-server-express'
import graphqlExpressUpload from 'graphql-server-express-upload'
import multer from 'multer'

import schema from './schema'

const upload = multer({
dest: config.tmp.path,
})

app.use('/graphql',
upload.array('files'),
// after multer and before graphqlExpress
graphqlExpressUpload({ endpointURL: '/graphql' }),
graphqlExpress((req) => {
return {
schema,
context: {}
}
})
)

app.use('/graphiql', graphiqlExpress({
endpointURL: '/graphql',
}))
`

#### 2. Add UploadedFile scalar to your schema

`
scalar UploadedFile
`

#### 3. Add UploadedFile resolver

For now we simply use JSON. In the future we should improve this.

`
const resolvers = {
UploadedFile: {
__parseLiteral: parseJSONLiteral,
__serialize: value => value,
__parseValue: value => value,
}
...
}

function parseJSONLiteral(ast) {
switch (ast.kind) {
case Kind.STRING:
case Kind.BOOLEAN:
return ast.value;
case Kind.INT:
case Kind.FLOAT:
return parseFloat(ast.value);
case Kind.OBJECT: {
const value = Object.create(null);
ast.fields.forEach(field => {
value[field.name.value] = parseJSONLiteral(field.value);
});

return value;
}
case Kind.LIST:
return ast.values.map(parseJSONLiteral);
default:
return null;
}
}
`

#### 4. Add mutation on the server

Schema definition

`
uploadProfilePicture(id: Int!, files: [UploadedFile!]!): ProfilePicture
`

And the mutation function

`
async uploadProfilePicture(root, { id, files }, context) {
// you can now access files parameter from variables
console.log('uploadProfilePicture', { id, files })
//...
}
`

#### 5. Add mutation on the client

Example using react-apollo. Don't forget that you need to be using UploadNetworkInterface, because apollo-client does not support multipart/form-data out of the box.

`
import React, { Component, PropTypes } from 'react'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'

class UploadProfilePicture extends Component {

onSubmit = (fields) => {
const { user, uploadProfilePicture } = this.props
// fields.files is an instance of FileList
uploadProfilePicture(user.id, fields.files)
.then(({ data }) => {
console.log('data', data);
})
.catch(error => {
console.log('error', error.message);
})
}

render() {
return (
//...
)
}

}

const ADD_SALON_RESOURCE_PICTURE = gql
mutation uploadProfilePicture($id: Int!, $files: [UploadedFile!]!) {
uploadProfilePicture(id: $id, files: $files) {
id url thumb square small medium large full
}
}

const withFileUpload = graphql(ADD_SALON_RESOURCE_PICTURE, {
props: ({ ownProps, mutate }) => ({
uploadProfilePicture: (id, files) => mutate({
variables: { id, files },
}),
}),
})

export default withFileUpload(UploadProfilePicture)
``