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
These 2 cases behave differently.
For the query with
- the query starts out with
- the query refetches (e.g. as a result of the query becoming stale), and the request fails
- =>
- if
- if
- click the button, initiating the refetch
-
- then if the query succeeds,
For the query without
- the query starts out with
- the query becomes enabled (based on an
- the query starts loading (
- then when the request fails
- =>
- if
- if
- click the button, initiating the refetch
- =>
-
TL;DR - It seems that a query that changes from
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.
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 feedbackTL;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.
