reactjs - Why is my cached state undefined on mutate in SWR?

Question

I have a component that gets the data for a subreddit with posts and every post has a vote:

const subUrl = `/api/subreddit/findSubreddit?name=${sub}`;

  const { data: fullSub, error } = useSWR(subUrl, fetchData, {
    initialData: props.fullSub, //comes from next.js getServerSideProps
  });

This works perfectly fine and it renders everything on the screen. But on my subredditPost component (I render a subredditPost for each post) I have this onClick function when I click the upvote button:

const upvotePost = async (postid, fullSub, subUrl) => {
  console.log("the sub variable is: ", subUrl); //same url as in the main component
  mutate(
    subUrl,
    async (data) => {
    // this is undefined when I hit on the upvote button
    // Expected: The current state of swr with the key of subUrl
      console.log("cached value: ", data);
      return {
        ...data,
        posts: data.posts.map((post) => {
          if (post.id === postid) {
            return {
              ...post,
              votes: [...post.votes, { voteType: "UPVOTE" }],
            };
          } else {
            return post;
          }
        }),
      };
    },
    false
  );
  const res = await fetch("/api/post/upvote", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ postId: postid }),
  });
  mutate(subUrl);
};

It always is undefined in the console.log on the code above. So I get an error and nothing renders on the page anymore. What am I doing wrong? I read it can't get the cache if I use a different key, but I'm using the same key. I pass the subUrl from my main component (where I fetch the subreddit) to the post component (where I click the upvote button). So it is exactly the same.

Why do I get undefined?

Answer 1

I was able to solve this issue by providing a default value to mutate like this:

mutate(
    sub,
    async (data = fullSub) => {
      console.log("cached value: ", data);
      return {
        ...data,
        posts: data.posts.map((post) => {
          if (post.id === postid) {
            return {
              ...post,
              votes: [...post.votes, { voteType: "UPVOTE" }],
            };
          } else {
            return post;
          }
        }),
      };
    },
    false
  );

So give the async function a default value if it's undefined: async (data = fullSub)

That fixes it but it's still not clear why it's undefined? Maybe somebody can answer this. I will leave this open for now, after a while if nobody has a better answer I will mark mine.