How to prevent manually normalized data in cache from being garbage collected

[yadielar]

I have a very interesting use case for which I haven't found a clean solution with React Query.

I'm building a calendar with the following custom query hook:

function useCalendarData({ workspaceId, month, year, filters }, queryOptions) {
  const queryClient = useQueryClient();

  return useQuery(
    ['calendar', { workspaceId, month, year, filters }],
    () => api.getCalendarData({ workspaceId, month, year, filters }),
    {
      ...queryOptions,
      onSuccess: data => {
        data.posts.forEach(post => {
          queryClient.setQueryData(['calendar-posts', post.id], post);
        });
        if (queryOptions.onSuccess) {
          queryOptions.onSuccess(data);
        }
      }
    }
  );
}

The data returned by the backend looks like this:

{
  "calendar": {
    "days": [
      {
        "dayNumber": 1,
        "dayFormatted": "2021-09-01",
        "weekdayNumber": 2,
        "weekdayName": "Wednesday",
        "weekNumber": 1,
        "withinMonth": true,
        "posts": ["1", "2", "3"]
      },
      ... // more days
    ],
    "month": 9,
    "monthName": "September",
    "year": 2021
  },
  "posts": [
    {
      "id": "1",
      "title": "Event 1",
      ... // more post data
    },
    {
      "id": "2",
      "title": "Event 2",
      ... // more post data
    },
    {
      "id": "3",
      "title": "Event 3",
      ... // more post data
    },
  ]
}

In the calendar component, I'm keeping track of selected posts and I need to display them in a separate sidebar. The selected posts from a given month can still be displayed in the sidebar even if the user has navigated to a different month.

My attempt to solve this involves normalizing the posts data into their own individual caches with the ['calendar-posts', post.id] query key. Then in the sidebar, I implemented a useSelectedPosts hook that uses QueriesObserver to subscribe to the selected posts (without a query function) and get the data.

This seemed to work well at first. The subscriptions for the selected posts kept the caches active, and prevented them from being garbage collected even after navigating to other months in the calendar.

However, there's still a problem. Those caches are seeded when the calendar endpoint is called, but after 5 minutes, the posts that are not selected are garbage collected from the "calendar-posts" caches and if at that point I try to select a post from the current month, the useSelectedPosts hook can't find them in the caches and the sidebar breaks.

So I'm back at square one.

I don't see any other way to implement this use case without manually normalizing the posts data in the cache. How can I prevent it from being garbage collected in the scenarios I describe above? Am I going at this the wrong way?

--

Some workarounds I've tried:

1. Create a useKeepCalendarPosts hook that subscribes to all normalized "calendar-posts" that are currently visible in the calendar (I just pass the posts array I get from useCalendarData to this hook).

   • Tried with QueriesObserver again here, but performance screeched to a halt.

   • Then tried with useQueries, and it works...

     function useKeepCalendarPosts(postIds) {
       useQueries(
         postIds.map(postId => ({
           queryKey: ['calendar-posts', postId],
           queryFn: () => {}, // worried about this
           staleTime: Infinity,
           refetchOnMount: false
         }))
       );
     }

     ...but I'm passing a query function that returns undefined and I'm worried that that might screw the cache in some edge case. Also, this feels hacky.

2. Tried setting the refetchInterval on the useCalendarData hook to less than 5 minutes so that the "calendar-posts" are always refreshed, but this would cause performance problems in the server (getting this calendar data is very expensive).

Any other ideas?

[TkDodo]

I am not sure I understand the problem, but have you tried setting cacheTime to infinity?

[yadielar]

Hi @TkDodo, thank you for trying to understand my excessively long question, I know it's really complicated. 😅 I will try to create a sandbox soon, it's just gonna take me a while because there are many parts to this, but I'll post it here as soon as I can.

Your suggestion would work, but I think the staleTime: Infinity is better because it allows the "calendar-posts" caches to be garbage collected appropriately, after leaving the calendar. I only want to persist those caches while the calendar is active.

I managed to make this work with the useKeepCalendarPosts I mentioned above, but I'm worried about the empty query function possibly messing the cache, although I haven't encountered that yet in my testing.

What do you think about that useKeepCalendarPosts hook that doesn't really care about the data per se and is just signaling React Query that those queries need to be kept active? Is that a valid pattern?

[yadielar]

Btw, while I prepare the sandbox I will attempt to rephrase the question in a different way, maybe it would help understand my issue:

How can I manage the state of queries in the cache that are set imperatively from other useQuery hooks, but that don't have their own corresponding useQuery hook with an independent query function?