What is the correct way to call updateCachedData on a click event in a component that uses the RTKQ query?

I can only think of storing a reference to updateCachedData somewhere globally and use it in that click event but I am not sure this is the React way of doing this.

I have a notifications feed built with a Socket.IO server.

By clicking on a notification it should get deleted from the list. (The list should show only unread notifications.)

But when deleting from the list I create a new array as state in the notifications pane.

When I receive a new notification, all the deleted notifications return back – this is not what I intended.

How can I change the cache entry, more precisely remove items from it without remaking the request for all the notifications?

There are no error messages.


getNotifications: build.query<
  query: (params: IGetNotificationsQueryParams) => ({
    url: `notifications?authToken=${params.authToken || ""}&limit=${
    }&userId=${params.userId || ""}${
      params.justUnread ? "&justUnread" : ""
    method: "GET"
  keepUnusedDataFor: 0,
  async onCacheEntryAdded(
    { updateCachedData, cacheDataLoaded, cacheEntryRemoved }
  ) {
    const { myIo, connectHandler } = getWebSocketConnection(
        subscribtions: arg.userId
          ? getFollowedUserIds().concat({
              uid: arg.userId,
              justUnread: arg.justUnread
          : getFollowedUserIds()

    const listener = (eventData: IDbNotification) => {
      if (
        (eventData as any).subscriber === arg.userId &&
        (!arg.justUnread || typeof eventData.readDateTime === "undefined")
      ) {
        updateCachedData(draft => {
          if (draft.length > arg.limit) {

    try {
      await cacheDataLoaded;

      myIo.on("notifications", listener);
    } catch {}

    await cacheEntryRemoved;

    myIo.off("notifications", listener);
    myIo.off("connect", connectHandler);


You can use updateQueryDataupdateCachedData is just a shortcut for the current cache entry for convenience.

          api.util.updateQueryData('getNotifications', arg, (draft) => { 
           // change it here 

See this for more context: https://redux-toolkit.js.org/rtk-query/usage/optimistic-updates