File Upload

[mercurius-js]

File Upload

[mcollina]

I'm not sure what you are trying to achieve. Can you please describe it a bit more and include an example of something that is not working as expected? Include a sample request, possibly with got or similar.

(schema is missing in your example).

[artecoop]

Bella Matteo,
what I'm trying to achieve is file upload thru graphql.

This is the schema I use to define the upload.
Before all, import grapqhl-upload:
import { GraphQLUpload } from 'graphql-upload';

then

typeDefs: buildSchema(`
    scalar Upload
 `),
resolvers: {
    Upload: GraphQLUpload
}

And then when needed:

type Mutation {
    addFile(id: ID!, file: Upload!): Boolean 
}

In the resolvers, file is managed as standard file
const { filename, mimetype, createReadStream } = await file;

I'm migrating from apollo-server and worked well.

[mcollina]

I'm still not sure what you are trying to achieve. I'm probably missing some context regarding file uploads and graphql, as I always thought they were two very separate concepts (there is nothing special here to handle them).

Having an example including a sample request would be extremely helpful.

(I'm currently boarding a long haul flight, so I'll reply when I get a chance).

[artecoop]

Ok I digged a little bit more and every POST with multipart/form-data to the endpoint returns 400.
I'll make some more test and then I'll try to create a codesandbox or minimal repo for you

Have a nice flight!

[artecoop]

Hey @mcollina, I hope your trip was flawless.

here's a way to reproduce the problem:
add those dependencies to package.json

"fastify": "2.12.0",
"fastify-gql": "3.0.6",
"fastify-cors": "3.0.1",
"fastify-multipart": "1.0.5"

and then in a index.js:

import fastify = require('fastify');
import GQL = require('fastify-gql');
import cors = require('fastify-cors');
import multipart = require('fastify-multipart');
import  GraphQLUpload = require('graphql-upload');

const app = fastify();

app.register(cors, { origin: '*' });

app.register(multipart, { addToBody: true });

const schema = `
    scalar Upload
    type Mutation {
        add(x: Int, y: Upload): Int
    }
`;

const resolvers = {
    Upload: GraphQLUpload,
    Mutation: {
        add: async (_, { x, y }) => {
            console.log(x);
            console.log(y);

            return x;
        }
    }
};

app.register(GQL, {
    path: '/',
    graphiql: 'playground',
    schema,
    resolvers
});

const port = 4000;
app.listen(port, () => console.log(`🚀  Server ready at http://localhost:${port}`));

If you try to post a file

  async function addImage(event) {
        const ADDIMAGE = gql`
            mutation($file: Upload!) {
                add(x: 28, y: $file)
            }
        `;

        const file = event.target.files[0];
        console.log(file);
        await mutate(client, {
            mutation: ADDIMAGE,
            variables: {
                file
            }
        });
}

You'll get
Uncaught (in promise) Error: Network error: Response not successful: Received status code 400

[mcollina]

Your problem is that https://github.com/jaydenseric/graphql-upload/blob/master/readme.md does not support fastify.

[artecoop]

Well, this sucks. I have to roll back to apollo-server because file upload is a core feature for my app.
But I can try to spare some time to make fastify-gql compatible with graphql-upload. Any hints will be appreciated.
You can close this issue if you think.

[ericlewis]

@mcollina seems resolved by #126

[mcollina]

Closing then!