Advanced usage

import { liteClient } from 'algoliasearch/lite'
import type { AlgoliaArticle } from '#schema' // Or wherever your types are defined


const ALGOLIA_APP_ID = 'WSV9PQ4NXW';
const ALGOLIA_TOKEN = 'your_algolia_token_here';
const client = liteClient(ALGOLIA_APP_ID, ALGOLIA_TOKEN)

export type AlgoliaFacetList = Record<string, Record<string, number>>

/**
 * Fetch all facets for a given Algolia index.
 * @param indexName - Name of the Algolia index
 * @returns Complete list of facets or null if none found
 */
async function fetchAllFacetsForIndex<T>(
    indexName: string,
): Promise<AlgoliaFacetList | null> {
    const response = await client.searchForHits<T>({
        requests: [
            {
                indexName,
                facets: ['*'],
                hitsPerPage: 0, // We don't need actual hits
                maxValuesPerFacet: 5000, // We might need to adjust this based on expected facet values
            },
        ],
    })

    const data = response.results[0]

    if (!data || !data.facets) return []
    return data.facets satisfies AlgoliaFacetList
}


const facetData = await fetchAllFacetsForIndex<AlgoliaArticle>('articles')
const facetKeys = Object.keys(facetData.value || {})

/**
 * Declare a reactive state where you track selected facets
 * Implementation may vary based on your framework (e.g., Vue, React, etc.)
*/
const facetState = useState('facetState', () => {
    const state: Record<string, string[]> = {}
    facetKeys.forEach((key) => {
        state[key] = []
    })
    return state
})

/**
 * Declare reactive state for search query with debounce
 */
const query = useState('searchQuery', () => '')
const debouncedQuery = useDebounce(query, 300)

/**
 * Declare reactive state for pagination
 */
const PAGE_SIZE = 20
const MAX_PAGE_SIZE = 500
const perPage = useState('perPage', () => PAGE_SIZE)

/**
 * Generate the current filter string based on selected facets
 * @returns Filter string for Algolia queries
 */
const getCurrentFilter = () => {
    const filters: string[] = []
    facetKeys.forEach((key) => {
        const selectedValues = facetState[key]
        if (selectedValues.length > 0) {
            filters.push(
                ...selectedValues.map(
                    (value) => `${key}:"${value}"`,
                )
            )
        }
    })
    return filters.join(' AND ')
}

const response = await client.searchForHits<AlgoliaArticle>({
    requests: [
        {
            indexName: 'articles',
            query: debouncedQuery,
            hitsPerPage: perPage > MAX_PAGE_SIZE ? MAX_PAGE_SIZE : perPage,
            facets: ['*'],
            filters: getCurrentFilter(),
            // Take 50 words from bodyString for highlight snippets
            attributesToSnippet: ['bodyString:50'], 
        },
    ],
})