File uploads but getting undefined JSON error

Hi Jayden, thanks for making this awesome package! I’m running into this weird issue, my actual file gets uploaded, but I get this error:

_SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) at form.parse (/Users/vlady/WebProjects/yupty-api/node_modules/apollo-upload-server/src/index.js:20:31) at IncomingForm.<anonymous> (/Users/vlady/WebProjects/yupty-api/node_modules/formidable/lib/incoming_form.js:102:9) at emitOne (events.js:96:13) at IncomingForm.emit (events.js:188:7) at IncomingForm._error (/Users/vlady/WebProjects/yupty-api/node_modules/formidable/lib/incoming_form.js:290:8) at IncomingMessage.<anonymous> (/Users/vlady/WebProjects/yupty-api/node_modules/formidable/lib/incoming_form.js:120:12) at emitNone (events.js:86:13) at IncomingMessage.emit (events.js:185:7) at abortIncoming (_http_server.js:284:11) at Socket.serverSocketCloseListener (_http_server.js:297:5) at emitOne (events.js:101:20) at Socket.emit (events.js:188:7) at TCP._handle.close [as onclose] (net.js:501:12)

My server looks like this:

app.use('/graphql',
	authenticate,
	bodyParser.json(),
	// Uploads
	apolloUploadExpress({
		// Optional, defaults to OS temp directory
		uploadDir: './uploads',
	}),
	graphqlExpress(req => {
		const query = req.query.query || req.body.query;
		if (query && query.length > 2000) {
			// Probably indicates someone trying to send an overly expensive query
			throw new Error('Query too large.');
		}

		return {
			schema: makeExecutableSchema({
				typeDefs: schema,
				resolvers,
			}),
			context: {
				user: req.user,
				token: req.headers.authorization,
			},
		};
	}),
);

I’ve been trying to fix and I have no idea what’s going on…

The query on the client looks like this:

const CreateEventFormWithMutation = graphql(createEventMutation, {
	props: ({ ownProps, mutate }) => ({
		// This function will be available as a prop in the form:
		createEvent: ({
			venue,
			start_time,
			description,
			picture,
		}, artistIDs, genreIDs) => {
			const variables = {
				venue_id: venue.id,
				start_time,
				description,
				artistIDs,
				genreIDs,
			};

			// Add picture to variables if there is one
			if (Object.getOwnPropertyNames(picture).length > 0) {
				variables.picture = picture;
			}

			return mutate({
				variables,
				// Update event feed with data from form, no need for network request
				optimisticResponse: {
					__typename: 'Mutation',
					createEvent: {
						__typename: 'Event',
						// Note that we can access the props of the container at `ownProps`
						venue,
						start_time,
						artists: ownProps.newEvent.artists,
						description,
					},
				},
				// Name the query to update, in this case: the query from EventFeedContainer, "getEvents"
				updateQueries: {
					getEvents: (prev, { mutationResult }) => {
						return update(prev, {
							events: {
								$unshift: [mutationResult.data.createEvent],
							},
						});
					},
				},
			});
		},
	}),
})(CreateEventForm);

[jaydenseric]

Awesome. If you discover a bug I’ll reopen. It would be good to know what it was; we might be able to add a more obvious error message if it’s a common issue.

[jaydenseric]

I think the error is that fields.variables is undefined here when attempting to decode the GraphQL variables.

Not sure why that would be. I would suggest working backwards from there to get to the bottom of it.