Second SWR call in quick succession on same data parts from original state instead of the result of the first call

[umagon]

I'm using SWR to update AsyncStorage. I am calling the same key two times quickly in a row, and even though I'm using optimisticData, I keep getting from the calls results parting from the original state. To illustrate:

What I want to achieve is:

Original state: { value: 1}
State after call #1 (add 1): { value: 2}
State after call #2 (subtract 1): { value: 1}

Instead, what I get is:

Original state: { value: 1}
State after call #1 (add 1): { value: 2}
State after call #2 (subtract 1): { value: 0}

And this last result is what gets persisted in AsyncStorage. This happens because both calls, being called in a quick succession, part from the same original state { value : 1} instead of the optimisticData kicking in and feeding the local new state to the next call.

Why is this happening? Is there a way I can get SWR to work the way I want? Here is my code:

I'm using:swr 1.3.0, react-native 0.64.3, react-native-async-storage/async-storage ~1.15.0

Component doing the calls:

  // ...

  const { data: weekTasks, upsert: upsertWeekTasks } = useLocalSWR(`tasks`, {});

  const upsertTask = async (task, beforeIndex = null) => {
    const updatedWeekTasks = { ...weekTasks };
    const day = new Date(task.date).getDay();
    updatedWeekTasks[day].push(task);
    await upsertWeekTasks(updatedWeekTasks);
  }

  const removeTask = async task => {
    const updatedWeekTasks = { ...weekTasks };
    const day = new Date(task.date).getDay();

    const i = updatedWeekTasks[day].indexOf(task);
    if (i + 1) updatedWeekTasks[day].splice(i, 1);

    await upsertWeekTasks(updatedWeekTasks);
  }

  // ... rest of the component, I call these functions from some buttons
  // like this:
  //          onPress={async () => upsertTask(task)}

Custom SWR hook:

import AsyncStorage from '@react-native-async-storage/async-storage';

const upsertAsyncStorage = async (key, item) => {
  await AsyncStorage.setItem(key, JSON.stringify(item));
  return item;
}
const useLocalSWR = (url, SWRoptions = {}) => {
  const obj = useSWR(url, SWRoptions);
  const upsert = async (item, mutateOptions = {}) => {
    const newItem = await upsertAsyncStorage(url, item)
    obj.mutate({...newItem}, { optimisticData: newItem, ...mutateOptions })
  }
  return { ...obj, upsert }
}

Fetcher fed to SWRConfig:

import AsyncStorage from '@react-native-async-storage/async-storage';

const fetcher = (url) => {
  return AsyncStorage.getItem(url)
    .then((res) => { 
      return res && JSON.parse(res)
    });
}