T
TanStack•3y ago
afraid-scarlet

isError behaves differently depending on whether initialData is present (when refetching)

I'm trying to wrap my head around the behavior I'm seeing and scouring the docs hasn't fully clarified my understanding. For some context: I want to show a "retry" button if a query errors AND while it's refetching (the button should remain until the query succeeds). There are 2 different cases I need to handle: one with initialData and one without. These 2 cases behave differently. For the query with initialData... - the query starts out with status: "success" - the query refetches (e.g. as a result of the query becoming stale), and the request fails - => status = "error", isError = true - if isError, I render a button that calls query.refetch() - if isFetching, the button is disabled and a loading indicator is rendered - click the button, initiating the refetch - isError remains true until the query succeeds (desired behavior, since I'm using isError to show the button which is also showing the loading-after-error user feedback) - then if the query succeeds, isError = false again and the retry button goes away (desired) For the query without initialData (which also happens to start with enabled: false) - the query starts out with status = "loading", fetchStatus = "idle" - the query becomes enabled (based on an IntersectionObserver) - the query starts loading (status = "loading", fetchStatus = "fetching") - then when the request fails - =>isError = true, status = "error" - if isError, I render a button that calls query.refetch() - if isFetching, the button is disabled and a loading indicator is rendered - click the button, initiating the refetch - => status = "loading", fetchStatus = "fetching" - isError = false problem - because isError immediately changes to false, my button goes away and therefore the user doesn't see the loading feedback TL;DR - It seems that a query that changes from status: "success" (has some data in the cache) to status: "error" will keep isError: true during refetching, until the query succeeds, BUT a query that changes status: "loading" (no data in the cache) to status: "error" loses isError: true during refetching. Is there a better way to answer the question "is there an error OR is the query refetching after a previous error" consistently between these 2 cases (there's data in the cache or there's no data in the cache). I'll see if I can put together a reduced test case to better illustrate the issue.
2 Replies
afraid-scarlet
afraid-scarletOP•3y ago
It seems that this follows from the difference between "Initial Loading" and "Non-Initial Loading". looks like what I need to do is make my check query.isError || query.isLoadingError, that gets me pretty much what I need I think spoke too soon, both of these are false while the query is loading even on a refetch after an initial failure
ambitious-aqua
ambitious-aqua•3y ago
a query that is fetching and has no data is in loading state. With initialData, you're seeing a background error, because you have data in the cache already. That's why they behave differently
It seems that a query that changes from status: "success" (has some data in the cache) to status: "error" will keep isError: true
isError, isLoading and isSuccess are derived flags: 
isError: status === 'error',
isLoading: status === 'loading',
isSuccess: status === 'success'
isError: status === 'error',
isLoading: status === 'loading',
isSuccess: status === 'success'
so, there is no "keeping the isError flag" when you are in a state other than error

Did you find this page helpful?