Paginierung und Sortierung

Paginierung und Sortierung

Blättern Sie durch große Ergebnislisten und sortieren Sie sie.

Cursor-basierte Paginierung

Listenfelder geben Connections im Relay-Stil zurück. Blättern Sie mit first + after vorwärts oder mit last + before rückwärts und verwenden Sie dabei die Cursor, die pageInfo zurückgibt.

  • first / afterGibt die ersten N Elemente nach einem Cursor zurück (vorwärts).
  • last / beforeGibt die letzten N Elemente vor einem Cursor zurück (rückwärts).
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
      }
    }
  }
}

Aufbau der Connection

Jede Connection stellt eine Liste von edges, ein pageInfo-Objekt und einen totalCount bereit.

  • edges[].nodeDas Element selbst – fragen Sie innerhalb von node die Felder ab, die Sie brauchen.
  • edges[].cursorEin opaker Cursor, der auf dieses Element zeigt, um von hier aus zu paginieren.
  • pageInfo.hasNextPage / hasPreviousPageOb es in dieser Richtung weitere Elemente gibt.
  • pageInfo.startCursor / endCursorÜbergeben Sie endCursor als nächsten after-Wert, um die folgende Seite abzurufen.
  • totalCountGesamtzahl der Elemente über alle Seiten.
ANTWORT
{
  "totalCount": 128,
  "edges": [
    {
      "cursor": "Y3Vyc29yOjE5",
      "node": { "id": "rprdbtyvc51ys7g7xq9xwra8cm", "friendlyId": 20, "title": "..." }
    }
  ],
  "pageInfo": {
    "hasNextPage": true,
    "endCursor": "Y3Vyc29yOjE5"
  }
}

Sortierung

Übergeben Sie ein orderBy-Objekt mit einem field und einer direction. Welche Felder verfügbar sind, hängt von der Connection ab.

  • orderBy.fieldDas Feld, nach dem sortiert wird. Zum Beispiel CREATED_AT.
  • orderBy.directionASC für aufsteigend oder DESC für absteigend.
orderBy.graphql
issues(orderBy: { field: CREATED_AT, direction: DESC })