본문으로 건너뛰기

Pagination

개요​

페이지네이션은 데이터 셋에서 한 번에 모든 데이터를 가져오는 것이 아니라, 조각조각 나눠서 가져오는 방법입니다. 딜리버리트래커에서는 GraphQL Relay-style Connection Pagination 방식을 사용합니다.

Relay-style Connection Pagination 이란?​

Relay-style Pagination은 데이터를 연결된 목록 형태로 제공합니다. 각 아이템은 "node"로, 연결된 목록 전체는 "edges"와 "pageInfo" 두 부분으로 구성됩니다.

구성 요소​

  • edges: 실제 데이터 목록입니다. 각각의 아이템은 node와 cursor로 구성됩니다.
  • node: 실제 데이터 객체입니다.
  • cursor: 각 node의 위치를 나타내는 고유한 식별자입니다.
  • pageInfo: 페이지네이션 정보를 나타내며, startCursor, endCursor, hasPreviousPage, hasNextPage 등의 정보를 포함합니다.

예제​

{
  carriers(first: 10) {
    edges {
      node {
        id
        name
      }
      cursor
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

위 예제에서 carriers(first: 10)는 처음 10개의 아이템을 가져옵니다. 각 아이템의 id와 name을 가져오며, cursor로 해당 아이템의 위치를 알 수 있습니다. pageInfo는 다음 페이지의 데이터가 있는지와 마지막 아이템의 cursor를 제공합니다.

쿼리 인자​

Relay-style Pagination은 다음의 인자들을 사용하여 페이지네이션을 합니다:

  • first: 가져올 아이템의 수입니다.
  • after: 해당 cursor 이후의 아이템부터 가져옵니다.
  • last: 마지막에서부터 가져올 아이템의 수입니다.
  • before: 해당 cursor 이전의 아이템까지 가져옵니다.

예를 들어, first: 10과 after: "someCursor"를 조합하면, "someCursor" 다음의 10개 아이템을 가져옵니다.

결론​

Relay-style Connection Pagination은 GraphQL에서 효과적인 페이지네이션을 위한 표준입니다. edges, node, cursor 및 pageInfo 개념을 이해하면 쉽게 데이터를 조각조각 나눠 가져올 수 있습니다.