NestJS로 GraphQL 시작하기

import { HelloResolver } from './hello.resolver';

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

이 포스팅을 시작한 이유

처음 시작했을 때 도대체 어떻게 시작해야 작동하는 코드를 만들 수 있을지 "이것만 보면 된다" 라고 할만한 한글 문서가 없어서 남겨두고 싶어서 시작했습니다

이번 포스팅의 원칙은 가장 빨리 "작동하는 코드"를 만들고 유지하자 입니다

안 그래도 처음 하는 분야라 불안한데 계속 실행 안되면 읽는게 힘들더라고요

설치부터 시작해서 DB 연결후 작동하는 API 까지

설치

nest new "프로젝트명"
cd "프로젝트명"
npm i @nestjs/graphql @nestjs/apollo graphql apollo-server-express

여기까지는 공식문서를 통해서 참고할 수 있다.

 

 

 

가장 간단하게 NestJS 로 GraphQL을 시작해보자

GraphQL 모듈을 global로 실행하는데, 

driver : 우리가 Apollo를 쓸지, Mercurius 를 사용할 지 정하는 선택지이지만, 편하게 Apollo를 사용할 것

playground: 우리가 마음대로 실험을 해볼 장소이기에, true로 놓고 진행하도록 하겠습니다

autoSchemaFile: graphql 내부적으로 작성된 schema를 어디에 저장할 지에 대한 부분입니다

 

여기까지 하면 진행은 되지 않습니다. 

어떤 데이터를 어떻게 보내야 하는지에 대한 정의가 되어있지 않기에, 정의가 없다는 내용으로 에러가 나올 것입니다

 

간단하게 만들어보죠

hello.resolver.ts

import { Query, Resolver } from '@nestjs/graphql';

@Resolver()
export class HelloResolver {
  @Query((returns) => String)
  async hello() {
    return 'Hello world';
  }
}

Resolver 란 

추후에 설명할 Query, Mutation, Subscribtion 같은 타입이 실제로 작동하는 부분입니다. 

일단 작성했으니 app.module.ts 에도 넣어야 겠죠?

import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { join } from 'path';
import { AppController } from './app.controller';
import { AppService } from './app.service';
@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      playground: true,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

일단 이렇게만 하면 실제로 작동하는 내용을 playground에서 실험해 볼 수 있는데요

이렇게 되고 끝이 나죠

이떄 우리가 처음 지정했던 src/schema.gql 파일을 보면

# ------------------------------------------------------
# THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
# ------------------------------------------------------

type Query {
  hello: String!
}

같은 형태로 자동적으로 만들어져있는 것을 볼 수 있습니다.

.gql 파일은 graphql 의 schema 확장자를 의미하는데요

Code First

우리가 직접 schema(.gql) 를 만들지 않고 자동으로 만들어진 모습을 볼 수 있는데요 즉 schema 가 자동적으로 만들어진겁니다. Code 를 먼저 작성했더니 => Schema 가 만들어졌다 

그래서 이를 Code First 방식이라고 합니다.

 

일단 가장 빠르게 실제로 작동하는 모습은 확인할 수 있게 되었습니다

그러면 다음 글에서 이제 코드를 추가적으로 만들어 내는 과정을 통해서 조금 현실적인 방향으로 가보도록 하겠습니다

 

 

 

참고 url

 

https://progressivecoder.com/how-to-create-your-first-nestjs-graphql-application/

How to create your first NestJS GraphQL Application?