[NestJS] GraphQL Mutation

이번 포스트는 GraphQL의 Mutation에 대해 다루겠습니다.

Resolver나 초기 설정에 대해 궁금하시다면 해당 글을 확인하면 됩니다.

[NestJS] GraphQL Resolvers

[GraphQL] NestJS에서 GraphQL 초기 설정

Mutation

REST API에서는 HTTP Method를 이용하여 데이터를 수정합니다. 대표적인 예시로 POST, PUT, DELETE가 존재합니다.

GraphQL에서는 이와 유사하게 Mutation을 사용하여 데이터를 수정합니다.

간단한 예시를 한번 보겠습니다.

// survey/survey.resolver.ts
Resolver(() => Survey)
export class SurveyResolver {
  constructor(
    private surveyService: SurveyService,
    private questionService: QuestionService,
  ) {}
  //.. 생략

  // 설문지 생성
  @Mutation(() => Survey, { description: '설문지 생성' })
  async createSurvey(@Args('input') createSurveyData: CreateSurvey) {
    return this.surveyService.createSurvey(createSurveyData);
  }

  // 설문지 수정
  @Mutation(() => Survey, { description: '설문지 수정' })
  async updateSurvey(@Args('input') updateSurveyData: UpdateSurvey) {
    return this.surveyService.updateSurvey(updateSurveyData);
  }

  // 설문지 삭제
  @Mutation(() => CustomResponse, { description: '설문지 삭제' })
  async deleteSurvey(@Args('id') id: number) {
    return await this.surveyService.deleteSurvey(id);
  }
}

설문지 서비스를 제작하면서 예시를 들고 왔습니다.

Mutation은 Resolver Class 내에 작성됩니다.

@Mutation 데코레이터를 통해 Response로 응답할 객체의 Schema를 받고 있으며, description을 통해 Mutation의 설명을 돕고 있습니다.

그리고 @Args 데코레이터를 통해 request의 데이터를 받고 있습니다.

이를 통해 CUD를 구현하였으며, playground Schema에는 이렇게 나옵니다.

구현한 Mutation

InputType

Mutation에서도 @Args를 통해 데이터를 받습니다. 이때 input의 Type을 정해줄 수 있습니다.

@InputType({ description: '설문지 생성 Type' })
export class CreateSurvey {
  @Field({ description: '설문지 제목' })
  title: string;

  @Field({ description: '설문지 상세 요약글' })
  description: string;
}

마치 DTO를 작성하는 것과 같습니다. 이를 통해서 클린 코드를 작성할 수 있게 됩니다.

구현한 Type을 playground에서 확인해보면 다음과 같습니다.

구현한 InputType