Reset cache on logout

Hi,

I’m facing an issue in order to clear state and cache after a user logout.

Here, what I’m doing right now to handle that :

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { api } from './api';
import authReducer, { logout } from '../features/auth/authSlice';
import requesterReducer from '../features/requester/requesterSlice';
import { unauthorizedMiddleware } from './store/middlewares/unauthorized';

const combinedReducer = combineReducers({
    [api.reducerPath]: api.reducer,
    auth: authReducer,
    requester: requesterReducer,
});
export const store = configureStore({
    reducer: (rootState, action) => {
        let state = rootState;
        if (logout.match(action)) {
            state = undefined;
        }
        return combinedReducer(state, action);
    },
   
    middleware: (getDefaultMiddleware) => [
        ...getDefaultMiddleware().concat(api.middleware),
        unauthorizedMiddleware,
    ],
});

The issue comes in App.js :

function App() {
    const {isLoading} = useGetSessionQuery();
    if (isLoading) return <Loader />;

    return (
        <Router>
            <div className="App">
                <Switch>
                    <Route exact path="/login" component={Login} />
                    <PrivateRoute path="/">
                        <Requester />
                    </PrivateRoute>
                </Switch>
            </div>
        </Router>
    );
}

Reseting state like I do provokes isLoading from my getSession query to be ‘true’ so my app becomes stuck until I refresh.

Thanks!

Issue Analytics

State:
Created 2 years ago
Comments:5

Top GitHub Comments

3reactions

KevinBrustolincommented, Oct 19, 2021

Nothing around the hook :

const sessionsApi = api.injectEndpoints({
    endpoints: (builder) => ({
        getSession: builder.query({
            query: () => 'sessions',
            providesTags: ['Sessions'],
        }),
       ...
    }),
    overrideExisting: false,
});

export const { ..., useGetSessionQuery } = sessionsApi;

What do you mean by ‘dispatch the “reset cache”’? Using resetApiState from cache management utils? If so, i tried it and change my configureStore like that :

export const store = configureStore({
    reducer: (rootState, action) => {
        let state = rootState;
        if (logout.match(action)) {
            const { api } = state;
            state = { api };
        }
        return combinedReducer(state, action);
    },
});

But I faced the same issue.

0reactions

kachmul2004commented, Nov 19, 2022

I also faced this exact same issue where I have a useGet…Query in the App.js that gets triggered on resetting api when user logs out. I also used the invalidate tags approach to work around it but feel it will not be very friendly in the long run since most of my endpoints will be active depending on what information am currently using on the current page.

my code looks exactly the same as the OP. Is there anything that one could try to do in this case? My main problems are two:

If Invalidate tags on the logout endpoint, server will try refetching some data, resulting in multiple 403 errors.
If I use the invalidate tags on log in approach, and then try to log in with wrong username and password, my app will show “some” data that is still in the cache and those that do not need authentication, since the apps sees that there is still an authenticated session (in cache)