invalitate/clear whole api data on user logout

[wuifdesign]

Hi,

I want to invalidate a whole api if a user gets logged out (cookie expired and the server response 401).
I extended the baseQuery to do this:

const baseQuery = fetchBaseQuery({ baseUrl: '/api' })
const baseQueryWithAuthCheck: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
  args,
  api,
  extraOptions
) => {
  const result = await baseQuery(args, api, extraOptions)

  if (result.error && result.error.status === 401) {
    // should invalitate whole api state
    // goto auth page
    retry.fail(result.error)
  }

  return result
}

First way would be to use tags, but i can't find a way to invalidatesTags from outside a mutation and invalidation will still keep the data in the redux store (if i understand it right). i would need something like api.invalidateTags(['Auth']) and add the Auth tag to all endpoints. but still i will not be able to invalitate it inside the baseQueryWithAuthCheck.

Better way would be to get the data out of the redux store. something like api.clear() which removes all stored data and triggers refetch for all active subscriptions.

[phryneas]

Are you looking for https://redux-toolkit.js.org/rtk-query/api/created-api/cache-management-utils#resetapistate ?

[phryneas]

What about

let backendApi;
const baseQueryWithAuthCheck = ...
backendApi = createApi({

?

The baseQuery will never be invoked during createApi

[wuifdesign]

Than i have to do the typing of backendApi all by myself. otherwise i will get: Variable 'backendApi' implicitly has an 'any' type..
Loosing all autocompletion. And doing the types by myself for all endpoints is really hard.

let backendApi: Api<
  BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, {}>,
  {
    getUser: QueryDefinition<
      void,
      BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, {}>,
      'AUTHENTICATED' | 'User',
      UserType,
      string
    >
  },
  'backendApi',
  'AUTHENTICATED' | 'User',
  typeof coreModuleName | typeof reactHooksModuleName
>

this will explode if i add more endpoints.

[phryneas]

hmm. like this?

let referenceToApi: undefined | typeof backendApi;
const baseQueryWithAuthCheck = ...
const backendApi = createApi({...});
referenceToApi = backendApi

[wuifdesign]

if i do this i will get ESLint: 'referenceToApi' is never reassigned. Use 'const' instead.(prefer-const) as it is used before it is assigned (inside the baseQueryWithAuthCheck). even is i assign it afterwards.

but i may just supress it with // eslint-disable-next-line prefer-const.

[phryneas]

Yeah, can't do anything about linter rules unfortunately - I think it's okay to just disable that there :)