How to show optimistic mutation?

[FatahChan]

right now
I am doing this to do a mutation

onChange={() => {
	todoCollection.update(todo.id, 
		(draft) => {
			draft.completed = !draft.completed;
		},
	);
}}

the mutation state is returned by the update function, but I want to change my ui based on it in react

// something like react-query

const {mutate: updateTodo, isOptimistic} useLiveMutation(() => {
	todoCollection.update(todo.id, 
		(draft) => {
			draft.completed = !draft.completed;
		},
	);
      return todoCollection
})

return <input type="checkbox" styles={isOptimistic ? ... : ...}/>

[KyleAMathews]

You use live queries https://tanstack.com/db/latest/docs/guides/live-queries

[FatahChan]

I don't get it. useLiveQuery doesn't return an isOptimistic flag does?

the point is on slow connection, I want to show the user the change made, is synced to the sever or not.

like this shown here in react-query https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#via-the-ui

where the opacity is set .5 when the mutation is still pending.

in my code below, if i want to toggle a todo on a slow internet, i might click the check box then close the tab thinking it was synced, but a server error occurred, the next time open the app, the todo won't have the correct state based on the user perspective

import { QueryClient } from "@tanstack/query-core";
import { queryCollectionOptions } from "@tanstack/query-db-collection";
import { createCollection } from "@tanstack/react-db";
import { createServerFn } from "@tanstack/react-start";
import { eq } from "drizzle-orm";
import { db } from ".";
import { todos } from "./schema";

const getTodos = createServerFn({
	method: "GET",
}).handler(async () => {
	return await db.query.todos.findMany();
});
const updateTodo = createServerFn({
	method: "POST",
})
	.inputValidator((data: { id: number; completed: boolean }) => data)
	.handler(async ({ data }) => {
		await db
			.update(todos)
			.set({ completed: data.completed })
			.where(eq(todos.id, data.id));
	});
const deleteTodo = createServerFn({
	method: "POST",
})
	.inputValidator((data: { id: number }) => data)
	.handler(async ({ data }) => {
		await db.delete(todos).where(eq(todos.id, data.id));
	});
const createTodo = createServerFn({
	method: "POST",
})
	.inputValidator((data: { title: string }) => data)
	.handler(async ({ data }) => {
		await db.insert(todos).values({ title: data.title });
	});
const queryClient = new QueryClient();
// Define a collection that loads data using TanStack Query
export const todoCollection = createCollection(
	queryCollectionOptions({
		queryClient: queryClient,
		queryKey: ["todos"],
		queryFn: async () => {
			return await getTodos();
		},
		getKey: (item) => item.id,
		onInsert: async ({ transaction }) => {
			const { modified } = transaction.mutations[0];
			await createTodo({ data: { title: modified.title } });
		},
		onUpdate: async ({ transaction }) => {
			const { original, modified } = transaction.mutations[0];
			await updateTodo({
				data: { id: original.id, completed: modified.completed },
			});
		},
		onDelete: async ({ transaction }) => {
			const { original } = transaction.mutations[0];
			await deleteTodo({ data: { id: original.id } });
		},
	}),
);

import { useLiveSuspenseQuery } from "@tanstack/react-db";
import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { todoCollection } from "@/db/collection";

export const Route = createFileRoute("/demo/drizzle")({
	component: DemoDrizzle,
});

function DemoDrizzle() {
	const { data: todos } = useLiveSuspenseQuery((q) =>
		q.from({ todos: todoCollection }),
	);

	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		const formData = new FormData(e.target as HTMLFormElement);
		const title = formData.get("title") as string;

		if (!title) return;

		todoCollection.insert({ title, completed: false, id: -1, createdAt: 0 });
	};

	return (
		<>
			<h2 className="text-2xl font-bold mb-4 text-indigo-200">Todos</h2>
			<ul className="space-y-3 mb-6">
				{todos.map((todo) => (
					<TodoItem key={todo.id} todo={todo} />
				))}
				{todos.length === 0 && (
					<li className="text-center py-8 text-indigo-300/70">
						No todos yet. Create one below!
					</li>
				)}
			</ul>
			<form onSubmit={handleSubmit} className="flex gap-2">
				<input
					type="text"
					name="title"
					placeholder="Add a new todo..."
					className="flex-1 px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 transition-all text-white placeholder-indigo-300/50"
					style={{
						background: "rgba(93, 103, 227, 0.1)",
						borderColor: "rgba(93, 103, 227, 0.3)",
					}}
				/>
				<button
					type="submit"
					className="px-6 py-3 font-semibold rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105 active:scale-95 whitespace-nowrap"
					style={{
						background: "linear-gradient(135deg, #5d67e3 0%, #8b5cf6 100%)",
						color: "white",
					}}
				>
					Add Todo
				</button>
			</form>
		</>
	);
}

const TodoItem = ({
	todo,
}: {
	todo: ReturnType<typeof todoCollection.get>;
}) => {
	if (!todo) return null;
	return (
		<li
			key={todo.id}
			className="rounded-lg p-4 shadow-md border transition-all hover:scale-[1.02] cursor-pointer group"
			style={{
				background:
					"linear-gradient(135deg, rgba(93, 103, 227, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%)",
				borderColor: "rgba(93, 103, 227, 0.3)",
			}}
		>
			<div className="flex items-center justify-between">
				<span className="text-lg font-medium text-white group-hover:text-indigo-200 transition-colors">
					{todo.title}
				</span>
				<span className="text-xs text-indigo-300/70">
					#{todo.id} -{" "}
					<input
						type="checkbox"
						checked={todo.completed}
						onChange={() => {
							todoCollection.update(
								id: todo.id,
								(draft) => {
									draft.completed = !draft.completed;
								},
							);
						}}
					/>
				</span>
			</div>
		</li>
	);
};

[Asjas]

useLiveQuery does optimistic updates automatically. There is no isOptimistic flag as you want it.

[FatahChan]

@Asjas I get that useLiveQuery Does it automatically

What I want is to show to the user if mutation has been persisted remotely?

I want to avoid a scenario like this

User edits an entity, the ui updates with optimistic update, user logs off, mutation failed, user log on, user see edit was undone.

[Asjas]

There are a couple of states that useLiveQuery provides, one is persisting. Use that to show some type of UI to the user that the data hasn't been synced yet before they leave the page.

https://tanstack.com/db/latest/docs/guides/error-handling#transaction-states-and-error-information

If they leave and the mutation fails and they log back in, there wouldn't be a way for useLiveQuery to resume because it's in-memory, the failed sync won't show up.

It sounds like you want a different solution to this, something like redis that can temporarily store the request and status that can be separately checked and can retry on its own without the user being signed in, or atleast can show a user that a request failed and a UI that allows them to retry it if you don't want it to automatically retry.

[Asjas]

Something like this might be possible on the client if you implement a Persistent React Query that stores data in IndexedDB or localStorage. That data would still be there if the user re-opens their browser and would sync back with the backend when the user reopens the website.

https://tanstack.com/query/latest/docs/framework/react/plugins/createAsyncStoragePersister

[FatahChan]

@Asjas thanks for that answer, first answer seems to be enough of my use case