Is it possible to filter out cached RTK query entries using the data they contain?

[sebpowell]

Hello,

We have an app that uses Pusher to notify connected clients that data has changed and trigger a refetch, and we are using RTK query to fetch that data. In the UI, the user can apply a date filter, and then pull in items for that date. So our RTK API looks something like this:

export const itemsApi = createApi({
  reducerPath: "itemsApi",
  baseQuery,
  tagTypes: ["feed"],
  endpoints: (builder) => ({
    fetchItems: builder.query<
      {id: number, title: string, date: string},
      { date: string }
    >({
      query: (props) => {
        return {
          url: "",
          method: "GET",
          body: props,
        };
      },
      providesTags: (result, error, request) => [
        { type: "feed", id: request.date || "" },
      ],
    }),
  }),
});

If the user scrolls through multiple pages of dates, we'll have one entry for each date.

Suppose Pusher now notifies us that an item with ID 123 has been updated. We don't know what date that item belongs to, we only have the ID. Is there a way with RTK to filter the cache keys using the data that's stored within them, and if one is found, only invalidate that one? Something like this:

const itemId = 1; // The ID contained within the push notification

const invalidateCacheEntry = (itemId) => (dispatch, getState) => {

  const items = itemsApi.endpoints.fetchItems.select(getState());

  const matchingCacheKeys = Object.keys(queries).filter((cacheKey) => {
    const queryState = queries[cacheKey];
      
    const data = queryState?.data;
        
    return data?.some((item) => item.id === itemId);
  });

  // Invalidate cache entries
  matchingCacheKeys.forEach((cacheKey) => {
    dispatch(
     itemsApi.util.invalidateTags([{ type: "feed", id: cacheKey }]),
    );
  });
};

dispatch(invalidateCacheEntry(itemId))

At the moment, the only way I can see to solve this is to either invalidate all keys, or amend our Push notifications to include the item date, or use the returned item ids to create the ID for the cache entry – something like this:

providesTags: (result, error, request) => [
  { type: "feed", id: result.items.map((item) => item.id).join("_") }
],

And then, invalidate any entries that contain the item id in their id. But each page could potentially contain dozens of items, so that doesn't seem like a great idea (?).

Hopefully I've asked the question clearly – any advice or guidance would be greatly appreciated, thank you in advance.

[User6531]

I had the same issue; I couldn't find an appropriate solution and decided to just not keep the cache at all.

In my app, I have a connection through websockets. When an update is received, I need to replace the item that can be on any page. Therefore, I have to find and update the cache entry that contains that specific item.