Example Call

• Create folder and file src > Api > Typesense.js

const Typesense = require('typesense',);
const API = process.env.REACT_APP_TYPESENSE_API_KEY;

export const clientTypessense = new Typesense.Client({
  nodes: [
    {
      host: process.env.REACT_APP_TYPESENSE_HOST, // For Typesense Cloud use xxx.a1.typesense.net
      port: '443', // For Typesense Cloud use 443
      protocol: 'https', // For Typesense Cloud use https
    },
  ],
  apiKey: API,
  connectionTimeoutSeconds: 2,
},);

data bisa kamu dapatkan dari cluster typesense proyek kamu

• Code Example Call :

import { Avatar, Box, HStack, SkeletonCircle, SkeletonText, Spacer, Text } from '@chakra-ui/react'
import React, { useEffect, useState } from 'react'
import { clientTypessense } from '../../Api/Typesense'

function UserCardComponent(props) {
  const [data,setData]=useState()
  const uid=props.uid

  const getData=() => {
    const searchParameters = {
      q: '*',  //this you can set up query
      query_by: 'email',
      filter_by: `id: ${uid}`,
    };
    clientTypessense
      .collections('users') // this collection your set up in firebase extention
      .documents()
      .search(searchParameters)
      .then((x) => {
        const newData = x.hits.map((y) => { return { ...y.document } })
        setData(newData[0])
      });
  }

  useEffect(() => {
	  getData(uid)
	
	  return () => {
      setData()
	  }
  }, [])
	
  return (
	  data?
      <HStack m='1' p='1' shadow='base'>
			
        <Avatar name={data?.name} />
        <Box>
          <Text>{data?.name}</Text>
          <Text>{data?.email}</Text>
          <Text fontSize='3xs'>ID: {uid}</Text>
        </Box>
        <Spacer/>
        <Text 
          alignSelf='start' 
          onClick={() => props.setUser([...props.user.filter((z) => z!==uid)])}
        >x</Text>
      </HStack>  
      :
      <HStack m='1' p='1' shadow='base'>
        <SkeletonCircle/>
        <Box>
          <SkeletonText/>
          <SkeletonText/>
          <SkeletonText/>
        </Box>
      </HStack>
  )
}

export default UserCardComponent