Steps for mutating multiple infinite lists

[codinginflow]

Let's say I want to delete a resource (a post) and remove it from different feeds that use useInfiniteQuery

Are these the correct steps to do that?

Merely invalidating the feeds is not enough because the more pages are in cache, the longer it takes, causing quite a long delay.

I cancel the queries first because otherwise, it seems to wait for revalidation to finish before we mutate the cache.

 const mutation = useMutation({
    mutationFn: deletePost,
    onSuccess: async () => {
      await queryClient.cancelQueries({ queryKey: ["post-feed"] });

      queryClient.setQueriesData(
        { queryKey: ["post-feed"] },
        (oldData: InfiniteData<PostsPage, unknown> | undefined) => {
          if (!oldData) return;

          return {
            ...oldData,
            pages: oldData.pages.map((page) => {
              page.posts = page.posts.filter((p) => p.id !== post.id);
              return page;
            }),
          };
        },
      );

      queryClient.invalidateQueries({ queryKey: ["post-feed"] });
      
     [...]
    },
    onError(error) {
      [...]
    },
  });

[TkDodo]

looks good

[codinginflow]

Awesome, thank you for being so responsive!