How to use querykeys from react-query
I am trying to implement a search query to an api that i am fetching via a procedure, i also read on getQueryKey but im not sure i understand how i can implement it now
6 Replies
You don’t need to do anything special to calculate a query key if you’re just controlling the input to a query
You just do
const myQuery = trpc.my.router.procedure.useQuery({ filterParam: filterValue })See here: https://trpc.io/docs/useQuery#example
useQuery() | tRPC
The hooks provided by @trpc/react-query are a thin wrapper around @tanstack/react-query. For in-depth information about options and usage patterns, refer to their docs on queries.
thanks...will give feedback
so i used a useDebounce hook to delay making a call to the api but turns out while im typing its making calls to the api that are empty then after my set delay and after ive written what to search it calls again and brings back results... i want it to only request to the api after the delay
Those console logs aren't showing network calls, they're showing renders
What does the network debugger say?
If you want to only enable the query after a certain condition is met then you can use the enabled option in useQuery
Otherwise it will fetch with the initial value and then once the debounce turns over