@tanstack/db
Version:
A reactive client store for building super fast apps on sync
40 lines (39 loc) • 1.48 kB
text/typescript
import { CreateOptimisticActionsOptions, Transaction } from './types.cjs';
/**
* Creates an optimistic action function that applies local optimistic updates immediately
* before executing the actual mutation on the server.
*
* This pattern allows for responsive UI updates while the actual mutation is in progress.
* The optimistic update is applied via the `onMutate` callback, and the server mutation
* is executed via the `mutationFn`.
*
* @example
* ```ts
* const addTodo = createOptimisticAction<string>({
* onMutate: (text) => {
* // Instantly applies local optimistic state
* todoCollection.insert({
* id: uuid(),
* text,
* completed: false
* })
* },
* mutationFn: async (text, params) => {
* // Persist the todo to your backend
* const response = await fetch('/api/todos', {
* method: 'POST',
* body: JSON.stringify({ text, completed: false }),
* })
* return response.json()
* }
* })
*
* // Usage
* const transaction = addTodo('New Todo Item')
* ```
*
* @template TVariables - The type of variables that will be passed to the action function
* @param options - Configuration options for the optimistic action
* @returns A function that accepts variables of type TVariables and returns a Transaction
*/
export declare function createOptimisticAction<TVariables = unknown>(options: CreateOptimisticActionsOptions<TVariables>): (variables: TVariables) => Transaction;