useSWRInfinite with pagination and mutate features

[janghanp]

What I am doing and trying to achieve

I am using useSWRInfinite for the pagination feature and trying to update comments like state with bound mutate function with optimisticData option since I wanted to refresh the data immediately.(client-side perspective)

-> https://swr.vercel.app/docs/mutation#optimistic-updates and then get a new updated comment from axios and replace it with a previous comment that should be updated.

Expected

The data from useSWRInfinite should be updated right away since I am using optimisticData option until the API call is done and I could've set revalidate option to true but an async function in the mutate returns updated data with the response from axios. I didn't need it.

Actual behaviour

Even though I am passing optimisticData to the mutate, It doesn't update the data immediately. It keeps waiting until The API call is done and then gets updated.

What I've tried

I have tried using just the normal useSWR function without the pagination feature and it worked well as I expected.

I would really appreciate any help

Thank you :) 👍

const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite<CommentType[]>(
    (index) => `/api/comment?postId=${postId}&currentPage=${index + 1}`,
    fetcher,
    { revalidateFirstPage: false }
);


const likeCommentHandler = async (commentId: string, dislike: boolean) => {
    const optimisticData = data?.map((comments => {
      return comments.map((comment) => {
        if (comment.id === commentId) {
          if (dislike) {
            --comment._count.likedBy;
            comment.likedByIds = comment.likedByIds.filter(
              (likeById) => likeById !== session!.user.id
            );
          } else {
            comment.likedByIds.push(session!.user.id);
            ++comment._count.likedBy;
          }
          return { ...comment };
        } else {
          return { ...comment };
        }
      });
    });

    mutate(
      async (data) => {
        const { data: result } = await axios.post("/api/likeComment", {
          commentId: commentId,
          userId: session?.user.id,
          dislike,
        });

        const newData = data?.map((comments) => {
          return comments.map((comment) => {
            if (comment.id === result.comment.id) {
              return result.comment;
            } else {
              return comment;
            }
          });
        });

        return newData;
      },
      { optimisticData, revalidate: false, populateCache: true }
    );
  };

[adamvigneault]

Looking at the source code, the mutate function swrInfinite returns only passes through revalidate. Which is obnoxious. Is there another approach that would work?

[janghanp]

Unfortunately, I couldn't find what I want and don't think it is that efficient in this case. It was hard to handle that it tries to revalidate all HTTP requests corresponding to each page. Which makes sense though otherwise, some data is going to get pushed away after creating or deleting.

[tonypee]

I am having trouble with pagination + optimistic updates too - is this broken? seems that the mutate work to change the value

[tonypee]

so it seems swr is just broken for infinite data with optimistic updates. hmm