Update Slice State After Manual Cache Update

[User6531]

Hi everyone,

I'm facing an issue where the state of a slice in my application isn't updating correctly after I manually update the cache. The slice contains a property dependent on the number of users, recalculated through an addMatcher in extraReducers. However, when I update the cache manually, this doesn't trigger the matcher, leaving the property unchanged.

Any suggestions on how to ensure the property recalculates after manual cache updates would be appreciated.

Thanks.

const userSlice = createSlice({
  name: "userSlice",
  initialState: { usersAmount: 0 },
  reducers: {},
  extraReducers: (builder) => {
    builder.addMatcher(
      usersApi.endpoints.getUsers.matchFulfilled,
      (state, { payload }) => {
        state.usersAmount = payload.length;
      },
    );
  },
});

const usersApi = mainApi.injectEndpoints({
  endpoints: (builder) => ({
    getUsers: builder.query<TUser[], void>({
      query: () => `${usersBaseUrl}/users`,
    }),

    deleteUser: builder.mutation<void, string>({
      query: (userId) => ({
        url: `${usersBaseUrl}/users/${userId}`,
        method: "DELETE",
      }),
  
      async onQueryStarted(userId, { dispatch, queryFulfilled }) {
        try {
          await queryFulfilled;
  
          dispatch(
            usersApi.util.updateQueryData("getUsers", undefined, (prevData) =>
              prevData.filter((user) => user.id !== userId),
            ),
          );
        } catch {}
      },
    })
  }),
});

[EskiMojo14]

are you editing userAmount anywhere else, or is it purely derived from the query data?

[phryneas]

Yeah, just from this snippet this looks like a value that you definitely should not be holding in a Redux store on it's own.

[User6531]

@EskiMojo14 @phryneas

My code is just a simplified example.
userAmount does not change anywhere else; it is purely derived from the query data.
The reason why I hold it in the redux store is that I need this value inside my header component which is permanently on page.
If I try to use the query hook inside a header, the data will always be in use and never unsubscribe, which causes the cache to never clear and refetch again.
I want to keep the logic when the data will invalidate 60 seconds after unsubscribe.

[phryneas]

To me that sounds like you should set the refetchOnMountOrArgChange option to useQuery in your non-header component to 60 seconds instead.

[User6531]

Yea, that what I have right now, it works, but I have about 5 non-header components that use useQuery, and it could become more. Because of that, I am thinking of changing the logic a bit.

[User6531]

I assume that there is no possibility to auto trigger addMatcher in extraReducers after manual cache updating.

[EskiMojo14]

there is no action dispatched that would be useful to you, no - the only action actually dispatched contains JSON patches of your changes that are applied in the reducer itself.
https://github.com/reduxjs/redux-toolkit/blob/master/packages/toolkit/src/query/core/buildSlice.ts#L130
https://github.com/reduxjs/redux-toolkit/blob/master/packages/toolkit/src/query/core/buildThunks.ts#L251

[User6531]

thank you for your reply, much appreciated