How to invalidate RTK query caches(reset state) globally?

user_2350744 0
Viewed 3974

Project uses redux toolkit and rtk query. Data are fetched from one api, but the code is split into smaller chunks to reflect logical parts like

  • /vehicles
  • /users
  • /settings

...etc

After logout rtk query preserves its state, so on next login the data are old. They might not even reflect the current user. How can I invalidate all the caches?

rtk rtk-query redux reactjs
2 Answers

Actually it is pretty simple, but I had to refactor the code.

I created new api for each logical part. So to invalidate cache I would have to reset each api's state individually.

Fortunately rtk has code splitting capabilities in it.

https://redux-toolkit.js.org/rtk-query/usage/code-splitting

Basically you create baseApi likes this:

export const baseApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: `${BASE_URL}/api`,
    prepareHeaders: (headers, { getState }) => {
      const token = (getState() as RootState).auth.token;
      if (token) {
        headers.set("authorization", `Bearer ${token}`);
      }
      return headers;
    },
  }),
  tagTypes: ["Vehicle", "CompanySetting", "Associate"],
  endpoints: () => ({}),
});

Then you can add api slice to it in a separate file, like so

export const companySettingsApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getCompanySettings: builder.query<CompanySetting[], void>({
      query: () => ({
        url: `/companySettings`,
      }),
      providesTags: (_) => ["CompanySetting"],
    }),
    setCompanySettings: builder.mutation<void, CompanySetting[]>({
      query: (companySettings) => ({
        url: `/companySettings`,
        method: "PUT",
        body: companySettings,
      }),
      invalidatesTags: (_) => ["CompanySetting"],
    }),
  }),
});

This gives you ability to reset entire api state with a single dispatch

    dispatch(baseApi.util.resetApiState());

user_23507440

SOLUTION: This will immediately remove all existing cache entries, and all queries will be considered 'uninitialized'. So just put the below code into onClick or according to your scenario so when you hit an enter request will go and cache would also be clear. below here api is your name of an api which you would set in your rtk query in store.

dispatch(api.util.resetApiState());

For more info please have a look in documentation https://redux-toolkit.js.org/rtk-query/api/created-api/api-slice-utils

user_171518010
Related