Filtering collection products with in-stock variants

Hydrogen and Storefront APIs
1

Hello, I’m working with a vendor who pulls products by collection id via the collection query. In this query, user-selected filters are passed so that only products whose variants match the selected options are returned (see the “filters” property in “Example graphql variables” below). The problem we’re running into is that products will be returned that have matching variants, but don’t take into account the variants’ stock. Is there any way to amend the query so that only products with at least one matching in-stock variant are returned?

Example use case:
Let’s say we have a product with the following variant combinations:

VariantID Size Fit Color In Stock
1 XXX-Large Slim Blue No
2 XXX-Large Regular Blue Yes

If a user searches by Size: XXX-Large, the product should be returned in the results because there’s at least one in-stock variant that matches the query.
If a user searches by Size: XXX-Large and Fit: Slim, the product should not be returned in the results because there’s not at least one in-stock variant that matches the query.

One note is that the vendor mentioned being unable to make a post-query filter (e.g. fetching the products and variants via the storefront api query, then filtering those results based on inventory levels or some other property) due to limitations with their system.

Example query:

query products(
  $collection_id: ID!
  $first: Int!
  $after: String
  $sort: ProductCollectionSortKeys!
  $reverse: Boolean
  $filters: [ProductFilter!]
) {
  collection(id: $collection_id) {
    products(
      first: $first
      after: $after
      sortKey: $sort
      reverse: $reverse
      filters: $filters
    ) {
      edges {
        cursor
        node {
          id
        }
      }
      filters {
        id
        label
        type
        values {
          label
          count
          input
        }
      }
      pageInfo {
        hasNextPage
      }
    }
  }
}

Example graphql variables:

{
  "collection_id": "gid://shopify/Collection/123",
  "first": 200,
  "sort": "COLLECTION_DEFAULT",
  "filters": [
    {
      "variantOption": {
        "name": "size",
        "value": "XXX-Large"
      }
    },
    {
      "variantOption": {
        "name": "fit",
        "value": "Regular"
      }
    }
  ]
}

Attempts made:

  • Adding { "available": true } to the filters. This seems to only work against the product level and not the variant level.
  • Attempted using the variantMetafield filter and applying a custom.in_stock metafield with true/false values to the variants, but that didn’t seem to change the results.

Thanks in advance.

2

Hi @dkutk

From digging into this it looks like there’s currently no way to achieve this exact filtering behavior using only the Storefront API’s built-in filters. The limitation is that the available filter works at the product level, not the variant level in combination with option filters.

You could combine multiple variantOption filters and available: true, but this will not guarantee that the returned products have an in-stock variant matching all selected options. It will only guarantee that the product has at least one in-stock variant (which may not match the selected options).

3

Understood – thank you for the confirmation.