Storefront GraphQL API: products.filters is empty

[rjdelrosario]

Hello,

When querying 2023-01 products in the Storefront GraphQL API, the filters returned are empty, even though there are products returned. Meanwhile, while querying collection, the filters are non-empty. What could possibly be the cause?

Here's the GraphQL query:

query Products {
  products(first: 10, query: "scuba", sortKey: TITLE) {
    filters {
      id, label, type
      values { id, count, input, label }
    }
    nodes { id, title }
  }
}

Returns:

{
  "data": {
    "products": {
      "filters": [],
      "nodes": [
        {
          "id": "gid://shopify/Product/7180339249336",
          "title": "Kahidlaw Diving Mask"
        },
        {
          "id": "gid://shopify/Product/7162307543224",
          "title": "Katipan Case for Foldable Snorkel"
        },
        {
          "id": "gid://shopify/Product/7162303152312",
          "title": "Katipan Snorkel"
        },
        {
          "id": "gid://shopify/Product/6652713271480",
          "title": "Marahuyo Diving Mask"
        },
        {
          "id": "gid://shopify/Product/7145005973688",
          "title": "Matahom Oval Diving Mask"
        },
        {
          "id": "gid://shopify/Product/7212527157432",
          "title": "SSI Open Water"
        },
        {
          "id": "gid://shopify/Product/7224063295672",
          "title": "SSI Open Water Diver"
        },
        {
          "id": "gid://shopify/Product/7224072667320",
          "title": "SSI Try Scuba"
        }
      ]
    }
  }
}

When doing the same search via the online store, there are filters provided.

Thank you in advance.

[ShopifyDevSup]

Hi @rjdelrosario 👋

The Filter object connects from `ProductConnection` which is accessible through collections. At this time, the `products` query does not support a `filters` argument, instead you can specify search syntax for products using the `query` argument.  Below is an example:

{
    products (first:10, query: "tags:scuba"){
        nodes {
            id
            tags
        }
    }
}

With the `collection` query, the filters argument is supported for `ProductConnection.filters`. We have a great guide to filtering products in a collection here, and you can see from the below example that `filters` are formatted differently from search syntax:

{
    collection (handle:"all-products") {
        products (first:5, filters: {
            price: { min: 10, max: 100 }
        }){
            filters {
                id
                values { input }
            }
            nodes {
                variants (first:10) {
                    nodes {
                        price { amount }
                    }
                }
            }
        }
    }
}

Hope that helps!

[jeranfox]

Hi @ShopifyDevSup,

If I understand correctly, @rjdelrosario is not asking about WRITING filter arguments TO the query, but rather they're asking about READING filter options FROM the query.

Your response does a good job of explaining the difference between the collection query and the products query when it comes to the caller supplying filters to get a filtered response.

But I believe we're looking for the opposite. We want to make a request to get the set of possible filters as a return value. As you'll notice in the section they title "Returns", the filters array is empty.

So it's fine that we need to use the query syntax to supply filters, but how do we know what set of filters we can use to begin with?

For example, in the image they attached, it shows possible filters such as "Brand" with possible filter values such as "DiveCenter.PH" and "Sanghinga". The question is, where do we get those filter values in the first place?

Would love an answer, thank you kindly!

[ShopifyDevSup]

Hi @jeranfox 👋 Thanks for clarifying!

There is a `filters` section in the query that will return all available filters on products, and all possible values for each filter. 

{
   collection ... {
       products ... {
           filters {        # <-------this section
               id
               values { input }
           }
           nodes { ...

Here is an example response where we can see that 2 product metafields `filter.p.m.custom.length_filter` and `filter.p.m.test.is_magic` are valid filters, and it lists of all possible values for those filters: 

{ "data": { "collection": { "products": {
    "filters": [
        {
            "id": "filter.p.m.custom.length_filter",
            "values": [ # <-- all possible values for length_filter
                {
                    "input": "{\"productMetafield\":{\"namespace\":\"custom\",\"key\":\"length_filter\",\"value\":\"1\"}}"
                },
                {
                    "input": "{\"productMetafield\":{\"namespace\":\"custom\",\"key\":\"length_filter\",\"value\":\"10\"}}"
                }
            ]
        },
        {
            "id": "filter.p.m.test.is_magic",
            "values": [ # <-- all possible values for is_magic
                {
                    "input": "{\"productMetafield\":{\"namespace\":\"test\",\"key\":\"is_magic\",\"value\":\"true\"}}"
                }
            ]
        },

This doc has another example for reference. 

Hope that helps!

[jeranfox]

Thank you for the reply @ShopifyDevSup,

If you'll notice in @rjdelrosario's post they say:

"When querying 2023-01 products in the Storefront GraphQL API, the filters returned are empty, even though there are products returned. Meanwhile, while querying collection, the filters are non-empty."

Your recent response tells us how to get the possible filters for a collection, and we're quite happy with that.

But the query in question is not the collection query, it is the products query. As you'll notice in the section that says "Here's the GraphQL query:" it is not a collections query. They are querying products, and that is the query that is returning an EMPTY filters array.

We want to know how to get the filters for a products query:
https://shopify.dev/docs/api/storefront/2023-04/queries/products

To reiterate @rjdelrosario's post. The online storefront seems to have no problem displaying a list of filters for a product search, however the storefront api isn't giving us a way to get these filters. Again, this is outside of the context of a collection.

[rjdelrosario]

Hey @jeranfox! Thanks for the reinforcement.

@ShopifyDevSup, my intention is getting the filter list from the products query since the one from collections already works as I've tested and as you showed. 

The reason for distinguishing the two is because we provide a search textbox in the home screen of our app, therefore it is not collection specific. I hope you get my point. On 2023-01/products the filters are empty, whether query is provided or not.

My gut feel is that this is either a bug, or we are missing something on the Shopify admin side.

[jeranfox]

Hi, any update on this? Many other developers are facing this issue, so this would be a huge win for everyone.

https://community.shopify.com/c/storefront-api-and-sdks/available-product-filters/td-p/1647918
https://community.shopify.com/c/storefront-api-and-sdks/bug-available-product-filters/td-p/1879448

[langleyd]

Hey @jeranfox ,

I ran in to the same issue. If you use the search api rather than the products api(with the query param) the filters are correctly returned in "productFilters".
Here's an example query

{
  search(first:1, query:"The", types:[PRODUCT]) {
   	nodes {
       ... on Product {
      title
    	}
    }
    productFilters {
      type
      label
    }
  }
}

Hope it helps.

[hendrik_mltch]

Any Updates on this one?