How to Implement Faceted Search Using CMS-Structured Data

// schema/article.js
export default {
  name: 'article',
  type: 'document',
  fields: [
    { name: 'title', type: 'string' },
    { name: 'slug', type: 'slug', options: { source: 'title' } },
    {
      name: 'category',
      type: 'string',
      options: { list: ['API', 'CLI', 'Studio', 'GROQ', 'Webhooks'] },
    },
    {
      name: 'difficulty',
      type: 'string',
      options: { list: ['beginner', 'intermediate', 'advanced'] },
    },
    { name: 'tags', type: 'array', of: [{ type: 'string' }] },
    { name: 'publishedAt', type: 'datetime' },
    { name: 'body', type: 'array', of: [{ type: 'block' }] },
  ],
}

// components/FacetedArticleSearch.jsx
import { useState, useEffect, useMemo } from 'react'
import { client } from '../lib/sanity'

const ALL_ARTICLES_QUERY = `*[_type == "article"] {
  _id, title, category, difficulty, tags,
  "slug": slug.current, publishedAt
}`

export default function FacetedArticleSearch() {
  const [allArticles, setAllArticles] = useState([])
  const [activeFacets, setActiveFacets] = useState({
    category: null,
    difficulty: null,
    tags: [],
  })

  useEffect(() => {
    client.fetch(ALL_ARTICLES_QUERY).then(setAllArticles)
  }, [])

  // Apply facets client-side for small dataset
  const filteredArticles = useMemo(() => {
    return allArticles.filter((article) => {
      if (activeFacets.category && article.category !== activeFacets.category)
        return false
      if (activeFacets.difficulty && article.difficulty !== activeFacets.difficulty)
        return false
      if (activeFacets.tags.length > 0) {
        const hasAllTags = activeFacets.tags.every((tag) =>
          article.tags?.includes(tag)
        )
        if (!hasAllTags) return false
      }
      return true
    })
  }, [allArticles, activeFacets])

  // Compute facet counts from filtered set (excluding own dimension)
  const categoryFacets = useMemo(() => {
    const base = allArticles.filter((a) => {
      if (activeFacets.difficulty && a.difficulty !== activeFacets.difficulty)
        return false
      if (activeFacets.tags.length > 0) {
        return activeFacets.tags.every((t) => a.tags?.includes(t))
      }
      return true
    })
    return base.reduce((acc, a) => {
      if (a.category) acc[a.category] = (acc[a.category] || 0) + 1
      return acc
    }, {})
  }, [allArticles, activeFacets.difficulty, activeFacets.tags])

  const toggleTag = (tag) => {
    setActiveFacets((prev) => ({
      ...prev,
      tags: prev.tags.includes(tag)
        ? prev.tags.filter((t) => t !== tag)
        : [...prev.tags, tag],
    }))
  }

  return (
    <div className="faceted-search">
      <aside className="facets">
        <h3>Category</h3>
        {Object.entries(categoryFacets).map(([cat, count]) => (
          <label key={cat}>
            <input
              type="radio"
              name="category"
              checked={activeFacets.category === cat}
              onChange={() =>
                setActiveFacets((p) => ({ ...p, category: cat }))
              }
            />
            {cat} ({count})
          </label>
        ))}
        <button onClick={() => setActiveFacets((p) => ({ ...p, category: null }))}>
          Clear
        </button>

        <h3>Difficulty</h3>
        {['beginner', 'intermediate', 'advanced'].map((level) => (
          <label key={level}>
            <input
              type="radio"
              name="difficulty"
              checked={activeFacets.difficulty === level}
              onChange={() =>
                setActiveFacets((p) => ({ ...p, difficulty: level }))
              }
            />
            {level}
          </label>
        ))}
      </aside>

      <main>
        <p>{filteredArticles.length} results</p>
        {filteredArticles.map((article) => (
          <article key={article._id}>
            <h2>{article.title}</h2>
            <span>{article.category}</span> · <span>{article.difficulty}</span>
          </article>
        ))}
      </main>
    </div>
  )
}

// scripts/indexToTypesense.js
import Typesense from 'typesense'
import { createClient } from '@sanity/client'

const typesense = new Typesense.Client({
  nodes: [{ host: process.env.TYPESENSE_HOST, port: 443, protocol: 'https' }],
  apiKey: process.env.TYPESENSE_ADMIN_KEY,
  connectionTimeoutSeconds: 10,
})

const sanity = createClient({
  projectId: process.env.SANITY_PROJECT_ID,
  dataset: 'production',
  apiVersion: '2024-01-01',
  useCdn: false,
})

// Define the Typesense collection schema
const collectionSchema = {
  name: 'articles',
  fields: [
    { name: 'title', type: 'string' },
    { name: 'category', type: 'string', facet: true },
    { name: 'difficulty', type: 'string', facet: true },
    { name: 'tags', type: 'string[]', facet: true },
    { name: 'publishedAt', type: 'int64' },
    { name: 'slug', type: 'string' },
  ],
  default_sorting_field: 'publishedAt',
}

async function run() {
  // Drop and recreate collection for full reindex
  try { await typesense.collections('articles').delete() } catch {}
  await typesense.collections().create(collectionSchema)

  // Fetch all articles from Sanity
  const articles = await sanity.fetch(
    `*[_type == "article"] {
      "id": _id,
      title,
      category,
      difficulty,
      tags,
      "slug": slug.current,
      "publishedAt": dateTime(publishedAt)
    }`
  )

  // Transform and index
  const documents = articles.map((a) => ({
    ...a,
    publishedAt: new Date(a.publishedAt).getTime() / 1000,
  }))

  await typesense.collections('articles').documents().import(documents)
  console.log(`Indexed ${documents.length} articles`)
}

run()