Prevent persistence of specific pages of useInfiniteQuery result

[danieljvdm]

Hey, I've read most (maybe all!) of the issues around useInfiniteQuery and how the cache works with it. It makes sense to me that that's the way it should work. However, I don't want my mobile app holding onto a massive (persisted) cache of data for all paginated queries and I also don't want n API calls on startup to refetch data that isn't needed. I do, however, want an initial page rendered immediately on app startup. This is clearly a persistence problem and not necessarily a cache problem. However, I'm not really sure what the best way to prevent page > 1 pages from being persisted without doing some nasty hacky JSON parsing.

My current solution is to hijack the useIsRestoring hook and basically extend my app's rehydration until after I've purged the pages from the cache:

useEffect(() => {
  if (!isRestoring && !hasHiddenSplashScreen.current) {
    queryClient.setQueryData(postsQueryOptions().queryKey, (data) => {
      if (!data) return data;

      return {
        pages: data.pages.slice(0, 1),
        pageParams: data.pageParams.slice(0, 1),
      };
    });
    setIsReady(true);
    SplashScreen.hide();
    hasHiddenSplashScreen.current = true;
  }
}, [isRestoring]);

// prevent app from rendering/queries from being mounted
if (!isReady) return null

This works and gets the job done, but ideally this could be configured further upstream and prevent from ever getting into the persisted cache.

Maybe I'm missing something and there's a better way to do this.