Mutating same key during ongoing async mutation and optimistic state (two concurrent mutations)

[petrnovikov]

I'm building a to-do list tool and trying to enable the following behavior when editing tasks:

1. Pressing "Enter" creates a new task below the current one and focuses it
2. User immediately can start typing text in the new task

Here's an example of how this works in Notion:

When I implement this functionality with optimistic updates the first part works as intended.
But, if the asynchronous fetcher function of the first mutate (create new task) is still running when I start typing in the new task (and hence calling the second mutate function) the state immediately rolls back to where it was before the new task was created.

Here's an example:

This problem doesn't occur, if the first async function finishes running before I start typing, it only occurs if the first mutate function is still running when the second mutate is called and the state is optimistic.

Below is simplified code demonstrating my approach (throttled async functions while typing, task ordering and focusing purposefully omitted for simplicity, but are implemented in the full code).

"use client";
import useSwr, { mutate } from "swr";
import fetcher from "@/lib/api/fetcher";
import { nanoid } from "@/lib/functions/general";

interface Task {
    id: string;
    text: string;
}

const tasksKey = "/tasks";

const TasksContainer = () => {

    const { data } = useSwr<Task[]>(tasksKey, () => fetcher({ key: tasksKey, method: "get" }));

    return (
        <div className="flex flex-col">
            {
                data && data.map(task => (
                    <Task
                        id={task.id}
                        text={task.text}
                        key={task.id}
                    />
                ))
            }
        </div>
    )
}

const Task = ({ id, text }: Task) => {

    // Update task text (simplified, async throtteling not included)
    const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
        const newText = evt.target.value;
        mutate(tasksKey, fetcher({ key: tasksKey, method: "patch", data: { text: newText } }), {
            optimisticData: (tasks: Task[]) => tasks.map(task => task.id === id ? { ...task, text: newText } : task),
            populateCache: (updatedTask: Task, tasks: Task[]) => tasks.map(task => task.id === id ? updatedTask : task),
            rollbackOnError: true,
            revalidate: false,
        })
    }

    // Create new task below current (simplified, ordering and focusing not included)
    const handleKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {
        if (evt.key != "Enter") return;
        const newTask = { id: nanoid(), text: "" };
        mutate(tasksKey, fetcher({ key: tasksKey, method: "post", data: newTask }), {
            optimisticData: (tasks: Task[]) => [...tasks, newTask],
            populateCache: (createdTask: Task, tasks: Task[]) => [...tasks, createdTask],
            rollbackOnError: true,
            revalidate: false,
        })
    }

    return (
        <input
            type="text"
            value={text}
            onChange={handleChange}
            onKeyDown={handleKeyDown}
        />
    )
}

export default TasksContainer;

Here's a diagram explaining my issue:

• Am I missing something or is this the intended behavior?
• If so, is there a way to achieve a truly optimistic UI with swr, i.e. not only show currently optimistic data but also mutate it?
• If not, are there any alternative approaches (not native swr that allow this).

This might be somewhat related to #735 and #922 but both are pretty old and relate to swr 1.0,