How to reload elements of the current page?

GraphQL Admin API Troubleshooting
1

With the REST API, you could technically reload the page you are currently in by simply using the current page info query parameter again.

However, in the GraphQL API we are forced to use cursor based pagination, which is ok with me, because in order to load the next page I have to load a number of nodes after the current page’s last node cursor, and in order to load the previous page I have to load a number of nodes before the current page’s first node cursor.

How do I reload the current page’s nodes again? The method I have thought of, is to keep the previous page’s last cursor, in order to load the same number of nodes after that cursor (and/or the next page’s first cursor, with the opposite method).

This feels kind of weird though. Is there a more valid way that the API itself can help with this situation?

2

Hey! I asked the .dev assistant and it said:

To reload the current page’s nodes using cursor-based pagination in the Shopify GraphQL Admin API, you can use the pageInfo object and the edges array from the response of your initial query. Here’s how you can achieve this:

  1. Store the startCursor and endCursor values: These are part of the pageInfo object in the response. They represent the cursors for the first and last nodes of the current page.
  2. Use the after or before arguments: To reload the current page, you can use the after argument with the startCursor or the before argument with the endCursor from the previous query.

Here is an example query to reload the current page:

query ReloadCurrentPage {
  products(first: 10, after: "cursor_of_previous_page_start") {
    edges {
      cursor
      node {
        id
        title
      }
    }
    pageInfo {
      startCursor
      endCursor
      hasNextPage
      hasPreviousPage
    }
  }
}

Explanation:

  • Replace "cursor_of_previous_page_start" with the startCursor value from the pageInfo of the previous query.
  • The first argument specifies the number of nodes to fetch, which should match the number of nodes in the original query.

If you want to use the endCursor instead, you can modify the query as follows:

query ReloadCurrentPage {
  products(last: 10, before: "cursor_of_previous_page_end") {
    edges {
      cursor
      node {
        id
        title
      }
    }
    pageInfo {
      startCursor
      endCursor
      hasNextPage
      hasPreviousPage
    }
  }
}

Notes:

  • The first and last arguments determine the direction of pagination.
  • Use the pageInfo object to check if there are additional pages (hasNextPage or hasPreviousPage).

This approach ensures that you can reload the same set of nodes as the current page by maintaining the cursors from the previous query.

3

Thanks, I’ve already kind of mentioned this solution with fewer words :sweat_smile: So I am assuming this is the only viable solution through the API?

4

Correct - it does look like this is currently the only option.