Note: This is a multi-part series; if you already know about relay pagination, feel free to .

RelayCursor Connection Specification는 GraphQL의 페이지 매김에 대한 업계 표준이 되었습니다.

Relay, Apollo 또는 urql을 사용하는지 여부에 관계없이 사양은 많은 클라이언트 측 라이브러리에서 지원됩니다. 따라서 자체 클라이언트 측 페이지 매김 논리를 구현하고 싶지 않은 사람들(대부분의 사용자)이 쉽게 선택할 수 있습니다.

💬 페이지 매김 문법

페이징 가능한 필드를 선언하기 전에 다음 프리미티브에 대해 알고 싶을 것입니다.

가장자리

AnEdge은 페이지가 매겨진 응답(노드)의 각 항목이 컬렉션(커서)의 위치와 함께 제공되도록 하는 컨테이너 유형입니다.

type UserEdge {
  node: User!
  cursor: String!
}

페이지 정보

PageInfo은 페이지 매김 요청에 대한 정보를 제공하는 메타데이터 유형입니다.

type PageInfo {
  startCursor: String
  endCursor: String
  hasNextPage: Boolean!
  hasPreviousPage: Boolean!
}

연결

AConnection는 Edge 및 PageInfo 값을 집계하는 컨테이너 유형이며 페이지가 매겨진 모든 응답의 루트 유형입니다.

type UserConnection {
  edges: [UserEdge!]!
  pageInfo: PageInfo!
}

🎨 페이징 가능한 필드 만들기

필드에 페이지 매김 지원을 추가하는 것은 매우 간단합니다. 이 필드는 first , after , last 및 before (나중에 자세히 설명)의 네 가지 인수를 가져와 연결을 반환해야 합니다.

type Query {
  users(
    first: Int,
    after: String,
    last: Int, 
    before: String
  ): UserConnection!
}

🏎️ 페이지 순회

페이지가 매겨진 필드는 두 개의 개별 그룹으로 나눌 수 있는 네 개의 인수를 사용합니다.

앞으로 페이지 매김

Forward pagination은 컬렉션의 페이지를 위에서 아래로 가져오는 프로세스입니다.

인수

정방향 페이지 매김을 사용하기 위한 인수는 다음과 같습니다.

first - 반품할 항목 수(필수)

after - 컬렉션에서 시작할 위치와 유사한 커서(선택 사항)

검색

위에서 볼 수 있듯이 페이지가 매겨진 첫 번째 쿼리에는 first 인수만 포함됩니다. 이렇게 하면 컬렉션의 맨 위에서 시작하도록 백엔드에 알립니다.

후속 쿼리의 경우 after 인수를 사용하여 어디에서 계속할지 백엔드에 지시합니다. 이 값은 이전 응답의 마지막 에지 커서에 해당합니다.

뒤로 페이지 매김

Backward pagination은 컬렉션의 페이지를 아래에서 위로 가져오는 프로세스입니다.

인수

뒤로 페이지 매김을 사용하기 위한 인수는 다음과 같습니다.

last - 반품할 항목 수(필수)

before - 컬렉션에서 시작할 위치와 유사한 커서(선택 사항)

검색

이 두 번째 예는 친숙해 보일 수 있습니다. 이는 정방향 페이지 매김과 거의 동일하기 때문입니다.

순방향 페이지 매김과 마찬가지로 첫 번째 쿼리에 대해 페이지 크기가 별도로 전송됩니다(이번에는 last가 아닌 first).

다시, 후속 쿼리의 경우 백엔드에 어디에서 계속할지 지시하는 커서가 제공됩니다(이번에는 before 대신 after ). 이 값은 이전 응답의 첫 번째(마지막이 아닌) 가장자리에 있는 커서에 해당합니다.

가장자리가 반환되는 정렬 순서는 앞으로 또는 뒤로 페이지 매김이 사용되는지 여부에 관계없이 동일하다는 점에 유의해야 합니다.


읽어 주셔서 감사합니다!

이 게시물이 마음에 드셨다면 반응 🦄을 해주시거나 의견이 있으시면 아래에 댓글 🤔을 남겨주세요.

Twitter 에서 저를 때릴 수도 있습니다.

면책 조항: 이 기사에 표현된 모든 생각과 의견은 저의 것입니다.