I am using GraphQLClient from graphql-request to send requests to my server. I am trying to upload a file by doing the following:

const graphQLClient = new GraphQLClient('http://localhost:4000/graphql', {
    credentials: 'include',
    mode: 'cors',
});
const source = gql`
    mutation uploadImage($file: Upload!) {
        uploadImage(file: $file)
    }
`;
const file: RcFile = SOME_FILE; // RcFile (from antd) extends File
await graphQLClient.request<{uploadImage: boolean}>(source, { file });

However, when I send a request to my server this way I get the following error:

GraphQLError: Variable \"$file\" got invalid value {}; Upload value invalid

This is what my request looks like in the console:

operations: {
    "query":"\n mutation uploadProfileImage($file: Upload!){\n uploadProfileImage(file: $file)\n }\n",  
    "variables":{"file":null}
}
map: {"1":["variables.file"]}
1: (binary)

Has anyone else had this issue? I can't seem to upload a file to my backend.

I am using GraphQLClient from graphql-request to send requests to my server. I am trying to upload a file by doing the following:

const graphQLClient = new GraphQLClient('http://localhost:4000/graphql', {
    credentials: 'include',
    mode: 'cors',
});
const source = gql`
    mutation uploadImage($file: Upload!) {
        uploadImage(file: $file)
    }
`;
const file: RcFile = SOME_FILE; // RcFile (from antd) extends File
await graphQLClient.request<{uploadImage: boolean}>(source, { file });

However, when I send a request to my server this way I get the following error:

GraphQLError: Variable \"$file\" got invalid value {}; Upload value invalid

This is what my request looks like in the console:

operations: {
    "query":"\n mutation uploadProfileImage($file: Upload!){\n uploadProfileImage(file: $file)\n }\n",  
    "variables":{"file":null}
}
map: {"1":["variables.file"]}
1: (binary)

Has anyone else had this issue? I can't seem to upload a file to my backend.

• javascript
• node.js
• file-upload
• graphql
• antd

• console.log(file) ? – xadm Commented Nov 3, 2020 at 7:25
• File { uid: "rc-upload-1604388578610-2", name: "images.jpg", lastModified: 1604388587004, lastModifiedDate: Tue Nov 03 2020 01:29:47 GMT-0600 (Central Standard Time), webkitRelativePath: "", name: "images.jpg" size: 4040 type: "image/jpeg" uid: "rc-upload-1604388578610-2" webkitRelativePath: "" – Jest Games Commented Nov 3, 2020 at 7:31
• does this server support graphql upload properly ? ... mutation should have return type/fields defined – xadm Commented Nov 3, 2020 at 7:37
• I am using typegraphql and graphql-upload on my backend: @Mutation(() => Boolean) async uploadImage( @Arg('file', () => GraphQLUpload) upload: UploadType): Promise<boolean> { ... } – Jest Games Commented Nov 3, 2020 at 7:40
• 1 It seems to be happening on postman as well! "Variable \"$file\" got invalid value {}; Upload value invalid.". I tried changing ApolloServer to have { uploads: false } in it's configuration and now I get POST body missing. Did you forget use body-parser middleware? – Jest Games Commented Nov 3, 2020 at 8:10

4 Answers 4

I fixed the issue by setting the uploads option to false in the ApolloServer configuration.

new ApolloServer({ schema, context, uploads: false })

And then using the graphqlUploadExpress() middleware from graphql-upload.

app.use(graphqlUploadExpress({ maxFileSize: 10000, maxFiles: 10 }));

Hopefully this helps anyone who runs into the same issue I did