Filtering product variant by product slug and combined variant options?

šŸ†˜ Support
1

Hi,
Iā€™m trying to get the variant data by the product slug (which will be the product page params) and combined variant options from the product page query params (the ā€œunifiedā€ field represented as a single string).
Please see below my naive attempt to filter the variants associated with a particular product.
How would you recommend I go about this?


query Product($slug: String!, $unified: String!) {
  product(filter: {slug: {eq: $slug}}) {
    productTitle
    slug
    variants(filter: {unified: {eq: $unified}}) {
      unified
      variantTitle
    }
  }
}

Sorry if thereā€™s already this information. Iā€™ve read plenty but Iā€™m still confused as to what is possible and how to achieve it. Thank you.

2

Hi @slane,

Sorry, I donā€™t think you can filter a model by a related itemā€™s values :frowning:

As a workaround, maybe you can over-fetch and then filter it on the client side, like this?

First get the single product with all of its variants and their unified:

image
image970Ɨ922 61.2 KB

Then on the client side:

let productWithFilteredVariants = {
    ...response.data.product,
    filteredVariants: response.data.product.variants.filter(variant => variant.unified === 'Sizes')
}

// optional, just to remove the unfiltered `variants` for clarity
delete(productWithFilteredVariants.variants)

productWithFilteredVariants: {
  "id": "epY8UDOtSpOKOkgrH20I8w",
  "title": "T-shirt",
  "filteredVariants": [
    {
      "id": "Wyx7CL5EQJWXIUQJzyGNwg",
      "title": "Large",
      "unified": "Sizes"
    },
    {
      "id": "WqzfQh1gRAGcp38IhFavlw",
      "title": "Medium",
      "unified": "Sizes"
    },
    {
      "id": "bfq2xQOvTrmQaJYH_c8imA",
      "title": "Small",
      "unified": "Sizes"
    }
  ]

Itā€™s not ideal, I know. Sorry about that!

3

Ah, ok. Thank you Roger. Iā€™ve reworked my schema so that variants consume products rather than the other way round. Variants can then consume a computed string field (using the great plugin) of the product slug field. If any of that makes sense to anyone looking for a possible workaround in the future.

1 Like