리액트 쿼리 Queries

쿼리 기본 사항

쿼리는 고유 키에 연결된 비동기 데이터 소스에 대한 선언적 종속성입니다. 쿼리는 서버에서 데이터를 가져오기 위해 모든 프로미스 기반 메서드(GET 및 POST 메서드 포함)와 함께 사용할 수 있습니다. 메서드가 서버의 데이터를 수정하는 경우 대신 변형을 사용하는 것이 좋습니다.

컴포넌트 또는 사용자 정의 후크에서 쿼리를 구독하려면 최소한 다음을 사용하여 사용 쿼리 후크를 호출하세요:

• 쿼리의 고유 키
• 데이터를 처리하는 프로미스를 반환하는 함수
  • 데이터를 확인하거나
  • 오류를 던지는 함수

import { useQuery } from 'react-query'

function App() {
  const info = useQuery('todos', fetchTodoList)
}

제공한 고유 키는 애플리케이션 전체에서 쿼리를 다시 가져오고, 캐싱하고, 공유하기 위해 내부적으로 사용됩니다.

useQuery가 반환하는 쿼리 결과에는 템플릿 및 기타 데이터 사용에 필요한 쿼리에 대한 모든 정보가 포함되어 있습니다:

const result = useQuery('todos', fetchTodoList)

결과 객체에는 생산성을 높이기 위해 알아야 할 몇 가지 매우 중요한 상태가 포함되어 있습니다. 쿼리는 주어진 순간에 다음 상태 중 하나에만 있을 수 있습니다:

• isLoading or status === 'loading' - 쿼리에 데이터가 없으며 현재 데이터를 가져오는 중입니다.

• isError or status === 'error' - 쿼리에서 오류가 발생했습니다.

• isSuccess or status === 'success' - 쿼리가 성공했으며 데이터를 사용할 수 있습니다.

• isIdle or status === 'idle' - 쿼리가 현재 비활성화되어 있습니다(이에 대해서는 잠시 후에 자세히 설명합니다).

이러한 기본 상태 외에도 쿼리 상태에 따라 더 많은 정보를 사용할 수 있습니다:

• error - 쿼리가 isError state인 경우 error 속성을 통해 error를 사용할 수 있습니다.

• data - 쿼리가 success state인 경우 데이터 속성을 통해 data를 사용할 수 있습니다.

• isFetching - 어떤 상태에서든 쿼리가 백그라운드 리페칭을 포함하여 언제든지 페칭 중이면 isFetching이 true가 됩니다.

• 대부분의 쿼리에서는 일반적으로 isLoading state를 확인한 다음 isError state를 확인한 다음 마지막으로 데이터를 사용할 수 있다고 가정하고 성공 상태를 렌더링하는 것으로 충분합니다:

function Todos() {
  const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)

  if (isLoading) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  // We can assume by this point that `isSuccess === true`
  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

boolean이 익숙하지 않다면 언제든지 state를 사용할 수 있습니다:

function Todos() {
  const { status, data, error } = useQuery('todos', fetchTodoList)

  if (status === 'loading') {
    return <span>Loading...</span>
  }

  if (status === 'error') {
    return <span>Error: {error.message}</span>
  }

  // also status === 'success', but "else" logic works, too
  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}