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>
	);
};