Handling checkbox filters in a NextJS app with Groq queries and React state

// components/FilteredPosts.jsx
import { useState, useEffect } from 'react';
import { client } from '@/sanity/lib/client';

export default function FilteredPosts() {
  const [filters, setFilters] = useState({
    featured: false,
    published: false,
    hasImage: false
  });
  const [posts, setPosts] = useState([]);

  // Handle checkbox changes
  const handleFilterChange = (filterName) => {
    setFilters(prev => ({
      ...prev,
      [filterName]: !prev[filterName]
    }));
  };

  // Fetch filtered posts
  useEffect(() => {
    const fetchPosts = async () => {
      const query = buildQuery(filters);
      const result = await client.fetch(query);
      setPosts(result);
    };
    
    fetchPosts();
  }, [filters]);

  return (
    <div>
      <div className="filters">
        <label>
          <input
            type="checkbox"
            checked={filters.featured}
            onChange={() => handleFilterChange('featured')}
          />
          Featured Only
        </label>
        <label>
          <input
            type="checkbox"
            checked={filters.published}
            onChange={() => handleFilterChange('published')}
          />
          Published Only
        </label>
        <label>
          <input
            type="checkbox"
            checked={filters.hasImage}
            onChange={() => handleFilterChange('hasImage')}
          />
          Has Image
        </label>
      </div>
      
      <div className="posts">
        {posts.map(post => (
          <div key={post._id}>{post.title}</div>
        ))}
      </div>
    </div>
  );
}

function buildQuery(filters) {
  // Start with base query
  let conditions = ['_type == "post"'];
  
  // Add conditions based on active filters
  if (filters.featured) {
    conditions.push('featured == true');
  }
  
  if (filters.published) {
    conditions.push('publishedAt != null');
  }
  
  if (filters.hasImage) {
    conditions.push('defined(mainImage)');
  }
  
  // Join conditions with && operator
  const filterString = conditions.join(' && ');
  
  // Return complete GROQ query
  return `*[${filterString}] | order(publishedAt desc) {
    _id,
    title,
    slug,
    publishedAt,
    featured,
    mainImage
  }`;
}

function buildAdvancedQuery(filters) {
  let conditions = ['_type == "post"'];
  
  // Filter by multiple selected categories
  if (filters.categories && filters.categories.length > 0) {
    const categoryRefs = filters.categories.map(id => `"${id}"`).join(', ');
    conditions.push(`references(*[_type == "category" && _id in [${categoryRefs}]]._id)`);
  }
  
  // Filter by boolean fields
  if (filters.featured) {
    conditions.push('featured == true');
  }
  
  const filterString = conditions.join(' && ');
  
  return `*[${filterString}] {
    _id,
    title,
    categories[]-> {
      _id,
      title
    }
  }`;
}

// app/posts/page.jsx
import { client } from '@/sanity/lib/client';

export default async function PostsPage({ searchParams }) {
  const params = await searchParams; // await if using Next.js 15
  const featured = params.featured === 'true';
  const published = params.published === 'true';
  
  let conditions = ['_type == "post"'];
  if (featured) conditions.push('featured == true');
  if (published) conditions.push('publishedAt != null');
  
  const query = `*[${conditions.join(' && ')}]`;
  const posts = await client.fetch(query);
  
  return (
    <div>
      <FilterForm /> {/* Client component with checkboxes */}
      <PostsList posts={posts} />
    </div>
  );
}