[컴] nestjs 에서 graphql 사용

graphql / code first

nestjs 에서 graphql 사용

1. npm i @nestjs/graphql @nestjs/apollo @apollo/server graphql
2. nest generate module brand
3. nest generate resolver brand
4. nest generate service brand
5. src/app.module.ts 에 GraphQL module 설정 (아래 ‘codes’ 참고)
6. /src/brand/brand.type.ts 생성 (아래 ‘codes’ 참고)
7. /src/brand/brand.service.ts (아래 ‘codes’ 참고)
8. /src/brand/brand.resolver.ts (아래 ‘codes’ 참고)
9. npm run start
10. browser에서 localhost:3000/graphql

codes

// app.modules.ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { BrandModule } from './brand/brand.module';
import { join } from 'path';

@Module({
  imports: [
    BrandModule,
    // graphql module 설정
    GraphQLModule.forRoot<ApolloDriverConfig>({
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      driver: ApolloDriver,
      playground: true,
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

// /src/brand/brand.type.ts
import { Field, ObjectType, Int } from '@nestjs/graphql';

@ObjectType()
export class Brand {
  @Field(type => Int)
  id: number;

  @Field()
  name: string;

  @Field()
  company: string;
}

// /src/brand/brand.service.ts
import { Injectable } from '@nestjs/common';
import { Brand } from './brand.type';

@Injectable()
export class BrandService {
  private brands: Brand[] = [
    { id: 1, name: 'Air Force', company: 'nike' },
    { id: 2, name: 'Jordan', company: 'nike' },
  ];

  findAll(): Brand[] {
    return this.brands;
  }

  findOne(id: number): Brand {
    return this.brands.find(brand => brand.id === id);
  }
}

// /src/brand/brand.resolver.ts
import { Args, Int, Query, Resolver } from '@nestjs/graphql';
import { Brand } from './brand.type';
import { BrandService } from './brand.service';

@Resolver(of => Brand)
export class BrandResolver {
  constructor(private brandService: BrandService) { }

  @Query(returns => [Brand])
  brands(): Brand[] {
    return this.brandService.findAll();
  }

  @Query(returns => Brand)
  brand(@Args('id', { type: () => Int }) id: number): Brand {
    return this.brandService.findOne(id);
  }
}

graphQL query

brand.resolver.ts 에 정의한 method 를 이용하게 된다. 아래처럼 brands를 query하면 brand.resolver.ts 의 brands 가 호출된다.

{
  brands{
    id, name, company
  }
}

{
  "data": {
    "brands": [
      {
        "id": 1,
        "name": "John Doe",
        "company": "john.doe@example.com"
      },
      {
        "id": 2,
        "name": "Jane Doe",
        "company": "jane.doe@example.com"
      }
    ]
  }
}

See Also

1. GraphQL vs. REST | Apollo GraphQL Blog
   • Rest 의 아이디어는 resource 다. resource type, 에 따라 fetch way 가 다르다.
   • GraphQL 은 2개를 따로 정의한다. rdbms의 모습과 비슷하다.
     • data 에 대한 schema 를 정의하고,
     • query 를 위한 schema 를 따로 만들 수 있다.
2. Getting Started with NestJS GraphQL Schema First Approach

Reference

1. GraphQL + TypeScript | NestJS - A progressive Node.js framework
2. Beginner’s Guide to Using GraphQL with NestJS