使用 typegraphql (Apollo Server) 上传文件

Question

What I am trying to do

I am trying to get file uploads working with typegraphql (wrapper on Apollo Server). I am writing a simple resolver that should receive a file upload and write it to a file on the server.

My code

I followed this tutorial

I have uploaded a very small demo of the problem to this github repo . And here is my resolver for receiving the uploaded file

@Resolver()
export class ProfilePictureResolver {
  @Mutation(() => Boolean)
  async addProfilePicture(
    @Arg('picture', () => GraphQLUpload)
    upload: FileUpload
  ): Promise<boolean> {
    console.log('upload', upload);
    const { createReadStream, filename } = upload;
    return new Promise(async (resolve, reject) =>
      createReadStream()
        .pipe(createWriteStream(__dirname + `/../../../images/${filename}`))
        .on('finish', () => resolve(true))
        .on('close', () => resolve(true))
        .on('error', () => reject(false))
    );
  }
}

My Problem

When I run this resolver (using postman as shown in the tutorial) the promise never resolves. createReadStream doesn't emit a close or error or finish event. The image file does get created but it is empty (0 bytes).

Any help would be greatly appreciated.

Thanks

Answer 1

I make this in a different way maybe this can help you I use graphql-upload library to upload an image

in your index or server file, you need to have this, in my case I do it whit express, but there is a setup whit apollo

import { graphqlUploadExpress } from 'graphql-upload'
import { graphqlHTTP }  from 'express-graphql';

    App.use('/graphql', graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }), graphqlHTTP(async(req, res) => 
    ({
        schema: await buildSchema
        ({
            resolvers: 
            [
                ProfilePictureResolver ,
            ],

        }),


    })));

And the resolver

@Resolver()
export class ProfilePictureResolver 
{
  @Mutation(() => Boolean)
  async addProfilePicture(
  @Arg('picture', () => GraphQLUpload)upload: FileUpload): Promise<boolean> 
  {
    return new Promise(async (resolve, reject) =>
      createReadStream()
        .pipe(createWriteStream(__dirname + `/../../../images/${filename}`))
        .on('finish', () => resolve(true))
        .on('close', () => resolve(true))
        .on('error', () => reject(false))
    );
  }
}

the createReadStream make a file in your folder I think it is better to upload to your storage server directly but continue whit this, postman Is a little bit harder to use whit graphql you can try to use Altair

Her you can see the option to Upload the file whit altair

your Graphql query should look like this

mutation ($Picture: Upload!)
{
  
  addProfilePicture
  (
    upload: $Picture,
  )
}