Paginating products with GraphQL

Highlighted
Shopify Partner
18 0 8

Hey guys, how do I say "get 10 products after the 10 first products?". The following will get the first 10:

{
  shop {
    products(first: 10) {
      edges {
        node {
          id
          handle
        }
      }
    }
  }
}

 

Also, since we're here, is there a way to get one specific product by its handle and not by id, which you can do like:
 

{
  node(id: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzk4OTUyODE0NzU=") {
    id
    ... on Product {
      title
    }
  }
}

 

Thanks for the help!

1 Like
Highlighted
Shopify Partner
18 0 8

Ok, got it! 

1) For the first question, you could always use the relay approach, which will pass a "cursor" using the "after" argument: https://facebook.github.io/relay/docs/graphql-connections.html
 

2) For the second question, you can just do this:

{
  shop {
    products(first:1, , query:"my-product-handle") {
      edges {
        cursor
        node {
          id
          handle
        }
      }
    }
  }
}

 

Done! :) But if you know of a better way, please post! For example, how would I display 10 products on the page 8 before knowing any cursors?

0 Likes
Highlighted
Shopify Partner
16 0 6

Regarding the first question you need to get a cursor:

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

 

Which you then use in your next request:

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

 

Regarding the second question I’m afraid thats not possible. At least I haven’t found a way.

You can query products and that searches a few fields, but not the handle. See here: https://help.shopify.com/api/storefront-api/reference/object/shop

1 Like
Highlighted
Shopify Partner
16 0 6

Aw man. Too late!

0 Likes
Highlighted
Shopify Partner
16 0 6

OK so you CAN query for the handle? Have you tried having the handle something completely different from the product name? Does it still work? I’m guessing because Shopify uses Elasticsearch it just matches the handle to the title.

0 Likes
Highlighted
Shopify Partner
18 0 8

Haha Thanks anyway Baldur, very helpful! Also, the way I'm dealing with the handle is to search for it in "query" (seems to work even though it's not in the documentation, try adding a random name as a handle and search for it). Then just loop through the results and check if the handle is exactly the one you need in each iteration (if the handler you are looking for is specific enough it shouldn't be an issue).

0 Likes
Highlighted
Tourist
8 0 1

Hello,

I'm also interested to fetch a specific product based on its handle but I'm not sure if this possible right now. Initially it seems that it works by querying the product handle but if you have products with similar names then the result doesn't seem to be the desired one. I'm getting the first product that matches the queried handle, it's like a full text search at the product handle. To be more specific if you have 2 products with handles like "shoe-name-1" and "shoe-name-2", I will always get the first product as a result even thought I'm querying the exact handle of the 2nd one. 

I'm doing some tests myself and I couldn't get it right. So I would be glad to learn if someone has a succesfull solution for this. I think that being able to find a product by its handle is very important. It is possible at the Admin API and it would be nice to include this feature at the new Storefront API as well.

The API is still in beta and maybe there are plans to add this later on. Who knows... This is a question that someone from the Shopify staff can answer.  

Also, I'm missing the feature where someone can fetch collection products and use as a default sortKey the one that is saved by the store owner  when creating the collection.

Thanks

1 Like
Highlighted
Shopify Partner
18 0 8

Hey Evan, thanks for adding your voice here. Hopefully we'll see the handle and default sort functionalities implemented soon.

About the handle though, I'd recommend that for now you get the first, say, 5 products with that query and iterate through them checking against the desired handle and breaking the loop on match. Not ideal, but more robust than just getting the first result. Hope this helps!

1 Like
Highlighted
Tourist
8 0 1

It makes sense and is actually a clever workaround. 

Thanks for the reply. 

0 Likes
Highlighted
Shopify Partner
16 0 6

I noticed this is now implemented.

You can do:

{
  shop {
    productByHandle(handle:"my-product-handle") {
      id
      title
    }
  }
}

 

1 Like