Next.js Discord

Discord Forum

please help with that ungodly algolia library...

Unanswered
Havana posted this in #help-forum
Open in Discord
HavanaOP
I'm trying to setup a search navbar and a search page using this ungodly library with very bad docs and almost impossible to understand.
After several days of try and error, navigating github to see decent examples from real people, i managed to get the navbar working. But now, i i'm trying to create a second search, this time in the search page, but it doesn't work correctly. It should simply display results given an initialQuery from the nextjs query params, but instead it always shows every single product as if the query was empty. Even though it's not. Also, if i type somehing in the searchbar, the results also show up in the search page results, which doesn't fucking make sense to me.
Please help.

2 Replies

HavanaOP
This is some of the code:
import { PageSearchWrapper } from "~/components/search/page-search/wrapper";
import { responsesCache } from "~/components/search/utils";
import { SearchPageHeader } from "./_components/header";
import { SearchPageHits } from "./_components/page-hits";

export const dynamic = "force-dynamic";

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  void responsesCache.clear();
  const searchParamQ = (await searchParams).q;
  const query = !searchParamQ
    ? ""
    : typeof searchParamQ === "string"
      ? searchParamQ
      : searchParamQ[0] || "";

  return (
    <div className="c-wrap c-wrap-center">
      <div className="mt-[var(--header-height-with-padding)] border-t border-t-black/20 pt-64">
        <SearchPageHeader query={query} />
        <PageSearchWrapper query={query}>
          <SearchPageHits initialQuery={query} />
        </PageSearchWrapper>
      </div>
    </div>
  );
}

export function PageSearchWrapper({ children, query }: { children: React.ReactNode, query: string }) {
  const [indexName, setIndexName] = React.useState(SEARCH_INDEX.entries);

  return (
    <InstantSearchNext searchClient={searchClient} indexName={indexName} routing key={query}>
      <Configure analytics clickAnalytics hitsPerPage={10} index={SEARCH_INDEX.entries} />
      <SearchPageContext.Provider value={{ indexName, setIndexName }}>
        {children}
      </SearchPageContext.Provider>
    </InstantSearchNext>
  );
}

in pageHits:
export function SearchPageHits({ initialQuery }: { initialQuery: string }) {
  void responsesCache.clear();
  const { refine } = useSearchBox();
  const { hits } = useHits<ProductHit>();

  React.useEffect(() => {
    refine(initialQuery);
    console.log("refinin...", initialQuery);
  }, [initialQuery, refine]);
// then i render hits
HavanaOP
this library is the worst thing i have ever dealt with in 5 years of web development