undefined properties when uploading using apollo-server-express

I’ve been trying to add the upload feature to our graphql endpoint. We manage to hit the graphql mutation but the file stream is undefined. I can see on the developer tools that nothing is being sent in the request body which is odd. A console.log on the mutation server side renders { preview: ‘blob:http://localhost:3000/ba021b5c-57e6-4fba-b574-a4933250b0c2’ } and nothing else.

stream, filename, mimetype, encoding are all undefined.

Mutation Field

uploadFile: {
    type: UploadType,
    args: {
      file: {
        type: GraphQLUpload
      }
    },
    async resolve(_, { file }) {
      const { stream, filename, mimetype, encoding } = await file;
      console.log(file);
      return {
        stream,
        filename,
        mimetype,
        encoding
      };
    }
  }

Object Type

const {
  GraphQLObjectType,
  GraphQLString
} = require('graphql');

const UploadType = new GraphQLObjectType({
  name: 'UploadType',
  fields: () => ({
    filename: {
      type: GraphQLString
    },
    mimetype: {
      type: GraphQLString
    },
    encoding: {
      type: GraphQLString
    }
  })
});

module.exports = UploadType;

Mutation

const UPLOAD_FILE = gql`
	mutation uploadFile($file: Upload!) {
		uploadFile(file: $file) {
			filename
		}
	}
`;

Mutation Component

<Mutation mutation={UPLOAD_FILE}>
  {uploadFile => ( ... )}
</Mutation>

[mike-marcacci]

Aah, that’s interesting. This is probably something we should clarify in our docs – that if your query accepts an Upload rather than a (non-null) Upload! the argument can be null instead of a Promise.

Glad you figured out the issue with apollo-boost!

[indieocean]

Update: I managed to remove apollo-boost that was the issue they don’t provide the upload feature on it or at least I cant find how to enable it anywhere. I managed to get it to work with the following config.

import React, { Component } from 'react';
import { ApolloProvider } from 'react-apollo';
import routes from './routes';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';
import { createUploadLink } from 'apollo-upload-client'

const client = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors)
        graphQLErrors.map(({ message, locations, path }) =>
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
          ),
        );
      if (networkError) console.log(`[Network error]: ${networkError}`);
    }),
    new createUploadLink({
      uri: process.env.REACT_APP_API_BASE_PATH
    })
  ]),
  cache: new InMemoryCache()
});

class App extends Component {
	render() {
		return (
			<ApolloProvider client={client}>
				{ routes }
			</ApolloProvider>
		)
	}
}

export default App;