Adding a new item when using useSWRInfinite

[florianwalther-private]

I am building a comment system where new replies are added to the start (top) of the list. The pagination is cursor-based.

At the moment, I use mutate to add the newly created comment as its own page to the front of the list.:

const {
    data: commentsPages,
    : commentsPagesSize,
    : setCommentsPagesSize,
    //TODO: Not true on successive page load. But isValidating refreshes on refetches
    isLoading: commentsLoading,
    error: commentsLoadingError,
    mutate: mutateCommentPages,
} = useSWRInfinite(
    getPageKey,
    ([blogPostId, lastCommentId]) => BlogApi.getCommentsForBlogPost(blogPostId, lastCommentId));

<CreateCommentBox
    blogPostId={blogPostId}
    title="Write a comment"
    onCommentCreated={(newComment) => {
        const updatedPages = commentsPages?.map(page => {
            const updatedPage: GetCommentsResponse = { comments: [newComment, ...page.comments], paginationEnd: page.paginationEnd };
            return updatedPage;
        })
        mutateCommentPages(updatedPages, { revalidate: false });
    }}
/>

The problem is, SWR immediately starts revalidating the list and pushes the comment at the bottom out of the data set. This behavior is kind of awkward.

Is my only choice do disable automatic revalidation completely? How would you handle this?