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
Neto
Neto2y ago
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 response
coiz
coiz2y ago
I'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
mattddean
mattddean2y ago
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.
jack
jack2y ago
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.
mattddean
mattddean2y ago
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
Etan
Etan2y ago
I implemented it by flipping the enabled property on the query and then flipping it back and forth with a debouncer
jack
jack2y ago
just out of curiosity, why not do it with enabled?
Etan
Etan2y ago
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
Etan
Etan2y ago
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...
jack
jack2y ago
yea i was able to do accomplish this following by some of the posts in this article, thanks
Want results from more Discord servers?
Add your server