본문으로 건너뛰기

함수: createOptimisticAction()

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

정의 위치: packages/db/src/optimistic-action.ts:54

서버에서 실제 뮤테이션을 실행하기 전에 로컬 낙관적 업데이트를 즉시 적용하는 낙관적 액션 함수를 생성합니다.

이 패턴을 사용하면 실제 뮤테이션이 진행되는 동안 반응형 UI 업데이트를 제공할 수 있습니다. 낙관적 업데이트는 onMutate 콜백을 통해 적용되고, 서버 뮤테이션은 mutationFn을 통해 실행됩니다.

중요: mutationFn 내부에서는 반환하기 전에 서버 쓰기가 동기화되어 돌아왔는지 확인해야 합니다. 뮤테이션 함수에서 반환하면 낙관적 상태가 삭제되기 때문입니다. 일반적으로 이를 위해 Query의 utils.refetch(), 직접 쓰기 API 또는 Electric의 utils.awaitTxId()와 같은 컬렉션별 헬퍼를 사용합니다.

타입 매개변수​

TVariables​

TVariables = unknown

액션 함수에 전달될 변수의 타입입니다

매개변수​

options​

CreateOptimisticActionsOptions&lt;TVariables>

낙관적 액션의 구성 옵션입니다

반환값​

TVariables 타입의 변수를 받아 Transaction을 반환하는 함수입니다

(variables): Transaction;

매개변수​

variables​

TVariables

반환값​

Transaction

예제​

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 }),
    })
    const result = await response.json()

    // IMPORTANT: Ensure server writes have synced back before returning
    // This ensures the optimistic state can be safely discarded
    await todoCollection.utils.refetch()

    return result
  }
})

// Usage
const transaction = addTodo('New Todo Item')