Question about 'Upload value invalid' error.

Hi! I’m sorry if this is not the best way for adding this, please direct me to a better place if that’s the case. I followed your implementation for adding Upload capabilities to an existing application. The code uses the GraphQLUpload and FileUpload classes, and the mutation looks something like this:

@typeGraphql.Mutation(() => Boolean)
    async addProfilePicture(
        @typeGraphql.Arg("picture", () => GraphQLUpload)
        {
        createReadStream,
        filename
        }: FileUpload): Promise<boolean> {
      return new Promise(async (resolve, reject) =>
        createReadStream()
          .pipe(createWriteStream(__dirname + `/../../../images/${filename}`))
          .on("finish", () => resolve(true))
          .on("error", () => reject(false))
      );
    }

In Postman I have the following body:

operations:{"query":"mutation addProfilePicture($picture: Upload!) {addProfilePicture(picture: $picture)}", "variables": {"picture": null}}
map:{"0":["variables.picture"]}

and a local file added in the ‘0’ field.

when running a query with Postman, I get the error:

Variable \"$picture\" got invalid value {}; Expected type Upload. Upload value invalid

I’ve been at this for 3 days already. could use a bit of help…

[thachp]

@flashcrow2000 It took me a while to solve this problem. Give this a try… it worked for me. I’m using Node 15, NestJS Graphql

1. Add to package.json

    "resolutions": {
        "graphql-upload": "^11.0.0"
    },

1. Check to make sure that there is only one graphql-upload folder under your node_modules. I used yarn why, and manually checked dir node_modules/apollo-server-core/node_modules. There should only be three visible dir under it … (apollo-graphql, apollo-server-types and graphql-tools)

yarn why v1.22.4
[1/4] Why do we have the module "graphql-upload"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "graphql-upload@11.0.0"
info Reasons this module exists
   - "apollo-server-core" depends on it
   - Hoisted from "apollo-server-core#graphql-upload"
   - Hoisted from "@nestjs#graphql#apollo-server-core#graphql-upload"
info Disk size without dependencies: "1.19MB"
info Disk size with unique dependencies: "2.27MB"
info Disk size with transitive dependencies: "3.33MB"
info Number of shared dependencies: 18
Done in 0.80s.

1. If you are using ApolloClient, make sure that you include the createUploadLink…

import { createUploadLink } from "apollo-upload-client";
...
export const gclient = new ApolloClient({
    cache: new InMemoryCache(),
    link: createUploadLink(),    
    uri: "/graphql"
});

1. When filing your input variables, make sure that the file input value is type File or Blob. https://github.com/jaydenseric/graphql-upload/issues/185#issuecomment-583572804

[masoudit]

Hi, 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.