Cache problem when put in initialData when using useSWR

[jonsoku-dev]

I found a bug that when using the default useSWR, initialData is not cached. So, I solved the initial cache storage problem by using the following custom useSwr.

However, when I ran global mutate on another page, I found out that it was not being refetched from useSWR in original page.

1. [LIST PAGE] localhost:3000/post

   • get post list by getStaticProps.
   • useSwr("server_api_url/post", {initialData: initialPosts })

2. [CREATE PAGE] localhost:3000/post/create

   • create post
   • global mutate("server_api_url/post")
   • router.push('/post')

3. [LIST PAGE] localhost:3000/post

   • Not updated with the latest post list

I am temporarily using revalidateOnMount: true. When this is used, when a page is moved due to router.push, the list page makes an API request again.

But this is not the ultimate solution I want.
The reason is that when entering the LIST page for the first time, API called from getStaticProps, and an additional API called again through revalidateOnMount.

Is there any solution for this?

custom useSwr

import { useEffect, useRef } from 'react';
import _useSwr, { cache } from 'swr';
import { ConfigInterface, keyInterface, responseInterface } from 'swr/dist/types';

/**
 * Patched version of SWR to work around the fact that initial data is not inserted to the cache.
 *
 * This is an issue when using useSWR with initialData and then calling mutate with a function that
 * expects the current value. Before the data is revalidated, the function passed to mutate will
 * receive undefined.
 *
 * Based on:
 * @see https://github.com/vercel/swr/issues/284#issuecomment-706094532
 */

export const useSwr = <Data, Error>(
  key: keyInterface,
  config?: ConfigInterface<Data, Error>
): responseInterface<Data, Error> => {
  const hasMounted = useRef(false);

  if (config?.initialData) {
    const [k] = cache.serializeKey(key);
    // Set initial data as cache value if:
    // initialData is set
    // it is the first render
    // and the cache value for this key is undefined
    if (!hasMounted.current && cache.get(k) === undefined) {
      cache.set(k, config?.initialData);
    }
  }

  useEffect(() => {
    hasMounted.current = true;
  }, []);

  return _useSwr<Data, Error>(key, config);
};

[ErnestBrandi]

Hi, for what I know :

1. you should not handle the cache property, especially in production, as it has been made public for testing purposes (but I understand this is a patch)
2. I don't see why it would be wrong to have another call made to your api when going back to your /post page. After all this is the very definition of the hook : Stale-While-Revalidate
3. I guess you could use swr that way so you can update the data and not triggering a revalidation mutate('/api/post', [...posts, newPost], false)