공식문서 : https://tanstack.com/query/v4/docs/guides/disabling-queries

Disabling/Pausing Queries

쿼리가 자동으로 실행되지 않게 하려면, enabled = false 옵션을 사용할 수 있다.

enabled이 false일때 :

• 쿼리에 캐시된 데이터가 있는 경우
  • 쿼리는 status === 'success' 또는 isSuccess state에서 초기화된다.
• 쿼리에 캐시된 데이터가 없는 경우
  • 쿼리는 status === 'loading' 및 fetchStatus === 'idle'에서 시작한다.
• 쿼리는 mount시 자동으로 fetch하지 않는다.
• 쿼리는 백그라운드에서 자동으로 refetch하지 않는다.
• 쿼리는 일반적으로 query refetching하는 query client invalidateQueries와 refetchQueries 호출을 무시한다.
• useQuery에서 반환된 refetch를 사용하여 쿼리를 fetch하기위해 수동으로 트리거할 수 있다.

function Todos() {
  const {
    isLoading,
    isError,
    data,
    error,
    refetch,
    isFetching
  } = useQuery(['todos'], 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 && !isFetching) ? (
           <span>Not ready ...</span>
         ) : (
           <span>Loading...</span>
         )
        )
      )}

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

쿼리를 영구적으로 비활성화하는것은 react-query가 제공하는 많은 훌륭한 기능(백그라운드 refetch와 같은)들을 사용하지 않기로 택하는것이며, 관용적인 방법도 아니다. 선언적 접근 (쿼리가 실행되야할때의 종속적 정의)에서 명령형 모드(여기를 클릭할때마다 fetch)로 이동한다. 또한 refetch에 파라미터를 전달할 수도 없다. 종종, 초기 fetch를 지연시키는 lazy query만을 원할 수 있다.

Lazy Queries

enabled 옵션은 쿼리를 영구적으로 비활성화시키는데 사용할 수 있을 뿐만 아니라 나중에 활성화/비활성화하는데에도 사용할 수 있다. 좋은 예시로 유저가 filter 값을 입력한 후에만 첫번째 요청만 실행하려는 filter form을 들 수 있다. :

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

  const { data } = useQuery(
    ['todos', filter],
    () => 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>
  )
}