GUIA

Paginação

Paginação Relay cursor-based com connections, edges e nodes.

Visão Geral

Listas de itens na API (como produtos) usam o padrão de paginação Relay cursor-based. Em vez de usar page/limit, você usa first/after para avançar e last/before para voltar.

Connections

Uma connection é o tipo que encapsula uma lista paginada. Ela contém:

CampoTipoDescrição
edges[Edge!]!Lista de edges (cada edge contém um node e um cursor).
pageInfoPageInfo!Informações de paginação (hasNextPage, hasPreviousPage, cursors).
totalCountIntNúmero total de itens (quando disponível).

Edges

Cada edge representa um item na lista e contém:

CampoTipoDescrição
nodeObject!O objeto real (ex: Product, Order).
cursorString!Cursor opaco usado para paginação. Passe como after ou before.

PageInfo

O objeto PageInfo indica o estado da paginação:

CampoTipoDescrição
hasNextPageBoolean!Se existe uma próxima página.
hasPreviousPageBoolean!Se existe uma página anterior.
startCursorStringCursor do primeiro item da página.
endCursorStringCursor do último item da página.

Argumentos de Paginação

ArgumentoTipoDescrição
firstIntQuantidade de itens a buscar (para frente).
afterStringCursor após o qual buscar (para frente).
lastIntQuantidade de itens a buscar (para trás).
beforeStringCursor antes do qual buscar (para trás).
Dica: Use first + after para avançar páginas. Na primeira chamada, omita after. Nas chamadas seguintes, passe pageInfo.endCursor como after.

Primeira Página

GraphQL
query GetProducts($hostname: String!) {
  client(hostname: $hostname) {
    products(first: 12) {
      edges {
        cursor
        node {
          id
          title
          price
          images { url }
        }
      }
      pageInfo {
        hasNextPage
        endCursor
      }
      totalCount
    }
  }
}

Resposta

JSON
{
  "data": {
    "client": {
      "products": {
        "edges": [
          {
            "cursor": "YXJyYXljb25uZWN0aW9uOjA=",
            "node": {
              "id": "UHJvZHVjdDphYmMx",
              "title": "Camiseta Premium",
              "price": 8990,
              "images": [{ "url": "https://..." }]
            }
          }
        ],
        "pageInfo": {
          "hasNextPage": true,
          "endCursor": "YXJyYXljb25uZWN0aW9uOjEx"
        },
        "totalCount": 48
      }
    }
  }
}

Próxima Página

GraphQL
query GetNextPage($hostname: String!) {
  client(hostname: $hostname) {
    products(
      first: 12
      after: "YXJyYXljb25uZWN0aW9uOjEx"
    ) {
      edges {
        cursor
        node {
          id
          title
          price
        }
      }
      pageInfo {
        hasNextPage
        endCursor
      }
    }
  }
}