Redux Query with redux-persist: When fetching (isFetching) and the user refreshes or closes the website, all cache data will be lost

[l2aelba]

Some of my APIs take about 5 seconds (bad performance).
When the user fetches isFetching that data using pollingInterval and they refresh or close the website before it's done, all cache data will be lost when they come back.

Researched:
When isFetching and I use window.stop() (in console) to cancel all requests, the cache will not be lost.
But I cannot use this for somehow:

window.addEventListener('beforeunload', function(event: BeforeUnloadEvent) {
  window.stop() // ❌ can't run this somehow
  event.preventDefault()
})

Here is my simple code:

// Usage
const { data, isFetching } = myApi.endpoints.getSomeData.useQuery(undefined, {
  pollingInterval: 5000,
  skip: false,
})

// extractRehydrationInfo (because I using redux-persist)
// import { REHYDRATE } from 'redux-persist'
extractRehydrationInfo(action, { reducerPath }) {
  if (action.payload && action.type === REHYDRATE) {
    return action.payload[reducerPath]
  }
  if (action.type === REHYDRATE && action.key === 'root') {
    return action.payload
  }
}

Any tricks to prevent that? Or an easy way to cancel all requests before unload?
Alternatively, is there a solution to avoid clearing the data before the next request succeeds?

Thanks.

[phryneas]

You might be omitting information here. By default, Redux is an in-memory store, so everything being lost on window close is expected behaviour.
Are you adding more software to the mix here?

[l2aelba]

Yes, everything is working well with redux-persist (localStorage).
However, regarding the question above, I would like to improve it.

[l2aelba]

Here is my setup:

import { Action, configureStore } from '@reduxjs/toolkit'
import { persistReducer, persistStore, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import thunk, { ThunkAction } from 'redux-thunk'

import rootReducer, { RootState } from './rootReducer'

// APIs
import { myApi } from '@/api/myApi'

export type AppDispatch = typeof store.dispatch
export type AppThunk = ThunkAction<void, RootState, unknown, Action<string>>
export type AppStore = typeof store

const persistConfig = {
  key: 'root',
  storage: storage,
}

const persistedReducer = persistReducer<any, any>(persistConfig, rootReducer) // @TODO: Find types for <any,any>

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: true,
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
      immutableCheck: false,
    }).concat([thunk, myApi.middleware]),
})

export const persistor = persistStore(store)
export default store