Paginazione e ordinamento

Paginazione e ordinamento

Sfoglia e ordina elenchi lunghi di risultati.

Paginazione basata su cursore

I campi di tipo elenco restituiscono connessioni in stile Relay. Vai avanti con first + after, o indietro con last + before, usando i cursori restituiti in pageInfo.

  • first / afterRestituisce i primi N elementi dopo un cursore (avanti).
  • last / beforeRestituisce gli ultimi N elementi prima di un cursore (indietro).
paginatedIssues.graphql
query ListIssues($orgId: ID!, $first: Int!, $after: Cursor) {
  organization(id: $orgId) {
    issues(
      first: $first
      after: $after
      orderBy: { field: CREATED_AT, direction: DESC }
    ) {
      totalCount
      edges {
        cursor
        node {
          id
          friendlyId
          title
        }
      }
      pageInfo {
        hasNextPage
        endCursor
      }
    }
  }
}

Struttura della connessione

Ogni connessione espone un elenco di edges, un oggetto pageInfo e un totalCount.

  • edges[].nodeL'elemento vero e proprio: richiedi i campi che ti servono dentro node.
  • edges[].cursorUn cursore opaco che punta a questo elemento, per paginare da qui.
  • pageInfo.hasNextPage / hasPreviousPageSe esistono altri elementi in quella direzione.
  • pageInfo.startCursor / endCursorPassa endCursor come prossimo valore di after per ottenere la pagina successiva.
  • totalCountNumero totale di elementi in tutte le pagine.
RISPOSTA
{
  "totalCount": 128,
  "edges": [
    {
      "cursor": "Y3Vyc29yOjE5",
      "node": { "id": "rprdbtyvc51ys7g7xq9xwra8cm", "friendlyId": 20, "title": "..." }
    }
  ],
  "pageInfo": {
    "hasNextPage": true,
    "endCursor": "Y3Vyc29yOjE5"
  }
}

Ordinamento

Passa un oggetto orderBy con un field e una direction. I campi disponibili dipendono dalla connessione.

  • orderBy.fieldIl campo in base al quale ordinare. Ad esempio, CREATED_AT.
  • orderBy.directionASC per crescente o DESC per decrescente.
orderBy.graphql
issues(orderBy: { field: CREATED_AT, direction: DESC })