NestJS 로 GraphQL Query 만들기

https://be-student.tistory.com/20

GraphQL 시작하기 -2

이전 글을 읽어보시면 좋습니다

 

간단하게 이번 글을 시작하기 전에 필요한 내용은 저번에도 말씀드렸지만

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

 

nest generate module pets
nest generate service pets
nest generate resolver pets

이렇게 cli의 도움을 받아서 간단한 것들을 생성하고 나면

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';
import { PetsModule } from './pets/pets.module';

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

저번에 있었던 HelloResolver를 제거하고 나면 이런 상황까지 볼 수 있습니다

 

아직까지는 제대로 실행이 되지 않을겁니다 HelloResolver에서 간단한 string을 return해주는 부분이 있었지만, 이번에는 그런 내용이 없기에, 어떤 데이터를 반환해야하는지 알 수가 없기 때문인데요

이를 위한 것들을 작성해보도록 하겠습니다

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

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

  @Field()
  name: string;

  @Field({ nullable: true })
  kind?: string;
}

src/pets 안에 pets.entities.ts 라고 되어있는 것을 통해서 entity를 만들겠습니다

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

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

  @Field()
  name: string;

  @Field({ nullable: true })
  kind?: string;
}

여기서 kind?:string과 nullable 이 2가지 방법으로 null이 될 수 있다는 것을 표현하고 있는데요. 이는 typescript 의 구조적 한계(metadata를 읽을 수 없는)로 인해서 kind가 null이 될 수 있는지를 읽을 수 없기 때문에, nullable 속성을 따로 주어서 예외 처리를 해준다고 생각하시면 됩니다

 

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

@Resolver()
export class PetsResolver {
  @Query((returns) => String)
  hello(): string {
    return 'world';
  }
}

pets Resolver를 고쳐보도록 하겠습니다. 저번에 hello 라고 하는 방식으로 데이터를 줬던 것은 이렇게 되어있었는데요. 

이대로 만들어도 실제로 작동은 합니다

{
	hello
}

라는 내용의 쿼리를 보내면 "world"라고 하는 답이 돌아오죠. 이를 이제 Pets를 참조하도록 변경해보도록 하겠습니다

//pets.resolver.ts

import { Query, Resolver } from '@nestjs/graphql';
import { Pets } from './pets.entities';
import { PetsService } from './pets.service';

@Resolver((of) => Pets)
export class PetsResolver {
  constructor(private readonly petsService: PetsService) {}
  //   @Query((returns) => String)
  //   hello(): string {
  //     return 'world';
  //   }

  @Query((returns) => [Pets])
  async pets(): Promise<Pets[]> {
    return this.petsService.findAll();
  }
}

//pets.service.ts

import { Injectable } from '@nestjs/common';
import { Pets } from './pets.entities';

@Injectable()
export class PetsService {
  async findAll(): Promise<Pets[]> {
    const pet = new Pets();
    pet.id = 1;
    pet.name = 'cute cat';

    return [pet];
  }
}

이렇게 파일들을 수정하고 작동시키면 또 다시 작동을 하게 됩니다.

이때 

를 통해서 확인할 수 있습니다

이때 그냥 pets 가 안 되는 것은 ... on 을 통해서 추후에 할 수 있도록 하겠습니다

이제 db를 연결해보겠습니다. 

mysql을 사용할 예정이기에, 없으신 분들은 mysql을 설치해주시면 진행할 수 있습니다.

다른 db를 사용하시고 싶으신 분들은 nestjs typeorm + db명 같은 형태로 확인하실 수 있습니다

공식문서에 

https://docs.nestjs.com/techniques/database

Documentation | NestJS - A progressive Node.js framework

쪽을 보시면 조금 더 확실하게 알 수 있을 것 같아요

npm install --save @nestjs/typeorm typeorm mysql2

를 통해서 설치하고, 

import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { TypeOrmModule } from '@nestjs/typeorm';
import { join } from 'path';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { Pets } from './pets/pets.entities';
import { PetsModule } from './pets/pets.module';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: 'localhost',
      port: 3306,
      username: 'root',
      password: 'root',
      database: 'pets',
      entities: [Pets],
      synchronize: true,
    }),
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      playground: true,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
    }),
    PetsModule,
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

app.module.ts 를 이렇게 변경하시고, 진행하시면 되는데요 이때 password, username 은 각자 자기 환경에 맞추어서 진행하시면 되겠습니다 

여기서 database 적은 테이블이 없다고 하는 경우에는 직접 table을 생성해주시면 됩니다

 

import { Field, Int, ObjectType } from '@nestjs/graphql';
import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';

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

  @Column()
  @Field()
  name: string;

  @Column({ nullable: true })
  @Field({ nullable: true })
  kind?: string;
}

pets.entites.ts 를 이렇게 바꾸시면, entity 와, graphql 의 데이터 저장소까지 두 기능을 하나로 모을 수 있습니다

pets.module.ts에다가 

import { Module } from '@nestjs/common';
import { PetsService } from './pets.service';
import { PetsResolver } from './pets.resolver';
import { TypeOrmModule } from '@nestjs/typeorm';
import { Pets } from './pets.entities';

@Module({
  imports: [TypeOrmModule.forFeature([Pets])],
  providers: [PetsService, PetsResolver],
})
export class PetsModule {}

이렇게 의존성을 주입해주시고, import 에 typeorm module 을 적게 되면 PetsService에서 사용할 수 있게됩니다.

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Pets } from './pets.entities';

@Injectable()
export class PetsService {
  constructor(
    @InjectRepository(Pets) private readonly petsRepository: Repository<Pets>,
  ) {}
  async findAll(): Promise<Pets[]> {
    return this.petsRepository.find();
  }
}

처럼 pets.services.ts 에다 변경을 해주시고 나면

까지 되면서 다시 작동을 하게 됩니다