Interaction of mutate & initialData appears to be incorrect

[tmcw]

Hi folks! Lovely module here. Ran into a bit of an issue.

If you use initialData in your initial call to useSWR,

const { data } = useSWR(key, loadData, {
  initialData: initialData
})

And then someone calls mutate with a callback function on the page, then the mutate callback gets undefined as its input, not the initialData value. Mutate pulls data from the cache, but initialData is not set in the cache.

mutate(key, data => ({ ...data, foo: 1 }))

The end result is that if someone clicks a button that triggers a callback-based mutation before the initial data is revalidated, then the page likely crashes, because you just set the data to undefined.

Unfortunately, its not easy to work around this issue: I'd be okay with delaying the UI's appearance until there's an item in the cache, but the cache is internal. If I hid the UI based on isValidating, then it would blip whenever there are mutations. The mutate callback can't choose to return undefined for 'no effect'.

Ideally, mutate would be able to mutate the data in initialData, but I am probably missing something in the philosophy of swr that makes that incorrect.

[oran1248]

@aj-may
facing the same issue...
When the fix will be released???

[aj-may]

Yea, this is a bit of an annoying bug. I'm working around it for now by immediately calling mutate to fill the cache. Not a great long term solution.

const { data, mutate } = useSWR(myKey);
useEffect(() => { mutate(); }, []);

Hope my PR is reviewed and merged soon. I don't see any reason why the initialData shouldn't be put in the cache. Seems like a simple fix.

[oran1248]

Yea, this is a bit of an annoying bug. I'm working around it for now by immediately calling mutate to fill the cache. Not a great long term solution.

const { data, mutate } = useSWR(myKey);
useEffect(() => { mutate(); }, []);

Hope my PR is reviewed and merged soon. I don't see any reason why the initialData shouldn't be put in the cache. Seems like a simple fix.

It seems like a very basic and common behavior. I hope they will fix it very soon.

[oran1248]

@aj-may
When this issue will be fixed? It is very critical to me..

[mikestopcontinues]

Yeah, I'm having this bug too. I use SWR to do live edits, where the first time it makes sense to revalidate is when the user saves to the db, not during the edits themselves. Thanks @oran1248 for the workaround.

[mikestopcontinues]

I found another workaround, if you're only referencing the SWR key in one place:

const {data: rawData} = useSWR('/key', {initialData});
const [data, mutate] = useState(rawData);
useEffect(() => mutate(rawData), [rawData]);
// data + mutate() work roughly as you'd expect

[mikestopcontinues]

Is there any movement on this issue?

[dungkaka]

I face the same issue when mutate with fallbackData at new version.

[shuding]

As the new option name fallbackData suggests, this works more like a fallback, which is not stored in the cache. To correctly do initial cache right now I think you will need to use https://swr.vercel.app/docs/advanced/cache instead.