Implementing file uploads using graphql-upload library, integrating it with apollo-server-fastify, and taking advantage of the code-first

Question

Implementing file uploads using graphql-upload library, integrating it with apollo-server-fastify, and taking advantage of the code-first

Is there a correct way to implement file uploads from a client to a server using the following combination of packages/techniques (along with their corresponding dependencies not listed):

graphql-upload
apollo-server-fastify
@nestjs/platform-fastify (code first approach)

We are aiming to implement the functionality described in the "apollo server file uploads" documentation, specifically using the NestJS GraphQL Code First technique but with support for multiple files instead of just one.

To achieve this, we can use the following code:

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
  type File {
    filename: String!
    mimetype: String!
    encoding: String!
  }

  type Query {
    uploads: [File]
  }

  type Mutation {
    singleUpload(file: Upload!): File!
  }
`;

const resolvers = {
  Query: {
    uploads: (parent, args) => {},
  },
  Mutation: {
    singleUpload: (parent, args) => {
      return args.file.then(file => {
        //Contents of Upload scalar: https://github.com/jaydenseric/graphql-upload#class-graphqlupload
        //file.stream is a node stream that contains the contents of the uploaded file
        //node stream api: https://nodejs.org/api/stream.html
        return file;
      });
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

Currently, my frontend successfully sends the files to the server using this mutation:

gql`
  mutation uploadObjects($files: [Upload!]!) {
    uploadObjects(files: $files) {
      bucketKey
    }
  }
`;

If you would like to see examples of how the requests are sent along with the expected file binaries:

link1
link2

reactjs graphql nestjs apollo-server fastify

Answer 1

Answer №1

Integrating graphql-upload with Apollo Server and NestJS's @nestjs/platform-fastify allows you to handle file uploads from the client side efficiently.

To begin, update your NestJS's main.ts file by integrating graphql-upload with Apollo and Fastify.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { graphqlUploadFastify } from 'graphql-upload';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter(),
  );

  // Apply the graphql upload middleware
  app.register(graphqlUploadFastify, {
    maxFileSize: 10000000, // 10 MB
    maxFiles: 5,
  });

  await app.listen(3000);
}
bootstrap();

Afterwards, define the Upload scalar in your GraphQL Module and update your resolvers and schema accordingly. Below is an example of how you can achieve this:

In your app.module.ts:

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { join } from 'path';

@Module({
  imports: [
    GraphQLModule.forRoot({
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      uploads: false, // Disable the built-in upload functionality of Apollo Server
    }),
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}

Next, define your schema (e.g., upload.schema.ts):

import { ObjectType, Field, InputType, Directive } from '@nestjs/graphql';

@ObjectType()
export class File {
  @Field()
  filename: string;

  @Field()
  mimetype: string;

  @Field()
  encoding: string;
}

@InputType()
@Directive('@extends')
@Directive('@key(fields: "id")')
export class Upload {
  @Field()
  id: string;
}

And the corresponding resolvers (e.g., upload.resolver.ts):

import { Resolver, Mutation, Args, Query } from '@nestjs/graphql';
import { FileUpload, GraphQLUpload } from 'graphql-upload';
import { createWriteStream } from 'fs';
import { File } from './upload.schema';

@Resolver()
export class UploadResolver {
  @Query(() => [File])
  async uploads(): Promise<File[]> {
    // Implement your own logic to return the files
    return [];
  }

  @Mutation(() => Boolean)
  async uploadObjects(@Args({ name: 'files', type: () => [GraphQLUpload] }) files: FileUpload[]): Promise<boolean> {
    await Promise.all(
      files.map(async file => {
        const { createReadStream, filename } = await file;
        // Create a stream to specify the file destination.
        // Here is an example of saving the file locally
        return new Promise((resolve, reject) =>
          createReadStream()
            .pipe(createWriteStream(`./uploads/${filename}`))
            .on('finish', () => resolve(true))
            .on('error', (error) => reject(error)),
        );
      }),
    );

    return true;
  }
}

In this implementation, we are utilizing Fastify as our HTTP server instead of the default one (Express) and graphql-upload middleware to handle file uploads. The middleware parses the incoming requests with file upload and passes the streams into your resolvers. Note that in the @Mutation decorator, we use GraphQLUpload provided by graphql-upload, which is the required format for file uploads.

Make sure you have all the necessary packages installed. If not, install them using npm or yarn:

npm install @nestjs/graphql graphql-tools graphql apollo-server-fastify fastify multipart graphql-upload

Answer 2

Integrating graphql-upload with Apollo Server and NestJS's @nestjs/platform-fastify allows you to handle file uploads from the client side efficiently.

To begin, update your NestJS's main.ts file by integrating graphql-upload with Apollo and Fastify.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { graphqlUploadFastify } from 'graphql-upload';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter(),
  );

  // Apply the graphql upload middleware
  app.register(graphqlUploadFastify, {
    maxFileSize: 10000000, // 10 MB
    maxFiles: 5,
  });

  await app.listen(3000);
}
bootstrap();

Afterwards, define the Upload scalar in your GraphQL Module and update your resolvers and schema accordingly. Below is an example of how you can achieve this:

In your app.module.ts:

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { join } from 'path';

@Module({
  imports: [
    GraphQLModule.forRoot({
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      uploads: false, // Disable the built-in upload functionality of Apollo Server
    }),
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}

Next, define your schema (e.g., upload.schema.ts):

import { ObjectType, Field, InputType, Directive } from '@nestjs/graphql';

@ObjectType()
export class File {
  @Field()
  filename: string;

  @Field()
  mimetype: string;

  @Field()
  encoding: string;
}

@InputType()
@Directive('@extends')
@Directive('@key(fields: "id")')
export class Upload {
  @Field()
  id: string;
}

And the corresponding resolvers (e.g., upload.resolver.ts):

import { Resolver, Mutation, Args, Query } from '@nestjs/graphql';
import { FileUpload, GraphQLUpload } from 'graphql-upload';
import { createWriteStream } from 'fs';
import { File } from './upload.schema';

@Resolver()
export class UploadResolver {
  @Query(() => [File])
  async uploads(): Promise<File[]> {
    // Implement your own logic to return the files
    return [];
  }

  @Mutation(() => Boolean)
  async uploadObjects(@Args({ name: 'files', type: () => [GraphQLUpload] }) files: FileUpload[]): Promise<boolean> {
    await Promise.all(
      files.map(async file => {
        const { createReadStream, filename } = await file;
        // Create a stream to specify the file destination.
        // Here is an example of saving the file locally
        return new Promise((resolve, reject) =>
          createReadStream()
            .pipe(createWriteStream(`./uploads/${filename}`))
            .on('finish', () => resolve(true))
            .on('error', (error) => reject(error)),
        );
      }),
    );

    return true;
  }
}

In this implementation, we are utilizing Fastify as our HTTP server instead of the default one (Express) and graphql-upload middleware to handle file uploads. The middleware parses the incoming requests with file upload and passes the streams into your resolvers. Note that in the @Mutation decorator, we use GraphQLUpload provided by graphql-upload, which is the required format for file uploads.

Make sure you have all the necessary packages installed. If not, install them using npm or yarn:

npm install @nestjs/graphql graphql-tools graphql apollo-server-fastify fastify multipart graphql-upload

Implementing file uploads using graphql-upload library, integrating it with apollo-server-fastify, and taking advantage of the code-first

Answer №1

Similar questions

Using React Material UI icon within an auto complete feature

Tips for resizing the MUI-card on a smaller screen

Issue with handleClick function in React.js and Material UI not functioning as expected

Guide to storing publicUrl from product form in NextJS using Supabase

Unpacking the information in React

Having trouble using Node-fetch with Electron 11? Keep getting an error message that says resp.body.pipe is not a function

React JS component experiencing issues with Material UI modal functionality

Exploring the difference between using import global and getStaticProps in a Next.js/React

user interface grid element in Materia

create-react-app insert personalized configuration variable

Is it possible to change Material UI DateRange Picker to a DateTimeRange Picker?

CSS does not have the capability to style child elements

One can only iterate through the type 'HTMLCollection' by utilizing the '--downlevelIteration' flag or setting a '--target' of 'es2015' or above

Solving the Problem of Card Spacing in React Material UI

Ways to display a checked or unchecked checkbox in react depending on a boolean value obtained from an API

Explore how Next.js's getServerSideProps feature incorporates loading animations and improves

How does a database contribute to the functionality of a redux application?

Optimizing your webpack bundle by dynamically splitting directories with the SplitChunks plugin

What is the reason for TypeScript not displaying a type mismatch error in this particular instance?

Optimize React Material UI: Stop unnecessary re-rendering of child component Tabs when switching tabs