wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • axeshelper
  • 원형적인 움직임
  • 스코프
  • reactive variables
  • 초기 환경설정
  • getdelta()
  • API
  • 삼각함수
  • 오프-프레미스(off-premise) 방식
  • react 성능 최적화
  • math.sin()
  • getelapsedtime()
  • 함수 리터럴
  • joi 에러
  • three.js 구성 요소
  • 함수의 범위
  • type-graphql
  • 함수 표현식
  • e.preventdefault()
  • Decorators
  • Interface
  • 렌더링 성능 최적화
  • gridhelper
  • isabstract
  • math.cos()
  • 디자인 패턴
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티
  • 데이터 포맷
  • 함수 선언문
  • mapped types

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam

w__am 개발노트

InputTypes and ArgumentTypes
Frontend/Nest.js

InputTypes and ArgumentTypes

2024. 6. 21. 00:14

 

Mutation 추가

restaurants/restaurants.resolver.ts

import { Args, Mutation, Query, Resolver } from "@nestjs/graphql";
import { Restaurant } from "./entities/restaurants.entity";

@Resolver(() => Restaurant)
export class RestaurantsResolver {
  @Query(() => [Restaurant])
  restaurants(@Args("veganOnly") veganOnly: boolean): Restaurant[] {
    return [];
  }

  @Mutation(() => Boolean)
  createRestaurant(): boolean {
    return true;
  }
}

 

playground 확인

 

 

방법 1 : Mutation의 ArgumentType 개별 정의

restaurants/entities/restaurants.entity.ts

import { Field, ObjectType } from "@nestjs/graphql";

@ObjectType()
export class Restaurant {
  @Field(() => String)
  name: string;

  @Field(() => Boolean)
  isVegan: boolean;

  @Field(() => String)
  address: string;

  @Field(() => String)
  ownersName: string;
}

 

restaurants/restaurants.resolver.ts

import { Args, Mutation, Query, Resolver } from "@nestjs/graphql";
import { Restaurant } from "./entities/restaurants.entity";

@Resolver(() => Restaurant)
export class RestaurantsResolver {
  @Query(() => [Restaurant])
  restaurants(@Args("veganOnly") veganOnly: boolean): Restaurant[] {
    return [];
  }

  @Mutation(() => Boolean)
  createRestaurant(
    @Args("name") name: string,
    @Args("isVegan") isVegan: string,
    @Args("address") address: string,
    @Args("ownersName") ownersName: string,
  ): boolean {
    return true;
  }
}

 

playground 확인

 

 

방법 2 : InputTypes으로 만들어 주기

restaurants/dto/create-restaurant.dto.ts

  • dto폴더, create-restaurant.dto.ts 파일 만들기
import { Field, InputType } from "@nestjs/graphql";

@InputType()
export class CreateRestaurantDto {
  @Field(() => String)
  name: string;
  @Field(() => Boolean)
  isVegan: boolean;
  @Field(() => String)
  address: string;
  @Field(() => String)
  ownersName: string;
}

 

restaurants/restaurants.resolver.ts

import { Args, Mutation, Query, Resolver } from "@nestjs/graphql";
import { Restaurant } from "./entities/restaurants.entity";
import { CreateRestaurantDto } from "./dto/create-restaurant.dto";

@Resolver(() => Restaurant)
export class RestaurantsResolver {
  @Query(() => [Restaurant])
  restaurants(@Args("veganOnly") veganOnly: boolean): Restaurant[] {
    return [];
  }

  @Mutation(() => Boolean)
  createRestaurant(
    @Args("createRestaurantInput") createRestaurantInput: CreateRestaurantDto,
  ): boolean {
    console.log(createRestaurantInput);
    return true;
  }
}

 

playground 확인

객체로 생성된다.

 

mutation {
  createRestaurant(createRestaurantInput: {
    name: "woo",
    isVegan: true,
    address: "주소",
    ownersName: "test"
  })
}

playground 코드에 작성한 것처럼 object를 다 작성해야 하는 불편함이 있다.

 

 

방법 3 : ArgsType으로 만들어 주기

restaurants/dto/create-restaurant.dto.ts

import { ArgsType, Field } from "@nestjs/graphql";

@ArgsType()
export class CreateRestaurantDto {
  @Field(() => String)
  name: string;
  @Field(() => Boolean)
  isVegan: boolean;
  @Field(() => String)
  address: string;
  @Field(() => String)
  ownersName: string;
}

ArgsType class로 만들기

restaurants/restaurants.resolver.ts

import { Args, Mutation, Query, Resolver } from "@nestjs/graphql";
import { Restaurant } from "./entities/restaurants.entity";
import { CreateRestaurantDto } from "./dto/create-restaurant.dto";

@Resolver(() => Restaurant)
export class RestaurantsResolver {
  @Query(() => [Restaurant])
  restaurants(@Args("veganOnly") veganOnly: boolean): Restaurant[] {
    return [];
  }

  @Mutation(() => Boolean)
  createRestaurant(@Args() **createRestaurantDto: CreateRestaurantDto**): boolean {
    console.log(createRestaurantDto);
    return true;
  }
}

inputType은 arugment를 가지고 있지 않다.

 

playground 확인

객체가 아닌 argument가 하나씩 보인다.

 

 

요약

@ArgsType()는 개별 인자를 받고, @InputType()는 하나의 객체 형태로 인자를 받는다.

 

 

 

저작자표시 변경금지 (새창열림)

'Frontend > Nest.js' 카테고리의 다른 글

유저 프로필 수정 시 Mapped types 주의할 점  (0) 2024.06.21
GraphQL 스키마를 정의할 때 사용되는 데코레이터  (0) 2024.06.21
type-graphql의 isAbstract 옵션  (0) 2024.06.21
@InputType과 @ObjectType을 동시에 데코레이터 사용 시 주의할 점  (0) 2024.06.21
NestJS : DTO 데이터 전송 객체 (Data Transfer Object)  (0) 2023.01.10
    'Frontend/Nest.js' 카테고리의 다른 글
    • 유저 프로필 수정 시 Mapped types 주의할 점
    • GraphQL 스키마를 정의할 때 사용되는 데코레이터
    • type-graphql의 isAbstract 옵션
    • @InputType과 @ObjectType을 동시에 데코레이터 사용 시 주의할 점
    wam
    wam

    티스토리툴바