How to optimize Sanity GROQ query with multiple filters for better performance

Looking at your query, there are several performance issues that are likely causing slowness. Here's how to make it significantly faster:

Main Issues

1. String concatenation is building an invalid GROQ query

Your current approach concatenates filter conditions incorrectly. Each filter adds another array slice [condition], which doesn't create valid GROQ syntax. You need proper boolean logic with && operators.

2. No indexes are being utilized

The query starts with *[_type == "video"] which is good, but subsequent filters aren't optimized for the query engine.

3. Multiple reference dereferencing

Fields like grade[].label and category[].title suggest you're dereferencing arrays of references, which is expensive.

Optimized Solution

export async function getFilteredVideos(
  limit,
  filterGrade,
  filterCategory,
  search,
  sort,
  type = "Lesson Video",
  subCategory
) {
  console.time("videos fetch");
  
  // Build filter conditions as an array
  const conditions = ['_type == "video"', `type.name == $type`];
  
  if (filterGrade && filterGrade !== "All Grades") {
    conditions.push(`$filterGrade in grade[].label`);
  }
  
  if (filterCategory && filterCategory !== "All Categories") {
    conditions.push(`$filterCategory in category[].title`);
  }
  
  if (subCategory && subCategory !== "All Subtopic") {
    conditions.push(`subCategory.title match $subCategory`);
  }
  
  if (search && search !== "All") {
    conditions.push(`name match $search`);
  }
  
  // Combine all conditions with &&
  const filterClause = conditions.join(' && ');
  
  // Build order clause
  let orderClause = '';
  if (sort === "longest") orderClause = '| order(duration desc)';
  else if (sort === "shortest") orderClause = '| order(duration asc)';
  else if (sort === "relevance") orderClause = '| order(type.name desc)';
  
  // Build final query with parameters
  const query = `*[${filterClause}] ${orderClause} [0...${limit}] {${videoFields}}`;
  
  const results = await client.fetch(query, {
    type,
    filterGrade,
    filterCategory,
    subCategory,
    search: search ? `${search}*` : undefined
  });
  
  console.timeEnd("videos fetch");
  return results;
}

Key Improvements

1. Use query parameters: Passing values as parameters (the second argument to client.fetch()) is more secure and allows the query engine to optimize better.

2. Proper filter syntax: Combining conditions with && creates a valid GROQ filter that the query engine can process efficiently.

3. Move projection to the end: According to GROQ query optimization best practices, you should filter and sort first, then project fields. This reduces the amount of data processed.

4. Optimize array slicing: Use [0...${limit}] instead of appending the limit - this is the correct GROQ syntax for slicing.

Additional Optimization Tips

If this is still slow with large datasets:

• Add indexes to frequently filtered fields like type.name and grade[].label (if you're on a Growth plan or higher)
• Reduce reference dereferencing: If grade[].label and category[].title are references being dereferenced, consider denormalizing this data or using a more efficient data structure
• Limit your projection: Only include fields in videoFields that you actually need
• Consider pagination: If you're showing paginated results, implement cursor-based pagination which is more efficient than offset-based pagination for large datasets

The query parameter approach combined with proper filter syntax should give you a significant performance boost immediately.