Swr: Storing initialData in cache

[lukaszromerowicz]

Hello,

I have a use-case where I would like to take advantage of the swr built-in cache and store the initialData there.
I found out I can use the cache module e.g.:

import { cache } from 'swr';

cache.set('my-key', initialData);

But I am wondering if there is any other, preferred way of achieving this?

[sergiodxa]

You can also use the mutate function

[lukaszromerowicz]

Do you see this ever becoming a feature?
e.g.

const { data, error } = useSWR('/api/user', fetcher, { initialData, cacheInitialData: true })

[huozhi]

@lukaszromerowicz explanation for the same topic: https://github.com/vercel/swr/pull/388#issuecomment-638085648

[zomars]

I'm dropping my two cents here, what would be an optimal approach to this scenario using Next.js:

export async function getServerSideProps() {
  const user = await fetcher('/me');
  return { props: { user } };
}

function Props(props) {
  const { data } = useSWR('/me', fetcher, { initialData: props.user });

  const handleClick = () => {
    mutate('/me', (cachedUser) => {
      // At the first click of the button, cachedUser will be undefined.
      return { ...cachedUser, name: 'other name' };
    });
  };

  return <button onClick={handleClick}>Change my name {user.name}</button>;
}

At first my solution was to put cache.set('/me', user) inside the getStaticProps function, but I don't know if it will have unintended consequences.

[Develliot]

You can also use the mutate function

Would that still work if the key doesn't exist in the cache yet?

[sergiodxa]

@Develliot yes, if it's not in cache it will create it