useQuery for a search API #957
Unanswered
robcaldecott
asked this question in
General
Replies: 3 comments 20 replies
-
I am curious about this as well. @tannerlinsley could you please get back to this? |
Beta Was this translation helpful? Give feedback.
4 replies
-
It generally looks good. You can get rid of the useEffect by enabling the query as soon as you have a
The query will start disabled, and enable itself and start fetching as soon as you update your |
Beta Was this translation helpful? Give feedback.
14 replies
-
The enabled option didn't work for me, but the refetch option in useEffect worked fine
|
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I am trying to use
useQuery
with a search API from a React form and I am getting in a right pickle so am looking for some advice.Assume the API in question can return a list of search results via
/api/widgets?query=[user input]
and I am usingky
as afetch
alternative. And also assume that the form component is not doing the fetch directly and is instead wrapped in a container, callingonSubmit
when it's time for a lookup.So I could do something this like this, similar to an example in the docs:
It's a bit messy but it works, more or less. I don't like the
useEffect
that spots a change to thevalue
in order trigger arefetch
much. I guess I could use aref
to hold the value fromonSubmit
but that also feels a bit off.But my first problem is that hitting submit a second time with the same value will not show the "Loading..." state, but instead it will silently refetch in the background. But for the app in question I want to clear and start again, even if the query is the same. So my first question is: how do I reset the query prior to calling
refetch
? I have triedcacheTime: 0
but that doesn't work. I also tried callingclear
prior to therefetch
but that just sends the code into an infinite fetching loop.So to make this more readable I had a go at
useMutation
which gives me aContainer
that looks something like this:Well, personally I think that's a lot better on first glance because it avoids messing with an effect hook to kick off a search and if I search again the whole thing resets back to "Loading...".
But it feels like the wrong use case for
useMutation
which is documented to be used ...to create/update/delete data or perform server side-effectsSo I'm torn. Any suggestions on the best way to handle user-initiated queries with user supplied params are welcome.
Thanks for reading.
Beta Was this translation helpful? Give feedback.
All reactions