#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.

7mo

Join the chat

May 01, 2023 (7 months ago)

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?

Photo of md5-8813087cccc512313602b6d9f9ece19f

Jason

04:24 AM

Are you referring to typesense.js or instantsearch?

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

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

04:25 AM

and I need to set the loading true before the search actually happens

Jason

04:26 AM

Ah I see…

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

04:27 AM

typesense.js uses axios, so I wonder if axios exposes some hook

Jameshwart

04:29 AM

maybe this ?https://stackoverflow.com/a/43980633 ?

04:30

Jameshwart

04:30 AM

is there a way to use typesense with apollo query?

May 03, 2023 (7 months ago)

Jason

08:29 PM

I’ve heard a few users use GraphQL with Typesense… so I’d imagine yes

Typesense

Lightning-fast, open source search engine for everyone | Knowledge Base powered by Struct.AI

Indexed 3015 threads (79% resolved)

Join Our Community

Similar Threads

Issues with Typesense Frontend Search Integration

Akash experienced issues integrating Typesense into their frontend search, particularly with their search box. Jason guided them to troubleshoot, eventually identifying the issue to be with react-instantsearch-dom and suggesting a downgrade to react 17, which resolved the issue.

14mo

Debugging Search Issue with Typesense Server Caching

Jameshwart reported experiencing caching issues with typesense server, despite the server's default setting of not caching. Through troubleshooting steps with Kishore Nallan, they were able to confirm an issue with the Typesense Javascript client and resolved it by adding `cacheSearchResultsForSeconds: 0` after `apiKey` in the initialisation. Laura also participated in discussion, learning about server and client level caching.

5mo

Troubleshooting Typesense Setup and Understanding Facets and Keywords

Demitri encountered errors when exploring Typesense for the first time. Jason guided them through troubleshooting and discussed facets, keyword settings, and widget configurations. Helin shared a Python demo app and its source code to help Demitri with their project.

21mo

Troubleshooting TypeScript Error with Typesense

GM experienced an error with Typesense in TypeScript, requiring help to correct the issues. Jason helped propose solutions and adjustments to the code. Ultimately, they were able to resolve the errors and successfully implement a search function.

14mo

Implementing Search Suggestion/Autocomplete Functionality in Typesense

Denis needed advice on implementing search suggestions in Typesense. Jason provided a solution for fetching after 3+ letters. However, questions on design pattern and passing hooks remain unanswered.

21mo