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.

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
– Jest Games, Commented Nov 3, 2020 at 7:31
does this server support graphql upload properly ? ... mutation should have return type/fields defined — xadm
– 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
– Jest Games, Commented Nov 3, 2020 at 7:40
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
– Jest Games, Commented Nov 3, 2020 at 8:10

Jest Games · Accepted Answer · 2020-11-03 08:34:13Z

15

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 😊

answered Nov 3, 2020 at 8:34

Jest Games

4751 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mats Over a year ago

I'm trying the same thing but get the error: "POST body missing. Did you forget use body-parser middleware?". Did you run into that?

Masoud · Accepted Answer · 2022-01-16 08:54:12Z

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.

Shadee Merhi · Accepted Answer · 2022-02-03 22:47:33Z

1

In addition to the ApolloServer implementation described in the accepted answer (and to clarify @Masoud 's answer), make sure you also have the following client implementation using apollo-upload-client:

import { ApolloClient, InMemoryCache } from "@apollo/client";
import { createUploadLink } from 'apollo-upload-client';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: createUploadLink({
      uri: 'http://localhost:4000/graphql'
  }),
});

edited Feb 3, 2022 at 22:47

answered Feb 3, 2022 at 5:24

Shadee Merhi

3334 silver badges15 bronze badges

Comments

Joe Seifi · Accepted Answer · 2023-05-25 02:47:38Z

-1

In addition, try to make sure csrfPrevention is not set to true in your ApolloServer config

  const server = new ApolloServer({
    typeDefs,
    resolvers,
    csrfPrevention: false, // if this is set to true, uploads will fail
    uploads: false,
    cache: "bounded",
    plugins: [ApolloServerPluginLandingPageLocalDefault({ embed: true })],
  });

answered May 25, 2023 at 2:47

Joe Seifi

1,7451 gold badge15 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related