useQuery searchbar
I am trying to create a search bar with React query.
When the user clicks search, I update the query key with the form state causing the search to fire. If they get no results, they remain on the same page but are shown an error message saying that no results have been returned. If they click search again, the query key does not change, meaning that the query is not fired and they get no error message.
Is there a work around for this situation? Is the recommended way to introduce refetch? I'm currently relying on useForm hook (as suggested here https://tkdodo.eu/blog/react-query-and-forms) to handle validation and then call my setState function which is why I am not currently using refetch.
3 Replies
yappiest-sapphire•3y ago
refetch returned from useQuery sounds good for thisquaint-moccasinOP•3y ago
Cheers TK!
But since I need the queryKey to have updated before fetching, I think I would either have to flushSync the setState which updates the queryKey, and then call refetch on the next line, or I would have to put refetch in a useEffect which the state in the dependency array. Is that correct?
yappiest-sapphire•3y ago
when they click search, and the input is the same, you'd run refetch instead of setting the state for the key