Expected type "Upload". Upload value invalid.

Issue

When uploading a file:

// what the file looks like when it is given to the mutation on the client side (copied and pasted this from the console)
{
  lastModified: 1621800013047,
  lastModifiedDate: Mon May 24 2021 08:00:13 GMT+1200 (New Zealand Standard Time) {},
  name: "avatar",
  size: 1083999,
  type: "image/png",
  webkitRelativePath: "",
  __proto__: File
}

using graphql-upload, I get back an error:

Variable "$file" got invalid value
{
  resolve: [function],
  reject: [function],
  promise: {},
  file: {
    filename: "avatar",
    mimetype: "image/png",
    encoding: "7bit",
    createReadStream: [function createReadStream]
  }
};
Expected type "Upload". Upload value invalid.

Stack:

NOTE: this isnt the exact code, ive just simplified these down a bit to include the important bits

Client side

import { ApolloClient } from '@apollo/client' // v3.3.19
import { createUploadLink } from 'apollo-upload-client' // v15.0.0

const PORT = '18087'
const httpEndpoint = 'http://localhost:${PORT}/graphql'

export function createProvider () {
  const apolloClient = new ApolloClient({
    // ....
    link: createUploadLink({ uri: httpEndpoint })
  })

  const apolloProvider = new VueApollo({
    defaultClient: apolloClient
  })

  return apolloProvider
}

Server side

// typeDefs

scalar Upload

type Mutation {
  uploadFile(file: Upload!): Blob
}

// resolvers
const { Upload } = require('graphql-upload')

{
  Mutation: {
    uploadFile: (_, { file }) => postUploadFile(file)
  },
  Upload
}

const express = require('express') // v4.17.1
const { graphqlHTTP } = require('express-graphql') // v0.12.0
const { graphqlUploadExpress } = require('graphql-upload') // v12.0.0, graphql=v15.5.0
const cors = require('cors') // v2.8.5
const { buildFederatedSchema } = require('@apollo/federation') // v0.19.1

const app = express()
    app.use(cors())

const schema = buildFederatedSchema([
  // different typeDef + resolvers, one including graphql-upload
])

const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB
app.use(
  '/graphql',
  graphqlUploadExpress({ maxFileSize: MAX_FILE_SIZE, maxFiles: 10 }),
  graphqlHTTP({
    schema,
    // context,
    graphiql: true
  }
)

const httpServer = http.createServer(app)


// ... starts server

We found that the issue came from the parseValue part of the Upload scalar:

https://github.com/jaydenseric/graphql-upload/blob/bdb5f808e0d514c28c0f59c1abd71680aba29bae/public/GraphQLUpload.js#L82

We just added a temporary fix that doesn’t check: if (value instanceof Upload) return value.promise; and does this instead: return value.promise

Tried looking at the tests in this module and many other ones, but couldnt find a good example of a test that shows what value should look like.

Apologies if this isnt the right module to post this!

Other details

• node v14.16.1
• npm v7.11.2

[jaydenseric]

It looks like the Upload scalar JS is not setup correctly; it appears you’re using:

const { Upload } = require('graphql-upload');

When it should be:

const { GraphQLUpload } = require('graphql-upload');

See:

https://github.com/jaydenseric/graphql-upload#class-graphqlupload

As a side note, it’s a good idea to always use deep imports when they are available:

const GraphQLUpload = require('graphql-upload/public/GraphQLUpload.js');

This way only exactly the JS you need in a given context loads into memory, and if you ever bundle that code you won’t rely on slow and unreliable “tree-shaking”.

[jaydenseric]

Closing because I don’t think anything is actionable here, but feel free to continue the conversation or share tips for anyone else in the same boat.