Search code examples
reactjsreduxrtk-query

In RTK-Query, Why 'isSuccess' (which is one of the properties of result a query) turns to 'true' before the fetching is over?


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?


Solution

  • 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.