JavaScript 고급 네트워크

JavaScript GraphQL 기초

JavaScript GraphQL 기초 — 고급

GraphQL 기초

1. 도입 (왜 배워야 하는가)

GraphQL은 API를 설계하기 위한 쿼리 언어이자 실행 환경으로, REST API의 몇 가지 단점을 극복하기 위해 등장했습니다. 실무에서는 데이터 요청 및 응답의 효율성을 극대화하는 데 중요한 역할을 합니다.

예를 들어, 전통적인 REST API에서는 여러 엔드포인트를 통해 데이터를 가져와야 할 때, GraphQL은 단일 엔드포인트로 필요한 모든 데이터를 요청할 수 있습니다. 이를 통해 네트워크 트래픽을 줄이고, 클라이언트와 서버 간의 데이터 통신을 최적화할 수 있습니다.

GraphQL을 모르면 다음과 같은 문제가 발생할 수 있습니다:

데이터 요청 시 과도한 정보가 포함되거나, 필요한 데이터가 누락될 수 있습니다.
클라이언트와 서버 간의 데이터 형식이 일치하지 않아 유지보수가 어려워질 수 있습니다.

2. 핵심 개념 설명

GraphQL의 기본 개념

쿼리 (Query): 클라이언트가 서버에 요청하는 데이터의 구조를 정의합니다. 마치 레스토랑에서 주문할 때 원하는 요리를 구체적으로 설명하는 것과 같습니다.
뮤테이션 (Mutation): 서버의 데이터를 수정하는 요청입니다. 이는 레스토랑에서 요리를 주문하고 나서, 요리의 양념을 변경해 달라고 요청하는 것과 비슷합니다.
스키마 (Schema): GraphQL API의 데이터 구조와 관계를 정의하는 청사진입니다. 레스토랑의 메뉴판처럼, 어떤 데이터가 있는지를 정리해 둡니다.

용어	설명
쿼리	데이터를 요청하는 방법
뮤테이션	데이터를 수정하는 방법
스키마	API의 데이터 구조를 정의한 문서

3. 기본 코드 예제

가장 기본적인 GraphQL 쿼리를 작성해 보겠습니다.

const { graphql, buildSchema } = require('graphql');

// 스키마 정의
const schema = buildSchema(
  type Query {
    hello: String
  }
);

// 리졸버 정의
const root = {
  hello: () => '안녕하세요, GraphQL!'
};

// GraphQL 쿼리 실행
graphql(schema, '{ hello }', root).then((response) => {
  console.log(response);
});

실행 결과:

{ data: { hello: '안녕하세요, GraphQL!' } }

코드 설명:

graphql 및 buildSchema를 GraphQL 라이브러리에서 가져옵니다.
buildSchema를 사용하여 간단한 스키마를 정의합니다. 여기서는 hello라는 쿼리를 정의했습니다.
root 객체에서 hello 쿼리에 대한 리졸버를 정의합니다. 이 함수는 "안녕하세요, GraphQL!" 문자열을 반환합니다.
graphql 함수를 호출하여 스키마와 쿼리, 리졸버를 사용하여 쿼리를 실행합니다. 결과가 콘솔에 출력됩니다.

4. 실전 활용 예제

예제 1: 쇼핑몰에서 장바구니 구현

const schema = buildSchema(
  type Product {
    id: ID
    name: String
    price: Float
  }

  type Query {
    products: [Product]
  }
);

const root = {
  products: () => [
    { id: 1, name: '사과', price: 1000 },
    { id: 2, name: '바나나', price: 500 },
  ],
};

// GraphQL 쿼리 실행
graphql(schema, '{ products { id name price } }', root).then((response) => {
  console.log(response);
});

상황 설명: 쇼핑몰에서 사용자가 장바구니에 담을 수 있는 상품 목록을 조회하는 쿼리입니다.

예제 2: 사용자 정보를 업데이트하는 뮤테이션

const schema = buildSchema(
  type User {
    id: ID
    name: String
  }

  type Mutation {
    updateUser(id: ID!, name: String!): User
  }
);

const root = {
  updateUser: ({ id, name }) => {
    return { id, name }; // 실제로는 데이터베이스에 업데이트하는 로직이 필요함
  },
};

// GraphQL 뮤테이션 실행
graphql(schema, 'mutation { updateUser(id: "1", name: "철수") { id name } }', root).then((response) => {
  console.log(response);
});

상황 설명: 사용자가 자신의 이름을 업데이트할 수 있는 뮤테이션입니다.

5. 흔한 실수와 주의사항

실수 1: 잘못된 쿼리 구조

// 잘못된 예
graphql(schema, '{ hello name }', root) // 'name' 필드는 정의되지 않음

올바른 예:

graphql(schema, '{ hello }', root) // 'hello'만 요청

실수 2: 리졸버에서 반환하는 데이터 타입 불일치

// 잘못된 예
const root = {
  hello: () => 12345 // String 대신 Number 반환
};

올바른 예:

const root = {
  hello: () => '안녕하세요' // String 반환
};

6. 정리

GraphQL은 데이터 요청 및 응답을 최적화하는 쿼리 언어이다.
쿼리, 뮤테이션, 스키마의 세 가지 기본 개념이 있다.
GraphQL은 단일 엔드포인트로 여러 데이터를 효율적으로 요청할 수 있다.
실무에서 자주 사용하는 패턴은 데이터 조회와 수정이다.

다음에 학습하면 좋은 주제

GraphQL의 고급 기능 (구독, 스칼라 타입 등)
REST API와 GraphQL의 비교
Apollo Client를 사용한 GraphQL 클라이언트 구현