graphql-upload: BadRequestError: Missing multipart field ‘operations’

I solve it, by adding uploads: false: const server = new ApolloServer({ uploads:false, schema, playground: true });

GitHub issues is not really the right place to ask for general help, with the exception of people who sponsor my effort.

I’ve also tried to change mutation approach

There is no reason to do any of that if you have already verified that the client is sending a correct GraphQL multipart request.

When file uploads are not working as expected, start verifying the client is setup perfectly and working, then move on to the server and do the same. I’m sure if everything was configured properly you won’t have any troubles. Try to understand at a basic level how the different parts work; it might help in your troubleshooting.

I’m making the base assumption that you’re deliberately not using the built in file upload support in Apollo Server Express (perhaps to use a newer graphql-upload version than Apollo ships with), which in most cases works out of the box without special config.

But as I see at link above (from error message), the backend app expects operations and map keys in request body.

For file uploads the GraphQL API expects the request to be a multipart request, not a JSON POST requests, so those fields mentioned in the error are meant to be multipart request fields. If you are sure the client is sending a correct multipart request, you need to look at problems with how the server is configured.

I’m not sure what the fileUpload is, and I can’t see Apollo Server in the middleware. Regarding bodyParser.json(), be aware that some body parser middleware interferes with with parsing multipart requests.

If you are trying to manually setup file uploads, remember to disable the file uploads feature completely in Apollo Server - I’ll leave that to you to figure out how to do; I’ve explained how previously in other issue comments.

It seems that in previous versions of Apollo Server, they had a built-in integration with an old version of graphql-upload. So you have to indicate with uploads: false, that you are integrating it yourself.

Take a look at this implementation of the repo author: https://github.com/jaydenseric/apollo-upload-examples/blob/master/api/server.mjs

new ApolloServer ({
   // Disable the built in file upload implementation that uses an outdated
   // `graphql-upload` version, see:
   // https://github.com/apollographql/apollo-server/issues/3508#issuecomment-662371289
   uploads: false,
   schema,
}). applyMiddleware ({app}); 

I solve it, by adding uploads: false: const server = new ApolloServer({ uploads:false, schema, playground: true });

Thank you @Enmanuellperez98, that resolved the problem for me as well.

Thank you very much for the clarification and links. Very helpful.

I hope you think again about upvoting the helpful answer above instead of downvoting, @giautm.

For folks that encountered this issue, if you have middlewares like express-fileupload or fileParser, remove them; they won’t let graphql-upload consume the data. That’s how I solved it.

Unfortunately no result on frontend, this is my frontend code, I removed all other links, left only this

import { createUploadLink } from 'apollo-upload-client';
import { config } from '../config';

const cache = new InMemoryCache();

const uploadLink = createUploadLink({
    uri: config.graphql.uri(),
    headers: {
        'keep-alive': 'true',
    },
});

const client = new ApolloClient({
    link: uploadLink,
    cache,
});

And I still get non-multipart request to the backend while making this:

const FILE_UPLOAD_QUERY = gql`
    mutation FileUpload($file: Upload!) {
        fileUpload(file: $file) {
            filename
            tmpFilename
        }
    }
`;

const withFileUpload = graphql(FILE_UPLOAD_QUERY, {
    name: 'fileUpload',
});

       onChange: event => {
            if (event.currentTarget.validity.valid) {
                setUploading(true);
                const file = event.target.files[0];
                file &&
                    fileUpload({
                        variables: { file },
                    }).then(
                        props => {
                            setUploading(false);
                            console.log('uploadedFile', props);
                        },
                        error => {
                            setUploading(false);
                            console.log('fileUpload error', error);
                        }
                    );
            }
        }

I’ve read some more articles on the internet and now I realize that both my frontend application and Altait send bad requests to backend, thank you for the direction of my search, I will post here a solution when it will be found