Filter references based on selected product in nested variants array
I need to filter reference based on the selected product. Since I need to be able to choose several variants per product I cant seem to find a way to get the selected product.
Anyone know a solution to this?
I can see you're trying to filter variant references based on a selected product within an array structure. This is a common challenge when working with nested arrays in Sanity Studio.
The key issue is that when you're in the variants array, you need to access the parent product field to filter which variants should be available. The tricky part is that parent gives you the variants array itself, so you need to traverse up through the document to find the product reference.
Based on the conditional fields documentation and solutions from the Sanity community, here's how to solve this:
defineField({
name: 'products',
title: 'Products',
type: 'array',
of: [
defineArrayMember({
name: 'productWithSelectedVariants',
title: 'Product with selected variants',
type: 'object',
fields: [
defineField({
name: 'product',
title: 'Product',
type: 'reference',
to: [{ type: 'product' }],
weak: true,
}),
defineField({
name: 'variants',
title: 'Variants',
type: 'array',
of: [
defineArrayMember({
name: 'variant',
title: 'Variant',
type: 'reference',
weak: true,
to: [{ type: 'productVariant' }],
options: {
filter: ({ parent, document }) => {
// Find the product object that contains this variants array
const productObj = document.products?.find(
(p) => p.variants === parent
)
// Get the product reference ID
const productID = productObj?.product?._ref
if (!productID) {
return {
filter: '_type == "productVariant"',
params: {}
}
}
return {
filter: '_type == "productVariant" && references($productID)',
params: {
productID,
},
}
},
},
}),
],
}),
],
}),
],
})How this works:
- The
filtercallback receivesparent(the variants array) anddocument(the entire document) - We search through
document.productsto find which product object contains this specificvariantsarray by comparingp.variants === parent - Once found, we extract
product._refto get the product ID - We use GROQ's
references()function to filter variants that reference this specific product
Important notes:
- The
parentparameter in the filter callback refers to the variants array itself, not the parent object containing it - You need to search through the document to find which product "owns" the current variants array
- Make sure your
productVariantdocuments have a reference field pointing back to their parentproductfor thereferences()filter to work properly - If no product is selected yet, the filter falls back to showing all variants (you could also return an empty result set if preferred)
If your variant documents don't have a reference back to the product, you'll need to adjust the GROQ filter to match based on other fields like a productId string field or similar identifier that connects variants to their products.
Show original thread2 replies
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
