Fetch next/previous product

Retired Boards Appdev Graphql Basics And Troubleshooting
1

Hi there,

We were wondering if there is a way in GraphQL to fetch the next or previous product after knowing the defaultCursor like in this call:

{
  product(id: "gid://shopify/Product/1") {
    id
    title
    defaultCursor
  }
}

So now we want to go to product 2 based on the ID or defaultCursor.

Also, if not possible, is it possible to query on ID like this?

{
  products(first: 1, query: "id:'gid://shopify/Product/1'") {
    edges {
      cursor
      node {
        id
        title
      }
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
    }
  }
}

The above example is not working (or at least I get a result that is incorrect).

Thanks in advance for your help.

2

You have to request a cursor for this:

products(first: 5) {
      pageInfo {
        hasNextPage
        hasPreviousPage
      }
      edges {
        node {
          id
          handle
        }
        cursor
      }
    }

The you can use the value of the cursor in subsequent requests:

products(first: 5 after:"<cursor_value_of_last_product>") {
      pageInfo {
        hasNextPage
        hasPreviousPage
      }
      edges {
        node {
          id
          handle
        }
        cursor
      }
    }
3

Yeah, that was the second query I did.

But I want to fetch it also based on the ID.

Use case:

I have an app where I have a product detail page.
On that product detail page, I want a previous and next button.

I was just wondering which was the easiest way to get the previous and next product.

4

I think the position of the product is only relevant when you put the product in the context of a collection. I doubt there is a global position for all products part of the catalog.

5

Makes sense.

But wanted to ask here first, just to be sure.

Thanks @Visely-Team !

6

Hey @jasperesign

I’m having the exact use case. How did you get the next and previous product eventually?