Aller au contenu principal

Pagination

Les listes sont paginées avec des curseurs, selon la spécification Relay des connexions. La seule requête (query) de liste qui n'est pas paginée est parentCategories, qui renvoie toutes les catégories de premier niveau en une fois. À l'intérieur d'un enregistrement, certaines listes sont de simples tableaux renvoyés en entier, comme Invoice.items ou Category.children. D'autres sont des connexions, comme Product.variants, Variant.variantPrices ou Variant.stockActivities : paginez-les aussi.

Fonctionnement​

Chaque liste renvoie une connexion :

  • edges : les éléments de la page. Chaque edge a un node (l'élément) et un cursor (un pointeur vers cet élément).
  • pageInfo : startCursor et endCursor (les curseurs du premier et du dernier élément de la page), hasNextPage et hasPreviousPage.
  • totalCount : la taille de la liste entière, pas seulement de la page.

Demandez une page avec first, puis passez l'endCursor reçu comme after pour obtenir la page suivante, jusqu'à ce que hasNextPage soit false.

Taille de page​

  • Sans first ni last, une page contient 20 éléments.
  • Une page contient 50 éléments au maximum. En demander plus renvoie une erreur avec le message "fetching is limited to 50 edges". Son extensions.code dépend de la liste (UnexpectedPaginationArgLimit ou INTERNAL_SERVER_ERROR) : testez le message, ou ne demandez jamais plus de 50.
  • Utilisez first avec after pour avancer, ou last avec before pour revenir en arrière. Ne combinez pas first avec last ou before, ni last avec after.

Première page​

query StockActivities {
stockActivities(first: 10) {
totalCount
pageInfo {
startCursor
endCursor
hasNextPage
hasPreviousPage
}
edges {
cursor
node {
id
}
}
}
}

Réponse :

{
"data": {
"stockActivities": {
"totalCount": 30,
"pageInfo": {
"startCursor": "<cursor of the first item>",
"endCursor": "<cursor of the last item>",
"hasNextPage": true,
"hasPreviousPage": false
},
"edges": [{ "cursor": "<cursor of the first item>", "node": { "id": "…" } }]
}
}
}

Page suivante​

Passez l'endCursor de la page précédente comme after :

query NextStockActivities($after: String) {
stockActivities(first: 10, after: $after) {
pageInfo {
endCursor
hasNextPage
}
edges {
node {
id
}
}
}
}
{ "after": "<cursor of the last item>" }

Page précédente​

Utilisez last et before avec le startCursor de la page courante :

query PreviousStockActivities($before: String) {
stockActivities(last: 10, before: $before) {
pageInfo {
startCursor
hasPreviousPage
}
edges {
node {
id
}
}
}
}

Récupérer une liste entière​

Répétez la requête « page suivante » jusqu'à ce que hasNextPage soit false. Demandez les plus grandes pages (first: 50, le maximum) pour envoyer moins de requêtes.

Les curseurs sont des positions dans la liste. Si des enregistrements sont ajoutés ou archivés pendant votre lecture, un élément peut apparaître deux fois ou être sauté. Dédoublonner par id supprime les répétitions, pas les éléments sautés : pour rattraper ce que vous avez manqué, utilisez les webhooks ou, pour les variantes, le filtre updatedAt. L'ordre par défaut peut varier d'une liste à l'autre : ne vous y fiez pas.