There is a query made by RTK-query hook (useXXXQuery).
Let's say it is useGetSomethingQuery
.
I am handling its result object with useEffect.
const res = useGetSomethingQuery(payload);
useEffect(() => {
...
if (res.isSuccess) {
// use the fetched Data
}
},[res]);
As you can see, I am getting data from the server when isSuccess
is set to true
.
For the first time the API is called, the isSuccess
turns to true
after the status is set to fulfilled
or rejected
. In other words, after isFetching
turns to false
.
But the problem is, from the second time using the same api, isSuccess
property turns to true
even the fetching is not over. (its value is still true
).
I think it is somewhat related to caching.. but have no idea about it.
Why isSuccess
turns to true
before it IS SUCCESSED?
It does not turn to true - it stays true.
After the first request for an endpoint/argument combination, you will have a value in the cache - and that value will either be a success or a failure. So no matter if there is currently data fetching, that data will stay available to you.
And if you are using the hook, it will go one step further. Imagine you go from page 5 to page 6. While page 6 is still fetching, you will still see the result for page 5 until page 6 is either a success or a failure - and for that long you will also see the success/error status for page 5.