createOptimisticAction

Funktion: createOptimisticAction()

ts
function createOptimisticAction<TVariables>(options): (variables) => Transaction
function createOptimisticAction<TVariables>(options): (variables) => Transaction

Definiert in: packages/db/src/optimistic-action.ts:41

Erstellt eine optimistische Aktionsfunktion, die lokale optimistische Aktualisierungen sofort anwendet, bevor die eigentliche Mutation auf dem Server ausgeführt wird.

Dieses Muster ermöglicht reaktionsschnelle UI-Aktualisierungen, während die eigentliche Mutation läuft. Die optimistische Aktualisierung wird über den onMutate-Callback angewendet, und die Server-Mutation wird über die mutationFn ausgeführt.

Typparameter

TVariables = unbekannt

Der Typ von Variablen, die an die Aktionsfunktion übergeben werden

Parameter

Optionen

CreateOptimisticActionsOptions<TVariables>

Konfigurationsoptionen für die optimistische Aktion

Gibt zurück

Funktion

Eine Funktion, die Variablen vom Typ TVariables akzeptiert und eine Transaktion zurückgibt

Parameter

Variablen

TVariables

Gibt zurück

Transaction

Beispiel

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')
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')
Unsere Partner
Code Rabbit
Electric
Prisma
Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.

Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.