[TanStakQuery] 쿼리 비활성화/일시 중지(Disabling/Pausing Queries)

쿼리가 자동으로 실행되지 않도록 하려면 enabled = false 옵션을 사용하면 됩니다.

enabled = false:

• 쿼리에 캐시된 데이터가 있는 경우 쿼리는 status === 'success' 또는 isSuccess 상태로 초기화됩니다.
• 쿼리에 캐시된 데이터가 없는 경우 쿼리는 status === 'loading', fetchStatus === 'idle' 상태로 시작됩니다.
• 쿼리는 마운트 시 자동으로 fetch하지 않습니다.
• 쿼리는 백그라운드에서 자동으로 refetch하지 않습니다.
• 쿼리는 일반적으로 쿼리를 refetch하는 쿼리 클라이언트 invalidateQueries, refetchQueries 호출을 무시합니다.
• useQuery에서 반환된 refetch를 사용하여 쿼리를 수동으로 트리거하여 fetch할 수 있습니다.

function Todos() {
  const { isInitialLoading, 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>
      ) : isInitialLoading ? (
        <span>Loading...</span>
      ) : (
        <span>Not ready ...</span>
      )}

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

쿼리를 영구적으로 비활성화하면 TanStack Query가 제공하는 많은 훌륭한 기능(background refetches 같은)을 사용할 수 없게 되며, 이는 관용적인 방식도 아닙니다. 선언적 접근 방식(쿼리가 실행되어야 하는 종속성을 정의)에서 명령형 모드(여기를 클릭할 때마다 fetch하기)로 전환됩니다. 또한 refetch로 파라미터들을 전달할 수 없습니다. 종종 초기 fetch를 지연시키는 지연 쿼리(lazy query)가 필요한 경우가 있습니다:

지연 쿼리(Lazy Queries)

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

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>
  )
}

isInitialLoading

loading은 아직 데이터가 없다는 것을 의미하므로 지연 쿼리는 처음부터 status: 'loading' 상태가 됩니다. 이것은 기술적으로는 맞지만, 현재 데이터를 fetching 중이지 않기 때문에(쿼리가 활성화되지 않았기 때문에) 이 플래그를 사용하여 로딩 중인 스피너를 표시할 수 없습니다.

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

isLoading && isFetching

여기서 계산되는 파생 플래그이므로 쿼리가 현재 처음으로 불러오는 경우에만 true가 됩니다.

Reference

• Disabling/Pausing Queries | TanStack Query Docs