Variable "$file" got invalid value {}; Upload value invalid

Question

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.

Answer 1

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 😊

Answer 2

it depends on ApolloClient that you used.

1- If used import { ApolloClient } from 'apollo-client' must be used "createUploadLink" instead of "createHttpLink "means,

import { createUploadLink } from 'apollo-upload-client'
const httpLink = createUploadLink({
  uri: httpEndpoint,
})

2- if used createApolloClient, exact this package:

import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'
const { apolloClient, wsClient } = createApolloClient({
    ...defaultOptions,
    ...options,
  })
``
You do not need to set anything and Upload work complete.