#community-help

Using Typesense in a React App and Troubleshooting Postman Requests

TLDR asada inquired about using typesense-js in a React app. Jason confirmed its usage and addressed how to replace pre-built search UI components. Additionally, Jason helped Vasudev with troubleshooting a Postman request format issue.

15mo

Join the chat

Sep 25, 2022 (15 months ago)

Photo of md5-7d2796ababc14477f4c09abc2e8edb05

asada

11:28 AM

Can I use typesense directly in my react app without using the typesense-instantsearch-adapter or any library like instantsearch.js ? Would I lose any feature like caching or autocomplete if I do this?

Photo of md5-8813087cccc512313602b6d9f9ece19f

Jason

09:33 PM

You can definitely use typesense-js directly in your react app.

09:33

Jason

09:33 PM

instantsearch.js and the adapter essentially provide pre-built search UI components

09:34

Jason

09:34 PM

When calling the Typesense API directly using typesense-js, you’ll just have to build your own UI components

Sep 26, 2022 (15 months ago)

Photo of md5-591a0ac3f5f7ef9eb6e6fc35534beeae

Vasudev

06:48 AM

If we are using Instantsearch,

API call that is made is browser by itself is like :-

http://localhost:8081/multi_search?x-typesense-api-key=abc

06:48

Vasudev

06:48 AM

but same i am using in Postman and i am getting

{
"message": "Bad JSON."
}

06:50

Vasudev

06:50 AM

can you help me to figure out what i am missing ?

Jason

12:35 PM

Could you share a screen of the postman request?

Vasudev

01:03 PM

Jason

01:04 PM

Could you click on params and screenshot that?

Vasudev

01:05 PM

01:05

Vasudev

01:05 PM

only api key is there

Jason

01:06 PM

And request body as well

Vasudev

01:06 PM

okay i'll try this

01:07

Vasudev

01:07 PM

{
    "message": "Missing `searches` array."
}

01:07

Vasudev

01:07 PM

this is what i got

Jason

01:42 PM

Could you share a screenshot of the request body (not response body)

Vasudev

01:43 PM

{
    "x-typesense-api-key":"abc",
   "collection_name":"collection1"
}

Jason

01:44 PM

That’s the wrong format. Here’s a code snippet with the expected format: https://typesense.org/docs/0.23.1/api/federated-multi-search.html

Vasudev

01:46 PM

okay

01:46

Vasudev

01:46 PM

thanks

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

Issue with Typesense Adapter in React Search Box

Nikunj encountered an error with Typesense adapter, and Jason suggested using 'typesense-js' for building their custom UI.

10mo

Implementing State Export Feature Using Typesense InstantSearch.js on Node.js Backend

Kyle needed help passing search state to backend for implementing an "Export" feature, while using Typesense InstantSearch. Jason provided multiple solutions including advice on using Typesense InstantSearch adapter. The issue was resolved after some iteration.

28mo

Connecting React Instant Search with Typesense Adapter

KARTHICK sought help with an error when using Typesense Adapter for React Instant Search. Jason advised substituting import statements. After uninstalling the react-instantsearch-dom package, KARTHICK resolved the issue.

6mo

Using TypesenseInstantSearchAdapter in React App

Vasudev required application id to build a react app using algoliasearch. Kishore Nallan explained Typesense needs an API key and host and suggested checking an example. Further, Jason clarified that create-instantsearch-app will generate necessary scaffold including app id.

17mo