writing a user search functionality (trpc+prisma+next.js)
does anyone have any articles/stack overflow posts on how i could implement a user search in my app? im less concerned with the server part of it (as in, best ranking records against the user search term), but more concerned with how to handle the client <-> server interaction.
my thought process is: obviously i dont want to make http reqs on every keystroke, but also i want the results to be as responsive to the search term as possible. i was considering that after x keystrokes, i return a ranked list of users to the client, and then the client filters until the ranked list gets too small (whatever we define "too small" as), and then refetches from the server in that instance.
having trouble wording the google search on this one, wondering if anybody has advice. thanks!
10 Replies
you can use a debouncer to avoid sending multiple requests on the client
or you can different input events such as
onInput
but a issue is that text search its kinda expensive, so would not be that responseI'm actually having the same issue, from what I can tell usequery does not play nicely with debounce as I've tried 3-4 different ways to implement it
Maybe use a mutation so that you can just call the mutateAsync function whenever you want to make a request. You don’t have to actually mutate anything in your handler and can still return your search results from it.
Alternatively I’d imagine you could invalidate your query in the debounce callback.
yea i was considering a mutation for ease, but feels wrong
if done properly, i think handling this with the enabled property is more than possible, but im struggling to handle it with respect to proper loading state, etc.
I don't think you want to be flipping the enabled property. Try just invalidating your query in your debounce's callback. That should trigger a new request.
https://trpc.io/docs/useContext#query-invalidation
I implemented it by flipping the enabled property on the query and then flipping it back and forth with a debouncer
just out of curiosity, why not do it with enabled?
Enabled will automatically fetch on different states. ie window focus and on page load
If you’re waiting for user input before firing a query and then debounce, disabling the query gives you manual control
Stack Overflow
Search box with React-Query
I am trying to implement Product search by text. Fetching data with react-query. The following implementation is working but it does not feel right to me. Let me know if I am overdoing it and if th...
yea i was able to do accomplish this following by some of the posts in this article, thanks