useAlgoliaIndices

The useAlgoliaIndices hook is used to fetch the Algolia indices.

Installation

pnpm install @frend-digital/algolia algoliasearch

Usage

Basic Usage

"use client";

import { Index, useAlgoliaIndices } from "@frend-digital/algolia";
import { algoliasearch } from "algoliasearch";

const algoliaClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_API_KEY);
const HITS_PER_PAGE = 10;

export const AlgoliaSearch = () => {
  const [page, setPage] = useState(0);
  const query = "Black shoe";

  const { data, isLoading, error } = useAlgoliaIndices({
    client: algoliaClient,
    indices: [
      new Index<{
        name: string;
        price: number;
      }>("products"),
    ], // Specify what index to query
    query, // Specify query
    immediate: true, // Fetch indices immediately (optional)
    hitsPerPage: HITS_PER_PAGE, // Pagination (optional)
    page: page, // Pagination (optional)
  });

  const products = data?.find(i => i.index === "products");
  const hasMoreProducts = (products?.nbHits ?? 0) > HITS_PER_PAGE;

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <button disabled={page === 0} onClick={() => setPage(page - 1)}>
        Previous
      </button>
      <button disabled={!hasMoreProducts} onClick={() => setPage(page + 1)}>
        Next
      </button>
      {products?.hits.map(hit => <>{JSON.stringify(hit, null, 2)}</>)}
    </div>
  );
};