Upload Files With GraphQL, Apollo, and React-Native

React-Native: we need extra component: RNFetchBlob

With React-Native, it’s a little bit more complicated. It boils down to intercepting the outgoing request and changing it to be a multi-part form and injecting the file blob.

To trigger the action, you can include a special flag in your mutation that tells the code to treat the variable “file” as a file to upload.

in ReactJS web app we only need do this, because with web sites, browser helps out with setting up a multi-part form request.

Front end:

uploadFileToAndmap({

variables: {

file: photos[0]

}

})

.then(async ({ data }) => {})

.catch(error => setMessage(error.message))

GraphQL API:

uploadFileToAndmap: combineResolvers(

// isAuthenticated,

async (parent, args, { models }) => {

const { file } = await args

const { createReadStream, filename, mimetype, encoding } = await file

const stream = createReadStream()

const result = await RestAPI.uploadFileToAndmap(filename, stream)

return result

}

),