GraphQL 통합: Nest.js에서의 GraphQL 설정과 활용

현대 웹 애플리케이션에서 데이터 전송을 위한 혁신적인 방법으로 자리 잡은 GraphQL은 서버와 클라이언트 간의 데이터 통신을 보다 효율적으로 관리할 수 있도록 설계되었습니다. 이번 포스트에서는 GraphQL의 기본 개념과 Nest.js에서의 설정 방법에 대해 자세히 알아보겠습니다.

GraphQL 개념

GraphQL은 전통적인 RESTful API와는 다른 접근 방식을 제공합니다. 클라이언트가 필요한 데이터를 명확하게 요청할 수 있는 기능을 통해 불필요한 데이터 전송을 최소화하고, 데이터 처리의 효율성을 극대화합니다. 다음은 GraphQL의 주요 개념입니다.

1. 쿼리(Query)

쿼리는 클라이언트가 서버에 데이터를 요청하는 기본적인 방법입니다. 사용자는 원하는 필드만을 선택적으로 요청할 수 있습니다. 예를 들어, 사용자의 이름과 이메일 주소만 필요하다면 다음과 같은 쿼리를 작성할 수 있습니다.

{
  user(id: "1") {
    name
    email
  }
}

이 쿼리는 특정 사용자 ID에 대한 이름과 이메일 정보를 요청하며, 서버는 요청된 데이터만을 반환합니다.

2. 뮤테이션(Mutation)

뮤테이션은 서버의 데이터를 변경하기 위해 사용하는 쿼리입니다. 새로운 데이터를 생성하거나 기존 데이터를 수정하는 데 사용됩니다. 예를 들어, 새 사용자를 생성하는 뮤테이션은 다음과 같이 작성할 수 있습니다.

mutation {
  createUser(name: "John Doe", email: "john@example.com") {
    id
    name
  }
}

이 뮤테이션은 새로운 사용자를 생성하고, 생성된 사용자의 ID와 이름을 반환합니다.

3. 구독(Subscription)

구독은 실시간으로 데이터의 변경 사항을 구독하여 업데이트를 받을 수 있는 기능입니다. 이는 사용자에게 즉각적인 피드백을 제공하는 데 유용합니다.

4. 스키마(Schema)

스키마는 GraphQL API의 구조를 정의하며, 어떤 쿼리가 가능한지, 각 쿼리가 반환하는 데이터 타입은 무엇인지 등을 명세합니다. 스키마는 API의 설계도를 제공하여 클라이언트와 서버 간의 명확한 계약을 형성합니다.

5. 타입(Type)

타입은 스키마에서 정의된 다양한 데이터 형식으로, 기본형(type) 및 사용자 정의형(custom type)이 포함됩니다. 이를 통해 데이터의 구조와 형식을 명확히 할 수 있습니다.

Nest.js에서 GraphQL 설정하기

Nest.js에서 GraphQL을 설정하려면 다음 단계를 따라야 합니다.

1. 패키지 설치

Nest.js 프로젝트에 GraphQL 관련 패키지를 설치합니다. 이 과정은 GraphQL의 기능을 활용하기 위한 필수적인 단계입니다.

npm install @nestjs/graphql graphql-tools graphql apollo-server-express

2. GraphQLModule 설정

AppModule 또는 원하는 모듈 파일에 GraphQLModule을 추가하고 설정합니다. 이 설정은 GraphQL API의 기본 구성을 정의합니다.

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';

@Module({
  imports: [
    GraphQLModule.forRoot({
      autoSchemaFile: true,
    }),
  ],
})
export class AppModule {}

3. 스키마 및 리졸버 정의

스키마는 TypeScript 클래스를 통해 정의할 수 있으며, 리졸버는 특정 쿼리에 대한 로직을 구현합니다. 예를 들어, 사용자 정보를 다루는 간단한 리졸버를 만들어 보겠습니다.

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

@Resolver('User')
export class UserResolver {
  private users = [];

  @Query(() => [User])
  getUsers() {
    return this.users;
  }

  @Mutation(() => User)
  createUser(@Args('name') name: string, @Args('email') email: string) {
    const newUser = { id: Date.now(), name, email };
    this.users.push(newUser);
    return newUser;
  }
}

// User 클래스도 정의해야 함 (DTO)
import { ObjectType, Field } from '@nestjs/graphql';

@ObjectType()
export class User {
  @Field()
  id: number;

  @Field()
  name: string;

  @Field()
  email: string;
}

4. 서버 실행

이제 Nest.js 애플리케이션을 실행하면 /graphql 경로에서 Graphiql 인터페이스를 사용할 수 있게 됩니다. 이 인터페이스를 통해 개발자는 쿼리를 직접 테스트하고, API의 동작을 확인할 수 있습니다.

npm run start 

브라우저에서 http://localhost:<PORT>/graphql로 접속하여 직접 쿼리를 테스트해 볼 수 있습니다. 이를 통해 GraphQL의 강력한 기능을 실시간으로 경험할 수 있습니다.

결론

GraphQL 통합은 Nest.js 애플리케이션의 유연성과 효율성을 높이는 중요한 과정입니다. 클라이언트가 정확히 필요한 데이터만 요청함으로써 성능 최적화 및 네트워크 비용 절감 효과를 누릴 수 있습니다. 위의 단계들을 통해 쉽게 시작할 수 있으며, 실제 비즈니스 로직에 맞게 확장해 나갈 수도 있습니다. GraphQL을 활용하여 데이터 관리의 새로운 패러다임을 경험해 보세요!