Paginering

Lijsten komen terug als connectie: een lijst edges met per regel een cursor, en een pageInfo die zegt of er meer is. Dat is het Relay-patroon.

De vorm

Elke connectie heeft dezelfde velden. nodes is een verkorting voor wie de cursors niet nodig heeft.

Name
edges
Type
[Edge!]!
Description
Per regel een cursor en een node.
Name
nodes
Type
[Node!]!
Description
Dezelfde regels zonder de cursors. Handig als je in één keer alles ophaalt.
Name
pageInfo.hasNextPage
Type
Boolean!
Description
Of er na deze pagina nog meer is.
Name
pageInfo.endCursor
Type
String
Description
De cursor van de laatste regel. Geef die terug als after.
Name
pageInfo.hasPreviousPage
Type
Boolean!
Description
Name
pageInfo.startCursor
Type
String
Description
Voor achteruit bladeren, samen met last en before.

Eerste pagina

QUERY

themes

query Themes($first: Int!, $after: String) {
  themes(first: $first, after: $after) {
    edges {
      cursor
      node {
        id
        title
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

Antwoord

{
  "data": {
    "themes": {
      "edges": [
        {
          "cursor": "eyJsYXN0X2lkIjoxNTM2NzMxMDM3NzMwNX0=",
          "node": {
            "id": "gid://rouwkaart/Theme/15367310377305",
            "title": "Bloemen"
          }
        },
        {
          "cursor": "eyJsYXN0X2lkIjoxNTQwNTI0OTUyODE1M30=",
          "node": {
            "id": "gid://rouwkaart/Theme/15405249528153",
            "title": "Zee"
          }
        }
      ],
      "pageInfo": {
        "hasNextPage": true,
        "endCursor": "eyJsYXN0X2lkIjoxNTQwNTI0OTUyODE1M30="
      }
    }
  }
}

Geef endCursor terug als after. De cursor is ondoorzichtig: hij zegt niets over volgorde of positie, en de inhoud kan veranderen zonder aankondiging. Geef hem dus ongewijzigd terug en sla hem niet langdurig op.

Achteruit gaat met last en before. Combineer first en last niet in één verzoek.

Alles ophalen, pagina voor pagina

async function alleThemas() {
  const alles = []
  let after = null

  do {
    const {data} = await rouwkaart(
      `query ($after: String) {
         themes(first: 50, after: $after) {
           nodes { id title handle }
           pageInfo { hasNextPage endCursor }
         }
       }`,
      {after},
    )

    alles.push(...data.themes.nodes)
    after = data.themes.pageInfo.hasNextPage
      ? data.themes.pageInfo.endCursor
      : null
  } while (after)

  return alles
}

first en last moeten tussen 1 en 250 liggen, en ze bepalen wat de query kost, ook als er minder regels terugkomen. Zie Kosten en limieten.

Welke lijsten zijn connecties

Name
themes
Type
ThemeConnection!
Description
De thema's waaruit gekozen kan worden.
Name
webhookSubscriptions
Type
WebhookSubscriptionConnection!
Description
Je eigen abonnementen, eventueel gefilterd op onderwerp.

Kleine lijsten binnen een object, zoals de beelden van een thema, zijn gewone lijsten en geen connectie. Een connectie bestaat om te kunnen bladeren, en bij drie foto's valt er niets te bladeren.