I’m having trouble understanding the caching behavior with RTK query.
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { createApi } from '@reduxjs/toolkit/query/react';
import {combineReducers, configureStore } from '@reduxjs/toolkit';
const baseQuery = async (arg: string) => {
await new Promise(resolve => setTimeout(resolve, 5000));
return { data: arg == 'odd' ? [1, 2, 3] : [2, 4, 6]};
};
const api = createApi({
baseQuery,
endpoints: (build) => ({
fetchOdd: build.query<number[], number>({query: () => 'odd', providesTags: ['odd']}),
fetchEven: build.query<number[], number>({query: () => 'even', providesTags: ['even']})
})
});
const store = configureStore({
reducer: combineReducers({ [api.reducerPath]: api.reducer }),
middleware: (getDefault) => getDefault().concat(api.middleware)
});
const App = () => {
const [dataset, setDataset] = useState('odd');
const result = dataset == 'odd' ? api.endpoints.fetchOdd.useQuery(1) : api.endpoints.fetchEven.useQuery(2)
return (
<div>
<button onClick={() => setDataset(dataset == 'odd' ? 'even' : 'odd')}>{dataset}</button>
{ result.data?.map(d => <div key={d}>{d}</div>) }
</div>
);
}
const container = document.getElementById('app-root')!
const root = createRoot(container);
root.render(<Provider store={store}><App/></Provider>);
This mostly works as expected – however when switching between datasets the previous dataset will still be displayed while waiting for the next fetch to complete. I would have expected this to be empty since it is for a different endpoint that hasn’t been fetched yet?
Also, the arguments to useQuery are not needed for any logic, however if I do not have different arguments for each endpoint then the second fetch will not run at all and just sits in pending.
Any help understanding this behavior or achieving the desired results (result.data empty when switched to the next endpoint, and ideally getting rid of the unneeded argument) would be appreciated. cheers.
Martin McCann is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.