Previous query error, refetch shows loading
I have a query that as expected on error will have the correct status as error. But when re-focusing the window for instance, the query is re-ran and the status gets put back to loading.
I was under the assumption that
isLoading was if it was the first run. isFetching would be for all pending requests including retrys.
The problem I have that I'm trying to go around is the error state. I have a UI for 404's for instance and while the background retry works the whole component state shifts.
If the error state isn't cached and isLoading is correctly reset is there a different approach I should use for not showing the loading state after an error is received?
I could put no refocus on the options but it is nice to try again and see if the error cleaned up and the retry did indeed succeed Nth time around. (Obviously 404 is an example, but any promise rejection here is the idea, the query is in error, then it goes back to loading).31 Replies
correct-apricotOP•3y ago
I guess how I am seeing it is that the
isError is false and error is null when the query is refetched.
So it boils down to how do I keep the error state while it is refetching?rare-sapphire•3y ago
You might find useful info here https://tkdodo.eu/blog/react-query-error-handling
React Query Error Handling
After covering the sunshine cases of data fetching, it's time to look at situations where things don't go as planned and "Something went wrong..."
correct-apricotOP•3y ago
Close. I'll try the error boundry up next. I think that adds quite a bit of component overhead but it might work to prevent the refetch from resetting the error state.
The problem is just that. The error state gets wiped when the query goes back to active. If it didn't do this then the loading state wouldn't be reached and the component would stay in error until a success finally does potentially return.
correct-apricotOP•3y ago
Here's a quick example - https://codesandbox.io/s/blissful-margulis-ju0p5g?file=/src/index.jsx
JeffBaumgardt
CodeSandbox
blissful-margulis-ju0p5g - CodeSandbox
blissful-margulis-ju0p5g by JeffBaumgardt using @tanstack/react-query, @tanstack/react-query-devtools, axios, react, react-dom
correct-apricotOP•3y ago
I just made a query that rejects. You see the loading state while the query is running and then you'll see the error. Now click out of the
window and back in, the query goes back to loading.
I could solve this with my own state and effect but that adds a lot.rare-sapphire•3y ago
You should not.
Did you try the new v4 isInitialLoading state?
correct-apricotOP•3y ago
No I didn't see that in the docs. Let me find it and read.
rare-sapphire•3y ago
Disabling/Pausing Queries | TanStack Query Docs
If you ever want to disable a query from automatically running, you can use the enabled = false option.
When enabled is false:
rare-sapphire•3y ago
I'm not sure to have fully understand what you are trying to achieve. Could you elaborate on that?
From my perspective, you would like to keep the error displayed while performing background refetch. Should this be done only in case of first load error? for each error ?
correct-apricotOP•3y ago
Yeah, so it's not a lazy query.
I have a route that fetches the id from the DB. If that results in a 404 then I have a 404 error shown. But if I click away or do something that causes the query to refetch (window blur) and come back the query goes back out and the UI changes back to a loading state.
The error object is nullified when the refetch occurs so I can't rely on that.
Also the
isLoading gets reset back to true in the same case as well.
I updated the console.logs on that code sand box that help show you the state as you blur/focus the window.rare-sapphire•3y ago
"Yeah, so it's not a lazy query." => yep but it could help identifying the "initial" loading phase. Since v4,
isLoading is true as soon as a query is being fetched AND the query has no data. In your case, you would never have data since 404 so isLoading would always be true. As such, you might need to base the logic on something else. Maybe could you disable the given query in case of 404.correct-apricotOP•3y ago
Or I can resolve a 404 and use logic to decode the query result. Not ideal either way.
rare-sapphire•3y ago
fetchFailureCount could also help you know that some error happened. And combine with isLoading, you could keep displaying your 404 uicorrect-apricotOP•3y ago
Didn't know about that one either, let me have a look at that.
I don't see that one. I presume that's my own state.
rare-sapphire•3y ago
failureCount sorrycorrect-apricotOP•3y ago
Oh ok
Nope failureCount also resets with the query.
rare-sapphire•3y ago
I've tried something in the sandbox above, can you see it?
correct-apricotOP•3y ago
Let try a live session link. I didn't see any changes -0 https://codesandbox.io/live/299ff1ef8a5
rare-sapphire•3y ago
Changes applied
correct-apricotOP•3y ago
Still falls back to loading.
rare-sapphire•3y ago
I don't have the same behaviour 🤔
correct-apricotOP•3y ago
It's like the entire state gets flushed when there is no cached data.
rare-sapphire•3y ago
Yep but I think this is expected, since there has never been any data
correct-apricotOP•3y ago
Hmm I wonder if I set initial data to an empty object so it has something to track
Yup
If there is something in the data then it's all good.
Wow that's weird
rare-sapphire•3y ago
there is something weird indeed
correct-apricotOP•3y ago
rare-sapphire•3y ago
correct-apricotOP•3y ago
Yeah if I add a external ref to the error and just reset the ref on success than I don't have to try to track isLoading.
Kind of hacky to keep the error hanging around.
rare-sapphire•3y ago
GitHub
useQuery
refetchOnWindowFocus option does not respect retry val...Describe the bug useQuery option refetchOnWindowFocus does not verify if the retry option value. Queries are fetched unnecessary even when retry is set to false, retryCount resets every time on win...
rare-sapphire•3y ago
some more ideas
extended-yellow•3y ago
queries in
error state are considered stale, so the refetchOnWindowFocus will trigger a refetch. Since you have no data, it goes to loading state. That is expected. With error boundaries, you side-step that because the query is no longer mounted
what you can do is implement refetchOnWindowFocus with a function and turn it off if the query is in error state:
(I wrote that from memory, let typescript guide you)