Search results useQuery example

bad-example.tsx

const [search, setSearch] = useState("")
const debouncedSearch = useDebounce(search, 400)
const [searchResults, setSearchResults] = useState<Agent[]>([])
  
const { data: agents, isLoading } = useListAgents({
  search: debouncedSearch,
})
  
useEffect(() => {
  setSearchResults(() => agents || [])
}, [agents, search])
  
return (
  <AllAgentsTable
    editAgent={editAgent}
    searchResults={searchResults}
  />
)

good-example.tsx

const [search, setSearch] = useState("")
const debouncedSearch = useDebounce(search, 400)
  
const { data: agents, isLoading } = useListAgents({
  search: debouncedSearch,
})
  
return (
  <AllAgentsTable
    editAgent={editAgent}
    agents={agents}
  />
)

useListAgents.ts

import queryKeys from "@/api/queryKeys"
import { useQuery } from "@tanstack/react-query"
import AgentsService from "@/api/AgentsService"
import querifyFilters from "@/utils/querifyFilters"

import { ListAgentsResponse } from "shared/types/Agent"

const listAgents = (data: { search: string }) =>
  AgentsService.get<ListAgentsResponse>(`/${querifyFilters(data)}`).then(
    (res) => res?.data?.data?.agents
  )

function useListAgents(data: { search: string }) {
  return useQuery({
    queryKey: queryKeys.agent.list(data).queryKey,
    queryFn: () => listAgents(data),
  })
}

export default useListAgents