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
initialDataThese 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
isErrorquery.refetch()- if
isFetching- click the button, initiating the refetch
-
isErrortrueisError- then if the query succeeds,
isError = falseFor the query without
initialDataenabled: 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
isErrorquery.refetch()- if
isFetching- click the button, initiating the refetch
- =>
status = "loading", fetchStatus = "fetching"-
isError = falseisErrorfalseTL;DR - It seems that a query that changes from
status: "success"status: "error"isError: truerefetchstatus: "loading"status: "error"isError: truerefetchIs 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.
