Storing initialData in cache

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?

[ties-v]

I have the same issue as @zomars and use this workaround for now. Maybe it is helpful for others.

import { useEffect, useRef } from 'react';
import _useSwr, {cache} from 'swr';
import { ConfigInterface, keyInterface, fetcherFn, 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
 */
const useSwr = <Data = unknown, Error = unknown>(
    key: keyInterface,
    fn?: fetcherFn<Data>,
    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, fn, config);
};

export default useSwr;

It basically sets the value of initialData into the cache on the first render, if the cache is empty for this key.

[lukaszromerowicz]

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

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