쿼리 비활성화/일시 중지

쿼리가 자동으로 실행되지 않도록 하려면 언제든 enabled = false 옵션을 사용할 수 있습니다. enabled 옵션은 boolean을 반환하는 콜백도 허용합니다.

enabled가 false인 경우:

• 쿼리에 캐시된 데이터가 있으면 쿼리는 status === 'success' 또는 isSuccess 상태로 초기화됩니다.
• 쿼리에 캐시된 데이터가 없으면 쿼리는 status === 'pending' 및 fetchStatus === 'idle' 상태에서 시작됩니다.
• 쿼리는 마운트 시 자동으로 데이터를 가져오지 않습니다.
• 쿼리는 백그라운드에서 자동으로 다시 가져오지 않습니다.
• 쿼리는 일반적으로 쿼리를 다시 가져오게 하는 query client의 invalidateQueries 및 refetchQueries 호출을 무시합니다.
• useQuery에서 반환된 refetch를 사용해 쿼리가 가져오기를 수행하도록 수동으로 트리거할 수 있습니다. 하지만 skipToken에서는 작동하지 않습니다.

TypeScript 사용자는 enabled = false의 대안으로 skipToken을 사용하는 것을 선호할 수 있습니다.

function Todos() {
  const { isLoading, isError, data, error, refetch, isFetching } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
    enabled: false,
  })

  return (
    <div>
      <button onClick={() => refetch()}>Fetch Todos</button>

      {data ? (
        <ul>
          {data.map((todo) => (
            <li key={todo.id}>{todo.title}</li>
          ))}
        </ul>
      ) : isError ? (
        <span>Error: {error.message}</span>
      ) : isLoading ? (
        <span>Loading...</span>
      ) : (
        <span>Not ready ...</span>
      )}

      <div>{isFetching ? 'Fetching...' : null}</div>
    </div>
  )
}

쿼리를 영구적으로 비활성화하면 TanStack Query에서 제공하는 여러 훌륭한 기능(예: 백그라운드 다시 가져오기)을 사용하지 않게 되며, 관용적인 방식도 아닙니다. 이는 선언적 접근 방식(쿼리를 실행해야 하는 시점의 의존성 정의)에서 명령형 모드(여기를 클릭할 때마다 가져오기)로 전환하게 합니다. 또한 refetch에 매개변수를 전달할 수도 없습니다. 흔히 필요한 것은 초기 가져오기를 연기하는 지연 쿼리뿐입니다:

지연 쿼리

enabled 옵션은 쿼리를 영구적으로 비활성화하는 데 사용할 수 있을 뿐만 아니라 나중에 활성화하거나 비활성화하는 데도 사용할 수 있습니다. 사용자가 필터 값을 입력한 후에만 첫 번째 요청을 실행하려는 필터 폼이 좋은 예입니다:

function Todos() {
  const [filter, setFilter] = React.useState('')

  const { data } = useQuery({
    queryKey: ['todos', filter],
    queryFn: () => fetchTodos(filter),
    // ⬇️ disabled as long as the filter is empty
    enabled: !!filter,
  })

  return (
    <div>
      // 🚀 applying the filter will enable and execute the query
      <FiltersForm onApply={setFilter} />
      {data && <TodosTable data={data} />}
    </div>
  )
}

isLoading (이전 명칭: isInitialLoading)

지연 쿼리는 pending이 아직 데이터가 없음을 의미하므로 처음부터 status: 'pending' 상태입니다. 기술적으로는 사실이지만, 현재 데이터를 가져오고 있지 않으므로(쿼리가 _활성화_되지 않았으므로) 이 플래그를 로딩 스피너를 표시하는 데 사용할 수 없을 가능성이 높다는 의미이기도 합니다.

비활성화된 쿼리 또는 지연 쿼리를 사용하는 경우 대신 isLoading 플래그를 사용할 수 있습니다. 이 플래그는 다음 값에서 계산되는 파생 플래그입니다:

isPending && isFetching

따라서 쿼리를 현재 처음으로 가져오는 중인 경우에만 true가 됩니다.

skipToken을 사용한 타입 안전 쿼리 비활성화

TypeScript를 사용하는 경우 skipToken을 사용하여 쿼리를 비활성화할 수 있습니다. 조건에 따라 쿼리를 비활성화하면서도 쿼리의 타입 안전성을 유지하려는 경우에 유용합니다.

중요: useQuery의 refetch는 skipToken과 함께 작동하지 않습니다. skipToken을 사용하는 쿼리에서 refetch()를 호출하면 실행할 유효한 쿼리 함수가 없으므로 Missing queryFn 오류가 발생합니다. 쿼리를 수동으로 실행해야 한다면 refetch()가 올바르게 작동하도록 지원하는 enabled: false를 대신 사용하는 것을 고려하세요. 이 제한을 제외하면 skipToken은 enabled: false와 동일하게 작동합니다.

import { skipToken, useQuery } from '@tanstack/react-query'

function Todos() {
  const [filter, setFilter] = React.useState<string | undefined>()

  const { data } = useQuery({
    queryKey: ['todos', filter],
    // ⬇️ disabled as long as the filter is undefined or empty
    queryFn: filter ? () => fetchTodos(filter) : skipToken,
  })

  return (
    <div>
      // 🚀 applying the filter will enable and execute the query
      <FiltersForm onApply={setFilter} />
      {data && <TodosTable data={data} />}
    </div>
  )
}