Apollo stucks until timeout when Uploading

[luco]

Hey guys,

I'm building an Apollo Server with upload. It works fine, the upload works perfectly. But I'm testing throwing an error to handle the UI in case of some error.

The first time I send the mutation it gets the error. But if I try to send it again calling the mutation function again, it gets stuck until a timeout (networkError TypeError: Network request failed). If I remove the files from the upload it works as expected (Getting the error)

Here's my function on client side:

const [create] = useMutation(Queries.CREATE_AD);
const apolloClient = useApolloClient();

const createAd = async () => {

		try {

			let data = AdData.getData();
			let media = AdData.getMedia();

			let files = [];

			media.map((item, index) => {
				let itemReturn = {};
				if(item.type === 'video') {

					let file = new ReactNativeFile({
					  uri: item.path,
					  name: `video_${index}.mp4`,
					  type: item.mime,
					});

					let thumb = new ReactNativeFile({
					  uri: item.thumb,
					  name: `video_${index}.jpg`,
					  type: item.mime,
					});

					files.push({
						file,
						thumb,
						mime: item.mime
					})

				} else {
					let file = new ReactNativeFile({
					  uri: item.path,
					  name: `image_${index}.jpg`,
					  type: item.mime,
					});

					files.push({
						file,
						mime: item.mime
					})
				}
			});

			const {data: createData, errors} = await create({
				variables: {
					input: {
						...data,
						media: files
					}
				},
				errorPolicy: 'all'
			});

			if(errors) {
				return setState(state => {
					return {
						...state,
						loading: false,
						status: 'error'
					}
				});
				apolloClient.resetStore();
			} else {
				return setState(state => {
					return {
						...state,
						loading: false,
						status: 'success'
					}
				});
		
			}

		} catch(e) {

			setState(state => {
				return {
					...state,
					loading: false,
					status: 'error'
				}
			});
			apolloClient.resetStore();
		}

	}

And my function on server-side:

module.exports = {
  Mutation: {
    async createAd(root, args, context) {
           try {
                if(!context.uid || !args.input) return null;
                throw new Error('Test');

           } catch(e) {

                console.log(e);

                if(e.message) {
                    throw new Error(e.message);
                } else {
                    throw new Error(e);
                }


           }

    },
  }
};

Any thoughts? Thanks!

[jaydenseric]

I suggest ensuring you are using the latest version of graphql-upload on the server, because Apollo Server infamously ships outdated versions:

npm ls graphql-upload

Early graphql-upload versions had bugs with resolver errors in certain situations.

Also, Apollo Server doesn't handle errors perfectly in all the integrations, see: apollographql/apollo-server#2843 . Unfortunately browsers freak out when the server sends back a response before the client has finished streaming up the request, even though that is valid according to HTTP.

Here are some relevant tests:

• https://github.com/jaydenseric/graphql-upload/blob/a3b7b31406aa47567ced0b60eea1cd764db8932c/test/public/graphqlUploadKoa.test.js#L157
• https://github.com/jaydenseric/graphql-upload/blob/a3b7b31406aa47567ced0b60eea1cd764db8932c/test/public/graphqlUploadExpress.test.js#L176

Finally, I notice you are using React Native. Make sure you don't have any of the dev tools or network inspectors open when making multipart requests because they bug out the requests.

[luco]

I tried to update graphql-upload (it was outdated, indeed) but it didn't fixed. Also tried closing dev tools, but got no luck.

[jaydenseric]

It's likely not an apollo-upload-client issue so this issue tracker really isn’t the best medium to find help with your project. To help we would need to check how you disabled graphql-upload in Apollo Server for a manual upgrade, understand all your code and debug from there - which I don't have the time for, sorry!

[ismailyagci]

I had the same problem if you are using node js server.headersTimeout = 7200000; just add this command

[NicoSan20]

@luco : Do you finally found a solution ?