지금까지 Rest API 와 TypeScript를 배웠고, 오늘은 GraphQL과 TypeScript에 대해 배웠다.
Nest에는 코드우선 방법과 스키마우선 방법이 있는데
Code First 코드우선
데코레이터와 TypeScript 클래스를 사용해 해당 GraphQL 스키마를 생성한다.
GraphQLModule.forRoot({
autoSchemaFile: 'src/common/graphql/schema.gql',
})Schema First 스키마 우선
스키마 우선 접근 방식은 .graphql파일에 직접 스키마를 작성해줘야 한다.
GraphQL 스키마를 기반으로 TypeScript 정의를 자동으로 생성하여 중복된 상용구 코드를 작성할 필요성을 줄여준다.
우리는 코드우선 방식으로 실습을 진행했다.
실습
module.ts파일은 각각의 모듈을 최종적으로 모아 조립하는 파일이다. 이후에 app.module로 가져가게 된다.
@Module({
imports: [
BoardModule, //
GraphQLModule.forRoot({
autoSchemaFile: 'src/common/graphql/schema.gql',
}),
],
})
export class AppModule {}클래서 선언 위에 @Module 을 붙여 모듈로 쓰겠다고 nest에 얘기하고 있다.
@는 데코레이터로 함수라고 생각하면 된다.
app.module을 열어 GraphQLModule을 가져온다.
forRoot()메서드는 옵션 객체를 인수로 받을 수 있고 이 옵션은 ApolloServer생성자에 전달된다.
src에는 module, service, resolver파일이 있다.
service에는
import { Injectable } from '@nestjs/common';
@Injectable()
export class BoardService {
getHello(): string {
return 'Hello World!';
}
}라는 비즈니스 로직을 만들어 주고 resolver에
리졸버 = 컨트롤러
Graphql- 대문자
Typescript 소문자
@Resolver()
export class BoardResolver {
constructor(private readonly boardService: BoardService) {}
@Query(() => Board) //그래프큐엘은 대문자
getHello(): string { //타입스크립트는 소문자
return this.boardService.findAll();
}
컨트롤러 -? 리졸버 -> graphql????

app.module.ts
@Module({
imports: [
BoardModule, //
GraphQLModule.forRoot({
autoSchemaFile: 'src/common/graphql/schema.gql',
}),
스키마파일을 자동으로 만들것인지 - 위치와 이름으로 만들것…
타입orm - nestjs 용 타입orm
Board.entitiy.ts
@Entity() //데코레이터 달아줘야함
Export class Board{
@PrimaryGeneratedColumn <- 자동으로 생성된다는 뜻
number:number
@Column() <- 표의 열이라는 뜻
writer: string}
-> TypeOrmModule.forRoot({ entices:[Board]}) 로 넣어주면됨
board.resolver.ts
@Query(()=>String)
fetchBoards(): string{
return this.boardService.findAll()
}
@Mutation(()=>String)
createBoard(): string{}
-> 핵심적인 부분은 board.service.ts에서 작성
한가지api에서 쓰는것이 아니기때문에 빼서 작성하는것. 중복해서 사용 가능. 보드서비스에서 불러와서 사용하는것
board.service.ts
@Injectable() //의존성 주입 관련된 데코레이턴
export class BoardService {
findAll(): Board[] {
//데이터 조회하는 로직 들어있을것
return “조회성공”
}
create():string{
// 데이터 등록하는 로직 있을것
return “등록성공”}
graphql에서 ex.Board타입을 만들으려고 할때
Board.entitiy.ts에 데코레이터를 달아줌
@ObjectType()
@Entity()
Export class Board{
@PrimaryGeneratedColumn
@Field(()=>Int) //그래프큐엘은 인트
number:number//타입스크립트는 넘버
@Column() <- 표의 열이라는 뜻
@Field(()=>String)
writer: string}
하고 리졸버에서 바꿔줘야함
board.resolver.ts
@Query(()=>[Board])
fetchBoards(): Board[]{ //하고 board.service.ts에서 보드타입(배열)에 맞게 바꿔줘야 함
return this.boardService.findAll()
}
//바꿔준것
findAll(): Board[] {
//데이터 조회하는 로직
return [
{
number: 1,
writer: '철수1',
title: '제목입니다',
contents: '내용이에요',
}
]
//그렇게되면 gql에 바뀌어있음 ->
type Query {
fetchBoards: Board!
}
//mutation인자 받아오기 board.resolver.ts
@Mutation(()=>String)
createBoard(
@Args(‘writer’) writer : string,
):string{
Return this.boardService.create({writer,title,contents})}

Input만 모아두는 파일 board/dto/createBoard.input.ts
@InputType() //이게 바뀜
export class CreateBoardInput {
@Field(() => String)
writer: string;
@Field(() => String)
title: string;
@Field(() => String)
contents: string;
}
을 하고
리졸버파일에
@Mutation(()=>String)
createBoard(
@Args(‘createBoardInput’) createBoardInput : CreateBoardInput,
):string{
을 해줘야함
그럼 gql 파일에
input CreateBoardInput {
writer: String!
title: String!
contents: String!
}
로 input이 붙어서 생성되는걸 볼 수 있다.
