작성일 작성자 — 댓글 남기기

GraphQL의 페이징

페이징(Pagination)은 많은 양의 데이터를 효율적으로 가져오기 위해 데이터를 여러 페이지로 나누어 클라이언트에 제공하는 방법입니다. GraphQL에서도 대량의 데이터를 다룰 때 페이징을 적용하여 서버와 클라이언트 간의 성능을 최적화할 수 있습니다.

GraphQL에서는 두 가지 주요 페이징 방법을 지원합니다:

  1. Offset-based pagination (오프셋 기반 페이징)
  2. Cursor-based pagination (커서 기반 페이징)

두 방식 모두 클라이언트가 데이터를 나누어 요청하고, 필요한 만큼만 받아올 수 있게 합니다. 각각의 방식에 대해 자세히 설명해볼게요.

1. Offset-based Pagination (오프셋 기반 페이징)

Offset-based pagination은 전통적인 REST API에서 흔히 사용하는 방식입니다. 이 방식은 페이지당 몇 개의 데이터를 가져올지 결정하고, 특정 **오프셋(offset)**을 기준으로 데이터를 요청하는 방식입니다.

1) 기본 개념

  • offset: 데이터를 몇 번째부터 가져올지 결정하는 숫자입니다.
  • limit: 한 번에 몇 개의 데이터를 가져올지 결정하는 숫자입니다.

2) 예시

사용자 목록을 페이지 단위로 가져오는 예를 들어볼게요.

GraphQL 쿼리:

query getUsers($offset: Int!, $limit: Int!) {
  users(offset: $offset, limit: $limit) {
    id
    name
    email
  }
}

이 쿼리는 offset과 limit 값을 변수로 받아, 해당 페이지의 사용자 목록을 반환합니다. 예를 들어, offset: 0과 limit: 10이면 첫 번째 페이지의 10명의 사용자를 가져옵니다.

3) 서버 리졸버 예시 (Node.js)

const resolvers = {
  Query: {
    users: async (parent, { offset, limit }) => {
      return await User.find().skip(offset).limit(limit);
    }
  }
};

이 리졸버에서는 skip()과 limit() 메서드를 사용해 MongoDB에서 해당 범위의 데이터를 가져옵니다.

장점:

  • 간단하고 이해하기 쉬운 방식입니다.
  • 기존의 SQL 데이터베이스 또는 NoSQL 데이터베이스에서 쉽게 사용할 수 있습니다.

단점:

  • 데이터가 많아질수록 오프셋이 커질 경우, 성능이 떨어질 수 있습니다. 특히 오프셋이 클 경우, 쿼리가 느려질 수 있습니다.
  • 데이터가 변경될 경우, 클라이언트가 정확한 페이지의 데이터를 보장받지 못할 수 있습니다.

2. Cursor-based Pagination (커서 기반 페이징)

Cursor-based pagination은 더 효율적이고 성능이 좋은 방식으로, 특히 대량의 데이터를 다룰 때 적합합니다. **커서(cursor)**는 특정 데이터를 식별할 수 있는 고유 값(예: 데이터베이스의 고유 ID)을 사용하여, 해당 커서를 기준으로 다음 페이지 데이터를 가져옵니다.

1) 기본 개념

  • cursor: 현재 위치를 나타내는 값(예: 데이터의 ID).
  • first/last: 몇 개의 데이터를 가져올지 결정하는 값입니다. first는 처음부터 데이터를 가져오고, last는 끝에서부터 데이터를 가져옵니다.

2) 예시

사용자 목록을 커서 기반으로 가져오는 예를 살펴볼게요.

GraphQL 쿼리:

query getUsers($first: Int!, $after: String) {
  users(first: $first, after: $after) {
    edges {
      node {
        id
        name
        email
      }
      cursor
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

이 쿼리에서는 first로 데이터를 몇 개 가져올지 결정하고, after로 특정 커서(이전 데이터의 마지막 아이디)를 기준으로 데이터를 요청합니다. 서버는 해당 커서 이후의 데이터를 반환하게 됩니다.

3) 서버 리졸버 예시 (Node.js)

javascript코드 복사const resolvers = {
  Query: {
    users: async (parent, { first, after }) => {
      const cursorCondition = after ? { _id: { $gt: after } } : {};
      const users = await User.find(cursorCondition).limit(first);
      
      const edges = users.map(user => ({
        node: user,
        cursor: user._id // 커서를 ID로 사용
      }));

      const hasNextPage = users.length === first;
      const endCursor = hasNextPage ? users[users.length - 1]._id : null;

      return {
        edges,
        pageInfo: {
          endCursor,
          hasNextPage
        }
      };
    }
  }
};

이 예시에서 after 값이 있는 경우 해당 커서(ID) 이후의 데이터를 가져오고, first 값에 따라 데이터를 제한합니다. pageInfo 필드에서는 다음 페이지가 있는지 여부를 hasNextPage로 반환하며, 마지막 커서 값을 endCursor로 반환합니다.

장점:

  • 데이터가 추가되거나 삭제되어도 페이징에 문제가 발생하지 않습니다. 커서를 기준으로 하므로, 데이터가 변경되더라도 올바른 페이지를 가져올 수 있습니다.
  • 오프셋 기반보다 성능이 뛰어납니다. 특히 오프셋이 큰 경우 성능 저하 문제를 피할 수 있습니다.

단점:

  • 커서를 관리해야 하므로 구현이 더 복잡할 수 있습니다.
  • 데이터베이스에 커서로 사용할 고유 값(예: ID)이 필요합니다.

3. 페이징 선택: Offset vs Cursor

언제 Offset-based를 사용할까?

  • 간단한 애플리케이션에서 데이터 양이 적고, 페이징의 성능이 크게 중요하지 않은 경우.
  • 이미 SQL 기반의 전통적인 데이터베이스와 연동하고 있고, 오프셋 방식을 쉽게 사용할 수 있을 때.

언제 Cursor-based를 사용할까?

  • 대량의 데이터를 처리하거나, 데이터가 자주 변경되는 경우.
  • 성능이 중요한 애플리케이션에서 데이터의 정확성과 성능을 보장해야 할 때.

4. Relay 스타일 페이징

Relay는 GraphQL 클라이언트 라이브러리 중 하나로, Cursor-based pagination을 사용할 때 권장되는 페이징 방식입니다. Relay 스타일 페이징은 edges와 pageInfo 구조를 사용하며, GraphQL API 설계 시 모범 사례로 많이 사용됩니다.

Relay 스타일 페이징 구조:

  • edges: 데이터를 담고 있는 배열이며, 각 데이터는 node와 cursor로 구성됩니다.
  • pageInfo: 페이지 정보를 담고 있으며, 다음 페이지가 있는지 여부(hasNextPage)와 마지막 커서(endCursor) 등을 포함합니다.

Relay 스타일 쿼리:

query getUsers($first: Int!, $after: String) {
  users(first: $first, after: $after) {
    edges {
      node {
        id
        name
        email
      }
      cursor
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

5. 페이징을 더 효율적으로 관리하는 방법

  • 서버에서 페이징 제한 설정: 서버에서 limit 값을 제한하여 클라이언트가 너무 많은 데이터를 요청하는 것을 방지할 수 있습니다. 예를 들어, 최대 100개의 데이터만 한 번에 가져올 수 있도록 설정할 수 있습니다.
  • 필터링과 페이징 결합: 페이징과 함께 데이터 필터링 기능을 제공하면 클라이언트가 더 유용하게 데이터를 요청할 수 있습니다. 예를 들어, 특정 조건에 맞는 데이터를 페이징하여 가져올 수 있도록 합니다.
  • 캐싱: 페이징된 데이터를 캐시하여 같은 요청이 반복될 때 서버 자원을 아끼고 응답 시간을 줄일 수 있습니다.

결론

  • Offset-based pagination은 단순한 구현으로 시작하기 좋지만, 대량의 데이터를 다룰 때는 성능 문제가 발생할 수 있습니다.
  • Cursor-based pagination은 데이터의 정확성을 유지하면서 더 나은 성능을 제공합니다. 특히 데이터가 자주 변경되는 애플리케이션에서 유리합니다.
  • Relay 스타일 페이징은 GraphQL API에서 많이 사용하는 패턴이며, 성능과 확장성을 모두 고려한 좋은 선택입니다.

페이징은 애플리케이션의 데이터 처리 성능을 최적화하는 중요한 기법이므로, 사용하려는 데이터의 양과 특성에 맞게 페이징 방식을 선택하는 것이 중요합니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다