How to Efficiently Update InfiniteQuery Comments with WebSockets?

[samuelndm]

I am fetching post comments using InfiniteQuery and have a WebSocket set up to notify me whenever a new comment is made or a comment is deleted. When I receive this comment object from the WebSocket, what's the most efficient way to update the comments without re-fetching all the pages?

Given that there might be multiple comments made in a short span, I'm concerned that re-fetching all comment query pages might not be optimal. Any suggestions?

[TkDodo]

what's the most efficient way to update the comments without re-fetching all the pages?

queryClient.setQueryData

[samuelndm]

@TkDodo I'm trying to add an item like this, but sometimes when is refetching in the background at the same time, the item (comment) disappear from the pages, would you take a look on the function please?

 queryClient.setQueryData(
      keyGetInfinitePostComments(postId),
      (oldData: InfiniteData<PaginationRawResponse<Comment[]>>) => {
        let pages = oldData?.pages ?? [];

        if (isDeletedComment) {
          pages = updateItemOnInfiniteQueryData(pages, comment);
        } else {
          pages = addItemOnInfiniteQueryData(pages, comment, oldData, ct);
        }

        return {
          ...oldData,
          pages,
        };
      },
    );

export const addItemOnInfiniteQueryData = (
  pages: PaginationRawResponse<any[]>[],
  item: any,
  oldData: InfiniteData<PaginationRawResponse<any[]>>,
  ct: number,
) => {
  const firstPageParam = oldData?.pageParams?.find(Boolean) as number;
  const firstPage = pages?.[0];

  if (firstPage?.results?.length < firstPageParam) {
    firstPage?.results?.unshift(item);
  } else {
    const newPage = {
      ct,
      results: [item],
    };

    pages?.unshift(newPage);
  }

  return pages?.map((page) => ({
    ...page,
    ct,
  }));
};