useMutationState

function useMutationState<TResult, TMutation>(options, queryClient?): TResult[];

정의 위치: preact-query/src/useMutationState.ts:157

useMutationState는 MutationCache의 모든 뮤테이션에 접근할 수 있게 해주는 훅입니다. 다음을 전달할 수 있습니다 뮤테이션의 범위를 좁히는 filters(MutationFilters)와 뮤테이션을 변환하는 select 상태.

타입 매개변수

TResult

TResult = MutationState<unknown, Error, unknown, unknown>

TMutation

TMutation extends Mutation<any, any, any, any> = MutationTypeFromResult<TResult>

매개변수

옵션

MutationStateOptions<TResult, TMutation> = {}

일치하는 뮤테이션의 범위를 좁히는 filters와, 해당 항목을 변환하는 선택적 select입니다 뮤테이션 상태입니다.

queryClient?

QueryClient

사용자 지정 QueryClient를 사용하려면 이를 사용합니다. 그렇지 않으면 가장 가까운 컨텍스트의 항목이 사용됩니다 사용됩니다.

반환값

TResult[]

일치하는 각 뮤테이션에 대해 select가 반환하는 값으로 구성된 Array입니다.

예시

실행 중인 모든 뮤테이션의 모든 변수를 가져옵니다:

import { useMutationState } from '@tanstack/preact-query'

function PendingPosts() {
  const pendingVariables = useMutationState({
    filters: { status: 'pending' },
    select: (mutation) => mutation.state.variables,
  })

  return <>{pendingVariables.length} posts saving...</>
}

mutationKey를 통해 특정 뮤테이션의 모든 데이터를 가져옵니다:

import { useMutation, useMutationState } from '@tanstack/preact-query'

const mutationKey = ['posts']

function Posts() {
  // Some mutation that we want to get the state for
  const mutation = useMutation({
    mutationKey,
    mutationFn: createPosts,
  })

  const savedPosts = useMutationState({
    // this mutation key needs to match the mutation key of the given mutation (see above)
    filters: { mutationKey, status: 'success' },
    select: (mutation) => mutation.state.data,
  })

  return (
    <button onClick={() => mutation.mutate(['New Post'])}>
      Create post ({savedPosts.length} saved so far)
    </button>
  )
}

mutationKey를 통해 최신 뮤테이션 데이터에 접근합니다. mutate를 호출할 때마다 다음에 새 항목이 추가됩니다 gcTime밀리초 동안 뮤테이션 캐시 — useMutationState가 반환하는 마지막 항목을 확인하여 가장 최근 호출:

import { useMutationState } from '@tanstack/preact-query'

function LatestPost() {
  const savedPosts = useMutationState({
    filters: { mutationKey: ['posts'], status: 'success' },
    select: (mutation) => mutation.state.data,
  })

  const latestSavedPost = savedPosts[savedPosts.length - 1]

  return <>{latestSavedPost ? 'Saved' : 'Nothing saved yet'}</>
}