Why is my cached state undefined on mutate in SWR?

[SelfDevTV]

Hi guys!

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?
Thx SelfDevTV

[TulshiDas39]

I faced same problem,
I imported useSwr from "swr/dist".
After converting
import { useSwr } from 'swr/dist'; to
import { useSwr } from 'swr'; everything works fine