Compatibility with graphql-upload

[vulcanhoist-jdalpe]

Hi,

First, thanks for all the work you are doing for these libraries!

Its not much of an issue as it is a question following my transition from express-graphql to graphql-http. Express-graphql used to work with graphql-upload but now it seems to me that the handler is blocking my POST request with an image because the Content-Type is not "application/json".

Is this limitation is expected?

Thanks,

Expected Behaviour
I expect this library to accept multipart/form-data Content-Type.

Actual Behaviour
Right now, the library only accepts "application/json" as Content-Type for POST requests. Otherwise, it throws a 415 Unsupported Media Type

[enisdenjo]

Hey there, thanks for asking! This matter has already been answered in this discussion.

You can always just forward the file upload requests to graphql-upload instead of processing it with graphql-http.

[vulcanhoist-jdalpe]

Understood! Thanks!

[francois-spectre]

@vulcanhoist-jdalpe I have exactly the same issue than you, I am migrating from express-graphql. We would like to avoid a costly migration to an other framework if possible... The only thing that does not work is this upload :/
How do you solve your problem?
If you have "forward[ed] the file upload requests to graphql-upload", what does it mean?

[k0dr1ck]

Hey @francois-spectre,

We just moved from graphql-http to apollo-server as I really needed uploads out of the box without « hacking » the code. It took me 5 minutes to do so!

Hope it helps!
Jeremie

[enisdenjo]

You can also consider GraphQL Yoga as a fully-featured, performant yet developer friendly server.

[francois-spectre]

Thank you!
I tried with apollo-server and it was quick to migrate. I have struggled a bit with upload-graphql because of a bad request error due to the CSRF prevention but it has been solved by https://www.apollographql.com/docs/apollo-server/security/cors/#graphql-upload.

[dtillner]

Same issue here. Migrated from graphql-express to graphql-http. Unfortunately using apollo-server is not an option for me.

@enisdenjo you said:

You can always just forward the file upload requests to graphql-upload instead of processing it with graphql-http

I tried graphql-upload`s processRequest() when reciving a multipart/form-data Content-Type. But then I need still something to process the graphql request.

As I understand it should be possible to process a multipart/form-data Content-type with graphql-upload and then process it with graphql-http.

So is it possible to have graphql-http to ignore the content-type or changing it to application/json before passing the request to graphql-http?

[enisdenjo]

With express you should be able to:

import express from 'express';
import { createHandler } from 'graphql-http/lib/use/express';
import graphqlUploadExpress from 'graphql-upload/graphqlUploadExpress';
import schema from './my-schema';

const app = express();
app.all(
  '/graphql',
  graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }),
  // because the GraphQL over HTTP spec does not support multipart content-type
  (req, res, next) => {
    if(req.headers['content-type'].startsWith('multipart/form-data')) {
      req.headers['content-type'] = 'application/json';
    }
    next();
  },
  createHandler({ schema }),
);

app.listen({ port: 4000 });
console.log('Listening to port 4000');

[dtillner]

I tried that already. It results in a 415 (Unsupported Media Type) response.

Meanwhile I circumvent this by adding a middleware function to change the content-type of the request object. It feels a bit hackish but works. Any ideas if there is another solution?

import express from 'express';
import { createHandler } from 'graphql-http/lib/use/express';
import graphqlUploadExpress from 'graphql-upload/graphqlUploadExpress';
import schema from './my-schema';

const app = express();
app.all(
  '/graphql',
  graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }),
  (req, res, next) => {
    if(req.headers['content-type'].startsWith('multipart/form-data;')) {
      req.headers['content-type'] = 'application/json';
    }
    next();
  },
  createHandler({ schema }),
);

app.listen({ port: 4000 });
console.log('Listening to port 4000');

[enisdenjo]

Hmm, right, thanks @dtillner for pointing this out - I've updated the original answer to reflect this. Sadly, the graphql-http spec does not support the multipart content-type and should therefore reject it. Your fix is hackish, but I'd say it's the best thing for now.

[benjie]

(I'm not sure the graphql-http spec will ever add explicit support for file uploads, I don't think GraphQL is a good fit for file uploads and I'm pretty sure Lee has said the same at some point. We explicitly allow other media types to be used in the spec, though, so it should be possible to make it work without breaching spec compliance.)

[enisdenjo]

Heads up, coming soon: #100.

[enisdenjo]

graphql-http supports custom request params parsers starting from v1.20.0. See more in #100.