CODEWITHSUNDEEP
reactjscachingreact-reduxredux-toolkitrtk-query
silviubogan
silviubogan

Reputation: 3461

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.

Code

getNotifications: build.query<
  IDbNotification[],
  IGetNotificationsQueryParams
>({
  query: (params: IGetNotificationsQueryParams) => ({
    url: `notifications?authToken=${params.authToken || ""}&limit=${
      params.limit
    }&userId=${params.userId || ""}${
      params.justUnread ? "&justUnread" : ""
    }`,
    method: "GET"
  }),
  keepUnusedDataFor: 0,
  async onCacheEntryAdded(
    arg,
    { updateCachedData, cacheDataLoaded, cacheEntryRemoved }
  ) {
    const { myIo, connectHandler } = getWebSocketConnection(
      "notifications",
      clone({
        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 => {
          draft.unshift(eventData);
          if (draft.length > arg.limit) {
            draft.pop();
          }
        });
      }
    };

    try {
      await cacheDataLoaded;

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

    await cacheEntryRemoved;

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

Upvotes: 1

Views: 2257

Answers (1)

phry
phry

Reputation: 44226

You can use updateQueryData - updateCachedData is just a shortcut for the current cache entry for convenience.

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

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

Upvotes: 2

Related Questions