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:

Campo	Tipo	Descrição
edges	[Edge!]!	Lista de edges (cada edge contém um node e um cursor).
pageInfo	PageInfo!	Informações de paginação (hasNextPage, hasPreviousPage, cursors).
totalCount	Int	Número total de itens (quando disponível).

Edges

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

Campo	Tipo	Descrição
node	Object!	O objeto real (ex: Product, Order).
cursor	String!	Cursor opaco usado para paginação. Passe como `after` ou `before`.

PageInfo

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

Campo	Tipo	Descrição
hasNextPage	Boolean!	Se existe uma próxima página.
hasPreviousPage	Boolean!	Se existe uma página anterior.
startCursor	String	Cursor do primeiro item da página.
endCursor	String	Cursor do último item da página.

Argumentos de Paginação

Argumento	Tipo	Descrição
first	Int	Quantidade de itens a buscar (para frente).
after	String	Cursor após o qual buscar (para frente).
last	Int	Quantidade de itens a buscar (para trás).
before	String	Cursor 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
      }
    }
  }
}