How to pass a file as a graphql variable? - file-upload

Question

How do I pass a file upload as a graphql mutation variable? Submitting this test gives me a 400 bad request with this error:
Variable \"$thumbnailFile\" got invalid value {}; Upload value invalid.
I am using graphql-upload. I am sending my queries like this:
async function graphQLFetch(query, variables = {}){
const response = await fetch('/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query, variables })
});
const body = await response.text();
const result = JSON.parse(body);
return result.data;
}
In my react component:
handleThumbnailChange(event){
const thumbnailFile = event.target.files[0];
const query = `mutation addThumbnailTest($thumbnailFile: Upload){
addThumbnailTest(thumbnailFile: $thumbnailFile){
thumbnailSrc
}
}`;
const data = await graphQLFetch(query, {
thumbnailFile
});
}
My schema:
scalar Upload
type Mutation {
addThumbnailTest(thumbnailFile: Upload): String
}
My server is setup like the following:
const { ApolloServer } = require('apollo-server-express');
const { GraphQLUpload, graphqlUploadExpress } = require('graphql-upload');
const express = require('express');
const resolvers = {
Upload: GraphQLUpload,
Mutation: {
handleThumbnailChange: handleThumbnailChange,
}
}
const server = new ApolloServer({
typeDefs: fs.readFileSync(path.join(__dirname, 'schema.graphql'), 'utf-8'),
resolvers
});
async function installHandler(app){
await server.start();
server.applyMiddleware({ app, path: '/graphql' });
}
const app = express();
(async function start(){
try{
// Install GraphQL API Handler
app.use(graphqlUploadExpress());
await installHandler(app);

Answer 1

I had to submit the query as form data and without the { 'Content-Type': 'application/json' } header
async function graphQLFetch(query, variables = {}, multipart = false){
let request;
if(multipart){
const data = {
operations: JSON.stringify({
query,
variables: {
...variables,
file: null
}
}),
map: JSON.stringify({
'0': [
'variables.file'
]
})
};
const requestBody = new FormData();
for(const name in data) {
requestBody.append(name, data[name]);
}
requestBody.append('0', variables.file);
request = {
method: 'POST',
body: requestBody
}
} else {
request = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query, variables })
}
}
const response = await fetch('/graphql', request);
const responseBody = await response.text();
const result = JSON.parse(responseBody);
return result.data;
}