I am currently working on a project where I need to upload files using a multipart request in Graphql. However, I have encountered an issue when creating an object of a class that contains a File - the file is not being uploaded. Strangely enough, if it is just an object without a class, the upload works perfectly fine.
For example, this code snippet works:
const upload = {
file: new File()
};
apollo.mutate({
mutation,
variables:{
fileParam: upload
}
});
But this code snippet does not work:
class FileWrapper{
constructor(public file: File){}
}
const upload = new FileWrapper(new File());
apollo.mutate({
mutation,
variables:{
fileParam: upload
}
});
To make it work with a class, you can try copying the object like so:
class FileWrapper{
constructor(public file: File){}
}
const upload = new FileWrapper(new File());
apollo.mutate({
mutation,
variables:{
fileParam: {...upload}
}
});
The packages I am using for this project are:
"nuxt": "^2.0.0",
"@nuxtjs/apollo": "^4.0.1-rc.1",
One thing I tried was replacing the standard HttpLink with createUploadLink as shown below:
return ApolloLink.from([
mutationTrackerLink(getModule(MutationTrackState, ctx.store), providerName),
queueLink,
serializingLink,
retryLink,
authLink,
createUploadLink({
uri: `${endpoint}/graphql`,
}),
]);
I also attempted to remove other links but ended up with the same result.