#community-help

Issues with Typesense Frontend Search Integration

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

Powered by Struct AI

1

1

52
12mo
Solved
Join the chat
Sep 24, 2022 (13 months ago)
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:02 PM
hey i am stuck into typesense frontend search integration please help

1

Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:04 PM
Let’s use a thread.

What error are you running into?
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:05 PM
import React from "react";
import ReactDOM from "react-dom";
import { SearchBox } from "react-instantsearch-dom";
import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter";

const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  server: {
    apiKey: "abcd", // Be sure to use an API key that only allows search operations
    nodes: [
      {
        host: "localhost",
        port: "8108",
        protocol: "http",
      },
    ],
    cacheSearchResultsForSeconds: 2 * 60, // Cache search results from server. Defaults to 2 minutes. Set to 0 to disable caching.
  },
  // The following parameters are directly passed to Typesense's search API endpoint.
  //  So you can pass any parameters supported by the search endpoint below.
  //  query_by is required.
  additionalSearchParameters: {
    query_by: "name,description,categories",
  },
});
const searchClient = typesenseInstantsearchAdapter.searchClient;

const App = () => (
  <InstantSearch indexName="products" searchClient={searchClient}>
    <SearchBox />
    <Hits />
  </InstantSearch>
);

02:05
Akash
02:05 PM
search box is not working
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:06 PM
Do you see any errors in the browser console?
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:06 PM
no error show in console
02:06
Akash
02:06 PM
and data is not loading in react did mount
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:08 PM
Let’s try this, here’s a next.js app that uses the adapter: https://github.com/typesense/showcase-nextjs-typesense-ecommerce-store

Could you try running that locally?
02:08
Jason
02:08 PM
You can then use that to figure out how your app is different that’s causing an issue
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:08 PM
yes i tried but docker installation is required
02:09
Akash
02:09 PM
and our project doesnot have docker
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:09 PM
If you already have Typesense running on port 8108, you can skip the Docker part
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:09 PM
how
02:10
Akash
02:10 PM
i clone that repo and npm run dev not work
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:10 PM
You can skip this command from the readme: yarn run typesenseServer
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:10 PM
then i tried npm run typesenseServer
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:11 PM
but you need to have Typesense running on port 8108 using one of the other methods here: https://typesense.org/docs/guide/install-typesense.html#option-2-local-machine-self-hosting
02:12
Jason
02:12 PM
I don’t have access to that link
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:12 PM
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:13 PM
Looks like you’re on windows, Docker or WSL are the only ways to run Typesense on Windows
02:14
Jason
02:14 PM
You can install Docker locally just to figure out this issue
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:14 PM
any other way for linux system other than docker
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:15 PM
Oh What flavor of Linux are you using?
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:15 PM
ubuntu
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:18 PM
i am using typesense cloud and i am integrating instant search in nextjs
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:19 PM
I see, then you can just use your Typesense cloud settings here: https://github.com/typesense/showcase-nextjs-typesense-ecommerce-store/blob/master/.env
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:20 PM
we are successfully connected with type sense cloud but only issue is search box is not working
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:20 PM
Instead of localhost, use your Typesense Cloud host name, use 443 for port and https for protocol and then replace with your api keys
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:21 PM
yes we did
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:21 PM
Essentially if you can replicate the error in that app, I can then try replicating it locally
02:22
Jason
02:22 PM
Because that app works locally for me
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:22 PM
sir my only issue is import { SearchBox } from "react-instantsearch-dom";
02:22
Akash
02:22 PM
not working
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:25 PM
could you share a minimal next.js app (Not just a code snippet) that doesn’t work for you in a new Github repo?
02:25
Jason
02:25 PM
I can then clone it and run it locally to see what’s happening
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:26 PM
Ok sir it will be work for us
Sep 25, 2022 (13 months ago)
06:08
Akash
06:08 AM
06:08
Akash
06:08 AM
search input is not working and data is not coming in didmount
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
10:34 PM
This is an issue with react-instantsearch-dom and react 18: https://github.com/algolia/react-instantsearch/issues/3634

Downgrading to react and react-dom to 17 fixes the issue
Sep 26, 2022 (13 months ago)
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
05:57 AM
Thanks now its working

1

Oct 12, 2022 (12 months ago)
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
11:10 AM
Jason hi am facing a issue on react-instant search
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
03:35 PM
Could you share more details on the issue you’re running into?
Oct 13, 2022 (12 months ago)
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:33 PM
Jason additionalSearchParameters: {
'q': '120',
'query_by': 'is_out_of_stack',
'page': 1,
'sort_by': 'book_id:desc',
'filter_by': '&amp;&amp; book_type:[2]',
'facet_by': 'author,publication,category,language,keywords,book_type,binding,book_condition,subject,class',
'max_facet_values': 30,
'num_typos': 2,
'typo_tokens_threshold': 10,
'per_page': 204
},
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:34 PM
The q parameter is overridden by instantsearch so setting it in additionalSearchParameters doesn’t work
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:35 PM
means
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:40 PM
ok i have one more question
02:41
Akash
02:41 PM
how i can apply skeleton or loader at time of searching
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:55 PM
I’m not too sure, since this is related to instantsearch, if you just google for “skeleton loader instantsearch” you should find some points
Akash
Photo of md5-5a7e6fd9a070eac5034a6034f0dc38b1
Akash
02:56 PM
Ok I will