createMutationController

function createMutationController<TData, TError, TVariables, TOnMutateResult>(
   host,
   options,
queryClient?): MutationResultAccessor<TData, TError, TVariables, TOnMutateResult>;

정의 위치: packages/lit-query/src/createMutationController.ts:340

호스트가 뮤테이션을 구독하도록 하는 Lit 반응형 컨트롤러를 생성합니다.

반환된 접근자는 호출할 수 있으며 current, mutate도 노출합니다, mutateAsync, reset 및 destroy. options가 함수인 경우에는 호스트 업데이트 중 다시 읽으므로 뮤테이션 옵션이 반응형 호스트를 따를 수 있습니다 상태.

queryClient를 생략하면 컨트롤러는 다음에서 클라이언트를 확인합니다 연결된 가장 가까운 QueryClientProvider.

타입 매개변수

TData

TData = unknown

TError

TError = Error

TVariables

TVariables = void

TOnMutateResult

TOnMutateResult = unknown

매개변수

host

ReactiveControllerHost

뮤테이션을 소유하는 Lit 반응형 컨트롤러 호스트 구독.

옵션

Accessor<CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>>

뮤테이션 observer 옵션 또는 옵션을 반환하는 getter입니다.

queryClient?

QueryClient

선택적인 명시적 query client입니다. 다음을 위해 이를 제공하십시오 Lit 컨텍스트에서 클라이언트를 확인하면 안 되는 컨트롤러입니다.

반환값

MutationResultAccessor<TData, TError, TVariables, TOnMutateResult>

뮤테이션 헬퍼가 포함된 최신 뮤테이션 결과의 접근자 메서드.

예시

import { LitElement, html } from 'lit'
import { createMutationController } from '@tanstack/lit-query'

class AddTodoForm extends LitElement {
  private readonly addTodo = createMutationController(this, {
    mutationFn: (title: string) =>
      fetch('/api/todos', { method: 'POST', body: JSON.stringify({ title }) }),
  })

  render() {
    const mutation = this.addTodo()

    return html`
      <button ?disabled=${mutation.isPending} @click=${() => this.addTodo.mutate('Ship docs')}>
        Add todo
      </button>
    `
  }
}