Reset cache on logout

[KevinBrustolin]

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!

[markerikson]

Hmm. Does the hook have some internal value in a ref or something? Or maybe it is that there's no longer any entries in the cache slice and so there's a default fallback value being used.

FWIW, an alternative option here might be to dispatch the "reset cache" action instead, although that doesn't help if you were wanting to reset other pieces of the state too.

[KevinBrustolin]

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.

[polianych]

In Redux DevTools state is succefully cleared in my case:

export const rootReducer: Reducer<RootState> = (state, action) => {
  if (action.type === RESET_STATE_ACTION_TYPE) {
    state = {} as RootState;
  }
  return combinedReducer(state, action);
} 

But hook still has filled with data. That is confirmed in docs https://redux-toolkit.js.org/rtk-query/api/created-api/cache-management-utils#resetapistate
My dirty workaround is to use custom hook:

export const useAuthUser = (): User | undefined => {
  const state = api.endpoints.getUserMe.useQuery(null);
  return state.isFetching ? undefined : state.data?.user;
}

[KevinBrustolin]

Ok, I choosed to use tags, so I reset all states except rtk query's one :

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

And I provide one tag to all queries which I invalidates when log in.

[kachmul2004]

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:

1. If Invalidate tags on the logout endpoint, server will try refetching some data, resulting in multiple 403 errors.
2. 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)

[simoazzo]

@kachmul2004 Did you find any solution? Thanks

[kachmul2004]

@kachmul2004 Did you find any solution? Thanks

@simoazzo I ended up just refreshing the page to clear before in state.

1. Logout
2. Optional: navigate to login page
3. Refresh page.

[Haoming-Wu92]

@kachmul2004 Did you find any solution? Thanks

@simoazzo I ended up just refreshing the page to clear before in state.

1. Logout
2. Optional: navigate to login page
3. Refresh page.

this is the approach I'm using...seems stupid to not have a good way to remove data lol
but for me, I only refresh the page if any user-sensitive data cache exists. So step 2 is required for my case.

[caleb-42]

@Haoming-Wu92 This is currently the solution that works for me....

[ErgEnn]

I did the following:
Firstly, I used custom baseQuery to removeQueryResult from all endpoints that had SESSION_DATA (my custom cache key that I add to all endpoints that contain data specific to that session) cache tag attached like so:

const defaultBaseQuery: DefaultBaseQueryFn = async (
  args,
  apiCtx,
  extraOptions,
) => {
  const result = await appBaseQuery(args, apiCtx, extraOptions);

  if (result.error && result.error.status === 401) {
    const entries = api.util.selectInvalidatedBy(
      // eslint-disable-next-line @typescript-eslint/ban-types
      apiCtx.getState() as RootState<{}, string, 'api'>,
      [ApiTag.SESSION_DATA],
    );
    entries.forEach(({ queryCacheKey }) => {
      const key = queryCacheKey as QueryCacheKey;
      apiCtx.dispatch(
        api.internalActions.removeQueryResult({ queryCacheKey: key }),
      );
    });

    apiCtx.dispatch(api.util.invalidateTags([ApiTag.SESSION_DATA]));
  }

  return result;
};

but, as noted in the docs, the hooks themselves also have internal state that doesn't get reset when global redux state is reset. So at near the root of my application I added a key={currentUser?.id} so that when logout happens, the root component is unmounted and a new one is created (basically a refresh but a bit quicker)
App.ts

....
const { currentUser } = useAuth();
....
return <RouterProvider router={router} key={currentUser?.id} />;
....

[markerikson]

@ErgEnn we did make some recent changes to try to improve hook reset behavior, so the keys might not be necessary at this point.

[ErgEnn]

@ErgEnn we did make some recent changes to try to improve hook reset behavior, so the keys might not be necessary at this point.

Hey! I am running version 2.7.0 so unless those changes are in some Beta version - they don't appear to fix the issue

[markerikson]

@ErgEnn ah, I was thinking of:

• fix(rtk-query): useQuery hook does not refetch after resetApiState #4758