Filter reference field based on another document's array in Sanity
I have a work page that will have an array of projects to choose from and sort like so:
export default defineType({
name: 'work',
title: 'Work',
type: 'document',
singleton: true,
fields: [
// ...
defineField({
name: 'projects',
title: 'Projects',
type: 'array',
of: [
{
type: 'reference',
to: {
type: 'project'
}
}
]
})
]
});to: { type: 'project' }, can I somehow allow only an array of projects chosen from the Work page?Home page looks like this:
export default defineType({
name: 'index',
title: 'Home',
type: 'document',
singleton: true,
fields: [
// ...
defineField({
name: 'featuredProjects',
title: 'Featured Projects',
type: 'array',
of: [
{
type: 'reference',
to: {
type: 'project' // change this to point to the array of work projects from the schema above?
}
}
]
})
]
});Let’s say the client has published 10 projects. On the work page they have added 6 projects. Then on the home page, they should only be able to choose from the 6 projects in the work page, and not all 10 projects…
Let me know if this makes sense or if I should elaborate more, ha.
Thanks!!
Looking at your schema setup, you want to limit the featuredProjects reference field on your home page to only show projects that have been selected in the projects array on your work page. This is a perfect use case for the dynamic filter option in Sanity reference fields.
You can use the filter option with an async function that queries the work document to get its selected projects, then filters the reference options to only show those. Here's how to implement it:
export default defineType({
name: 'index',
title: 'Home',
type: 'document',
singleton: true,
fields: [
// ...
defineField({
name: 'featuredProjects',
title: 'Featured Projects',
type: 'array',
of: [
{
type: 'reference',
to: [{type: 'project'}],
options: {
filter: async ({getClient}) => {
const client = getClient({apiVersion: '2024-01-01'})
// Fetch the work document and get its project references
const workDoc = await client.fetch(
`*[_type == "work"][0].projects[]._ref`
)
// If no projects are selected in work page, show none
if (!workDoc || workDoc.length === 0) {
return {
filter: '_id == $impossibleId',
params: {impossibleId: 'none'}
}
}
// Only show projects that are in the work page's projects array
return {
filter: '_id in $projectIds',
params: {projectIds: workDoc}
}
}
}
}
]
})
]
});This solution:
- Uses an async filter function that fetches the work document
- Extracts the
_refvalues from the work page'sprojectsarray - Returns a GROQ filter that only shows projects whose
_idis in that list - Handles the edge case where no projects are selected on the work page
Important notes:
- The filter constrains what's shown in the reference picker, but doesn't validate that references stay valid if you later remove projects from the work page
- You might want to add validation to ensure featured projects are always in the work projects list
- The filter runs each time you open the reference picker, so it will always reflect the current state of the work page
If you want even tighter integration, you could also add a custom validation rule to ensure featured projects are always in the work projects list:
validation: Rule => Rule.custom(async (featuredProjects, context) => {
if (!featuredProjects?.length) return true
const {getClient} = context
const client = getClient({apiVersion: '2024-01-01'})
const workProjects = await client.fetch(
`*[_type == "work"][0].projects[]._ref`
)
const invalid = featuredProjects.filter(
fp => !workProjects.includes(fp._ref)
)
return invalid.length === 0
? true
: 'Featured projects must be selected in the Work page first'
})This ensures data integrity even if someone removes a project from the work page after it's been featured.
Show original thread5 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.
