"Must provide Document" Error

[Tjark-Kuehl]

Hi there,
today I was trying to implement a Avatar Upload system for user profiles.
So I came across apollo-upload server and client.
After implementing it like shown in the examples I'm getting this error and dont know how to solve it
Error: Must provide document at invariant (/Users/tjarkkuehl/Desktop/semtexxx.de-website/server/node_modules/graphql/jsutils/invariant.js:18:11) at Object.validate (/Users/tjarkkuehl/Desktop/semtexxx.de-website/server/node_modules/graphql/validation/validate.js:58:34) at doRunQuery (/Users/tjarkkuehl/Desktop/semtexxx.de-website/server/node_modules/apollo-server-express/node_modules/apollo-server-core/src/runQuery.ts:143:30) at /Users/tjarkkuehl/Desktop/semtexxx.de-website/server/node_modules/apollo-server-express/node_modules/apollo-server-core/src/runQuery.ts:69:39 at <anonymous>

Server Setup

Index

import { apolloUploadExpress } from 'apollo-upload-server'

app.use(
    '/graphql',
    bodyParser.json(),
    apolloUploadExpress({uploadDir: './user_upload/'})
)

Schema

input Upload {
    name: String!
    type: String!
    size: Int!
    path: String!
}

type Mutation {
    uploadAvatar(file: Upload!) : Boolean!
}

Resolver

uploadAvatar: (parent, args, context) => {
    console.log('Worked!')
    return true
}

Client Setup

Index

import { createUploadLink } from 'apollo-upload-client'

const link = createUploadLink({
    uri: `http://${config.graphqlAddress}:${config.graphqlPort}/graphql`
})

export const apolloClient = new ApolloClient({
    link: from([
        link,
        authMiddleware,
        authAfterware
    ]),
    cache: new InMemoryCache(),
    connectToDevTools: true
})

Profile.vue

<input class="select_file_action"
                           type="file"
                           @change="tryChangeAvatar($event)">

this.$apollo.provider.defaultClient.mutate({
    mutation: gql`
    mutation ($file: Upload!) {
        uploadAvatar(file: $file)
    }`,
    variables: {
        file: target.files[0]
    }
})

[jaydenseric]

I have not seen this error before 🤔

To start with, it's always good to confirm the right version of node is running.

Is graphqlExpress() really missing in the middleware, or is that just a copy-paste error?

[Tjark-Kuehl]

@jaydenseric
I'm running Node Version 8.5.0 and this is how my complete server imports look like

import connect from 'connect'
import cors from 'cors'
import bodyParser from 'body-parser'
import { execute, subscribe } from 'graphql'
import { graphqlConnect, graphiqlConnect } from 'apollo-server-express'
import { SubscriptionServer } from 'subscriptions-transport-ws'
import { apolloUploadExpress } from 'apollo-upload-server'
import { createServer } from 'http'
import jwt from 'jsonwebtoken'
import helmet from 'helmet'

Do you think it might be a problem with express ? So that I cant upload a file because I'm not allowed to

------WebKitFormBoundaryW8XEadWqdlwIbU7l
Content-Disposition: form-data; name="operations"

{"operationName":null,"variables":{},"query":"mutation ($file: Upload!) {\n  uploadAvatar(file: $file)\n}\n"}
------WebKitFormBoundaryW8XEadWqdlwIbU7l
Content-Disposition: form-data; name="variables.file"; filename="Screen Shot 2017-11-13 at 17.07.20.png"
Content-Type: image/png


------WebKitFormBoundaryW8XEadWqdlwIbU7l--

This is the XHR Request from the client.
Should it look like this ? Other Mutations had variables in it so it might be a incompatibility with vue-apollo

And do I need to use graphqlExpress? because I'm using apollo-server-express instead

[jaydenseric]

The request looks ok.

It looks like you are not using express. I don't know how your middleware fits together in this situation.

If you add a custom debug middleware right between apolloUploadExpress and Apollo server, what does the re-assembled request look like?

[jaydenseric]

Closing because the issue is currently not reproducible, and the entire API is about to change anyway.

Feel free to continue the discussion if anything comes to light 🙂