Pagination issue in Direct API Access

Extensions
1

Hi there,

We are having Pagination issues with the new Direct API Access in POS UI Extensions. @Rune-Shopify , is there any chance you could please take a look at this?

Essentially, when we request the next page, the product response only contains 1 single product (which is the last product from the list), instead of the next 30 products.

For example:

Initial load:

01-initial-load
01-initial-load774×381 72.8 KB

Next page load:
(as you can see - just the “Grilled Cheese Sandwich” product has loaded)

02-next-page-load
02-next-page-load772×350 72.7 KB

Initial load:

01-pos-initial-load
01-pos-initial-load757×160 12.7 KB

Next page load:
(as you can see - just the “Grilled Cheese Sandwich” product has loaded)

02-pos-second-screen
02-pos-second-screen752×123 6.83 KB

Graph explorer result: Initial Load

01-graph-explorer
01-graph-explorer818×608 48.2 KB

Graphql explorer: next page request

BUT, in the POS extension:

It only returns the last item from the supposedly 30-item result.

As seen in the image below: We are using the same parameters, (id, after). The same parameter we used in the graphql explorer.

final
final751×339 66.4 KB

Any advice would be very much appreciated :folded_hands:t5:

2

Did you have any progress with this @adamwooding ?

3

Hey there,

Thank you for flagging this. We’ve confirmed this is a current issue and our team is actively investigating. In the meantime, a workaround is to make sure you include the cursor field on the product edge since we depend on it for our caching.

Here’s an example of a query that should work:

      query($id: ID!, $first: Int!, $after: String) {
        collection(id: $id) {
          id
          title
          products(first: $first, after: $after) {
            pageInfo {
              hasNextPage
              endCursor
            }
            edges {
              node {
                id
                title
                handle
                priceRangeV2 {
                  minVariantPrice {
                    amount
                    currencyCode
                  }
                }
              }
              cursor <-- make sure to include this
            }
          }
        }
      }

Edit: Pagination using connection edges like the above requires you include the cursor in your query. You can also use forward pagination, which doesn’t require the cursor field.

1 Like
4

Hey @JordanFinners and @AndyC ,

Thank you both very much for your replies :folded_hands:t5:

Andy - thank you for taking the time to provide the workaround. We’ll do some testing over the next few days and try to get this to work.

I’ll be sure to let you know how we go with it.

Thanks again,
Adam