How to postpone refetching of invalidated RTK query

Question

RTK query seems to work so that when cached results get invalidated, the invalidated query is being re-fetched immediately. I would expect that a re-fetch would execute when the program requests invalidated data, but not sooner.

Real world use case

Suppose I have an app where the user needs to login - so something that majority of webapps do. Let's say I have three endpoints:

• login mutation - logs the user in
• getAuthInfo query - gets the authenticated session data (has providesTags: ['AuthData'] set)
• logout mutation - logs the user out (has invalidatesTags: ['AuthData'] set)

When the user logs in, the code requests authenticated session info. And this data naturally gets cached as many pages may need certain data of this information.

But when the user later logs out, the cached data gets invalidated (as per auto-invalidation tags settings), and gets therefore immediately re-fetched by the RTK query lib. Such a call fails with HTTP 401 for obvious reasons.

Question

How can I prevent an invalidated query from being immediately re-fetched? In the upper example I would want data to be re-fetched when the code makes a new call to the endpoint but not sooner. Is it possible to control re-fetching behaviour in RTK Query?

Tench

I feel like this is the use case for redux-toolkit.js.org/rtk-query/api/created-api/… where you call that when the time is right per your logic and then you make logout not automatically invalidateTags – Broccoli

Answer 1

The best way to invalidate tags with a delay is to use the onQueryStarted() method and combine it with a setTimeout and the api.util.invalidateTags() method from Redux toolkit.

    completeCheckListTask: builder.mutation<TaskResponse, TaskCompleteArg>({
      query: ({ body, pathParams }) => ({
        url: `checklist/${pathParams.id}/${pathParams.exampleId}/task/${pathParams.anotherId}`,
        method: 'PATCH',
        body,
      }),
      async onQueryStarted(props, { dispatch, queryFulfilled }) {
        await queryFulfilled
        setTimeout(() => {
          dispatch(api.util.invalidateTags(['Checklist']))
        }, 3000)
      },
    }),

You can read more at the docs here https://redux-toolkit.js.org/rtk-query/usage/manual-cache-updates

Banquer

But that doesn't delay the fetch until it's requested the next time, but delays by a predefined amount of time which is not what I'm after. – Tench

Answer 2

I'm using dispatch(apiSlice.util.resetApiState()) on logout, which may work for your use case.

Foreigner

Answer 3

I would recommend to have a flag isAuthenticated and if you logged out set this flag to false. Once the user successfully logged out have a skip: !isAuthenticated for the queries that invalidated after logout.

Shoemaker