GraphQL 및 Nestjs를 사용하여 파일을 업로드하는 방법에 대한 빠른 데모(NestJs Code First Approach)

개요

안녕하세요 👋 여러분, 오늘은 graphql을 이용하여 파일을 업로드하는 방법에 대해 알아보려고 합니다. Rest API를 사용하여 파일을 업로드하는 방법에 이미 익숙할 수 있지만 이제 Graphql을 사용해 보고 고양이 사진을 업로드하는 방법이 궁금할 것입니다.

Nest J와 코드 우선 GraphQL 접근 방식을 사용하는 경우 이 가이드가 적합합니다.

설정

종속성을 설치하여 시작하겠습니다.

npm i @nestjs/graphql @nestjs/apollo graphql apollo-server-express graphql-upload@14
yarn add @nestjs/graphql @nestjs/apollo graphql apollo-server-express graphql-upload@14

이제 모든 것이 설치되었습니다. app.module.ts 파일로 이동하여 ApolloDriver, ApolloDriverConfig 및 GraphQLModule을 가져옵니다.

import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { GraphQLModule } from '@nestjs/graphql';

그런 다음 앱 모듈 가져오기에 GraphQLModule 구성을 추가합니다.

@Module({
imports: [
  GraphQLModule.forRoot<ApolloDriverConfig>({
  driver: ApolloDriver,
  autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
 }),
],

이제 터미널에서 nest cli를 사용하여 graphql 코드를 생성해 보겠습니다.

nest g resource cats

이제 GraphQL을 선택합니다(코드 우선).

? What transport layer do you use?
  REST API
  GraphQL (code first)
  GraphQL (schema first)
  Microservice (non-HTTP)
  WebSockets

이렇게 하면 src 디렉터리 내에 cats라는 폴더가 생성됩니다.

코딩하자

이제 우리의 변이를 작성하여 이미지가 있는 고양이 객체를 생성해 보겠습니다.

createCatmutation에서 가져온 createCatInput을 편집하여 시작하겠습니다.

@InputType()
export class CreateCatInput {
  @Field(() => Int, { description: 'Example field (placeholder)' })
  exampleField: number;
}

우리 고양이는 이름, 품종 및 이미지 속성을 갖습니다.

다음과 같이 이미지 필드에 사용할 수 있는 파일 업로드 유형을 만듭니다.

import { Stream } from 'stream';

export interface FileUpload {
  filename: string;
  mimetype: string;
  encoding: string;
  createReadStream: () => Stream;
}

이제 GraphQL 멀티파트 요청을 지원하는 graphql-upload 패키지에서 가져오는 GraphQLUpload Scalar Type으로 필드를 추가합니다.

import * as GraphQLUpload from 'graphql-upload/GraphQLUpload.js';

@InputType()
export class CreateCatInput {
  @Field(() => String)
  name: string;
  @Field(() => String)
  breed: string;
  @Field(() => GraphQLUpload)
  image: Promise<FileUpload>;
}

그런 다음 고양이 엔터티로 이동하여 유사한 유형을 만들고 파일 이름만 반환할 수 있도록 이미지 필드를 문자열로 수정합니다.

@ObjectType()
export class Cat {
  @Field(() => String)
  name: string;
  @Field(() => String)
  breed: string;
  @Field(() => String)
  image: string;
}

이제 이미지를 처리할 수 있는 cats.service.ts로 이동합니다.

create({ breed, name, image }: CreateCatInput) {
  // your code goes here
}

품종과 이름은 받은 그대로 돌려드립니다. 읽을 수 있는 스트림( 이미지 ) 계속해서 새 폴더를 만들고 이름을 업로드할 수 있습니다. 우리는 그 안에 이미지를 저장할 것입니다.

async create({ breed, name, image }: CreateCatInput) {
  const { createReadStream, filename } = await image;
  return new Promise(async (resolve) => {
  createReadStream()
   .pipe(createWriteStream(join(process.cwd(), `./src/upload/${filename}`)))
   .on('finish', () =>
     resolve({
      breed,
      name,
      image: filename,
     }),
   )
   .on('error',() => {
       new HttpException('Could not save image', HttpStatus.BAD_REQUEST);
    });
  });
}

마지막으로 app.module.ts로 이동하여 GraphQLUpload 미들웨어를 추가합니다.

import * as graphqlUploadExpress from 'graphql-upload/graphqlUploadExpress.js';

const app = await NestFactory.create(AppModule);
app.use(graphqlUploadExpress({ maxFileSize: 1000000, maxFiles: 10 }));
await app.listen(4000);

내에서 전체 읽기portfolio