redux-toolkit
redux-toolkit copied to clipboard
Unexpected behaviour of isSuccess on second refetch
I have a simple endpoint getData
https://stackblitz.com/edit/react-ts-7vwdac?file=App.tsx
const delay = () => {
return new Promise((resolve) => {
setTimeout(resolve, 500);
});
};
let count = 0;
const api = createApi({
reducerPath: 'api',
endpoints: (builder) => ({
getData: builder.query<number, void>({
queryFn: async () => {
count += 1;
await delay();
if (count > 1) {
return { error: true };
}
return { data: 123 };
},
}),
}),
baseQuery: fakeBaseQuery(),
});
const { useGetDataQuery } = api;
which is used like that
function Component() {
const { refetch, data, isError, isSuccess } = useGetDataQuery();
console.log({ isError, isSuccess });
return (
<div>
<button onClick={refetch}>refetch</button>
<span>{data}</span>
</div>
);
}
export default function App() {
return (
<Provider store={store}>
<Component />
</Provider>
);
}
output on mount is:
{ isError: false, isSuccess: false }
{ isError: false, isSuccess: false }
{ isError: false, isSuccess: true }
after calling refetch for the first time:
{ isError: false, isSuccess: true }
{ isError: true, isSuccess: false }
but if I call refetch one more time, I'll get
{ isError: false, isSuccess: true }
{ isError: true, isSuccess: false }
RTK switches isSuccess back to true for some reason while the request is loading
Is it the correct behaviour? Shouldn't isSuccess stay false?