使用Wrinfinite与分页和突变特征

Question

我正在使用usewr来从NextJ中的客户端获取数据。

我正在做的事情并试图实现

我正在使用useswrinfinite进行分页功能，并尝试更新具有OpptisticData的绑定突变功能之类的评论，因为我想立即刷新数据。（客户端侧透视）

- ＆gt; https://swr.vercel.app/docs/munt.unt.popt-poptimistic-umistic-updates 然后从Axios中获取新的更新评论，并将其替换为以前的评论，该评论应更新。

预期

usesingwrinfinite的数据应立即更新，因为我正在使用OpportisticData选项，直到完成API调用为止，并且我可以将RETAIRES OPTICE设置为True，但是在突变返回中的异步功能更新了，该函数带有带有带有的更新数据。 Axios的响应。我不需要。

实际行为

即使我将OpportisticData传递给突变，也不会立即更新数据。它一直在等待直到完成API调用，然后更新。

我尝试过的

我尝试过仅使用分页功能的普通使用WRWARD，并且按照我的预期运行良好。

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 }
    );
  };