#community-help

Custom Hook with Typesense.js for Product Search

TLDR Jameshwart seeks a way to set a state before starting a search function in typesense.js. Jason suggests using hooks exposed by axios, mentioning possible GraphQL integration with Typesense.

Powered by Struct AI

1

May 01, 2023 (5 months ago)
Jameshwart
Photo of md5-283d3397742c32cc2b6be6bda508c03e
Jameshwart
04:21 AM
Hi guys, is there a way to set a state before hitting search function of typesense library?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
04:24 AM
Are you referring to typesense.js or instantsearch?
Jameshwart
Photo of md5-283d3397742c32cc2b6be6bda508c03e
Jameshwart
04:24 AM
yes typesense js.
04:25
Jameshwart
04:25 AM
im trying to create a custom hook to search products.
import { useState } from 'react';
import {
    ITSProductQueryResponse,
    ITSTaxonomyProductQueryVars,
} from '../typesense/types/taxonomy';
import TSTaxonomy from '../typesense/taxonomy';
import { useUpdateEffect } from 'usehooks-ts';

const useFetchTsTaxonomyProducts = (queryVars: ITSTaxonomyProductQueryVars) => {
    const [data, setData] = useState<ITSProductQueryResponse>();
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(false);

    useUpdateEffect(() => {
        console.log('useFetchTsTaxonomyProducts useUpdateEffect');
        const controller = new AbortController();
        setLoading(true);
        let searchParameters = TSTaxonomy.generateSearchParams(queryVars);
        const searchOptions = {
            cacheSearchResultsForSeconds: 60,
            abortSignal: controller.signal,
        };

        TSTaxonomy.getProductDocument()
            .search(searchParameters, searchOptions)
            .then((results) => {
                setData(
                    TSTaxonomy.generateProductQueryResponse(queryVars, results)
                );
            })
            .catch(setError)
            .finally(() => setLoading(false));

        return () => {
            // controller.abort();
        };
    }, [queryVars]);

    return { data, error, loading };
};

export default useFetchTsTaxonomyProducts;
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
04:25 AM
May I know what state you’re referring to? Because the search method call is stateless as it relates to query params
Jameshwart
Photo of md5-283d3397742c32cc2b6be6bda508c03e
Jameshwart
04:25 AM
and I need to set the loading true before the search actually happens
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
04:26 AM
Ah I see…
Jameshwart
Photo of md5-283d3397742c32cc2b6be6bda508c03e
Jameshwart
04:27 AM
im am doing this because we are using graphql before with useLazyQuery but not we are using your service and I am converting useLazyQuery to a custom hook. 🙂 I just don't know how useLazyQuery is done. That's why I use a library to only run an effect after first load.
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
04:27 AM
typesense.js uses axios, so I wonder if axios exposes some hook
Jameshwart
Photo of md5-283d3397742c32cc2b6be6bda508c03e
Jameshwart
04:29 AM

1

04:30
Jameshwart
04:30 AM
is there a way to use typesense with apollo query?
May 03, 2023 (5 months ago)
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
08:29 PM
I’ve heard a few users use GraphQL with Typesense… so I’d imagine yes