[번역] Disabling/Pausing Queries

 

Disabling/Pausing Queries | TanStack Query Docs

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

enabled가 false일 때:

- 쿼리에 캐시된 데이터가 있는 경우 쿼리는 status === sucess 또는 isSuccess 상태로 초기화됩니다. 

- 쿼리는 마운트 시 자동으로 fetch하지 않습니다. 

- 쿼리는 백그라운드에서 자동으로 refetch하지 않습니다. 

- 이 쿼리는 쿼리 클라이언트가 일반적으로 쿼리를 다시 가져오는 결과를 초래할 수 있는 invalidateQueries 및 refetchQueries 호출을 무시합니다. 

- useQuery에서 반환된 refetch 속성을 사용하여 쿼리를 수동으로 트리거하여 가져올 수 있습니다. 

 

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가 제공하는 많은 훌륭한 기능(예: 백그라운드 refetch)을 사용할 수 없게되며, 이는 관용적인 방식도 아닙니다. 선언적 접근 방식(쿼리가 실행되어야 하는 종속성 정의)에서 명령형 모드(여기를 클릭할 때마다 fetch)로 전환됩니다. 또한 다시 가져올 매개변수를 전달할 수 없습니다. 종종 초기 fetch를 지연시키는 지연 쿼리가 필요한 경우가 있습니다.

 

Lazy Queries

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

 

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 플래그를 사용할 수 있습니다. 이 플래그는 다음에서 계산되는 파생 플래그입니다: 

 

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