2. Queries - 기본사항

기본사항

쿼리는 기본적으로 유니크한 키(Unique Key)로 구분되며 프로미스(Promise) 기반 메서드 (GET, POST 등)로 서버에서 데이터를 가져올 수 있습니다.

서버의 데이터를 수정해야 하는 경우는 Mutations 을 사용하는 것이 적절합니다.

컴포넌트나 커스텀 훅에서 쿼리를 구독하려면 다음과 같이 useQuery 를 호출해야 합니다.

 import { useQuery } from 'react-query'
 
 function App() {
   const info = useQuery('todos', fetchTodoList)
 }

여기서 유니크한 키(Unique Key) 는 Application 전체에서 쿼리를 다시 가져오고(refetching), 캐싱(caching)하고, 공유(sharing)하기 위해 내부적으로 사용됩니다.

useQuery 에서 반환 된 쿼리 결과엔 템플릿 및 기타 데이터 사용에 필요한 모든 정보가 포함됩니다.

const result = useQuery('todos', fetchTodoList);

result 객체엔 생산성을 높이기 위해 알아야 할 몇 가지 중요한 상태가 포함되어 있습니다. 쿼리의 상태는 항상 아래의 상태들 중 하나가 됩니다.

• isLoading , status === 'loading' : 데이터 가져오는 중

• isError, status === 'error' : 에러 발생

• isSuccess , status === 'success' : 쿼링 성공

• isIdle, status === 'idle' : 쿼링 불가능

쿼리 키(Query Keys)

react-query 는 쿼리의 유니크한 키(Unique Key) 를 기반으로 쿼리 캐싱을 관리합니다.

쿼리 키(Query Keys)는 문자열이 될 수도 있고 문자 배열이 될 수 도 있습니다.

• 문자열 : 가장 단순한 형태의 쿼리 키는 문자열 입니다. 쿼리 키로 문자열이 전달되면 문자열을 사용하여 내부적으로 배열로 변환합니다.

// A list of todos
 useQuery('todos', ...) // queryKey === ['todos']

• 문자 배열 : 계층 구조의 데이터 / 파라미터가 있는 쿼리

 // An individual todo
 useQuery(['todo', 5], ...)
 // queryKey === ['todo', 5]
 
 // And individual todo in a "preview" format
 useQuery(['todo', 5, { preview: true }], ...)
 // queryKey === ['todo', 5, { preview: true }]
 
 // A list of todos that are "done"
 useQuery(['todos', { type: 'done' }], ...)
 // queryKey === ['todos', { type: 'done' }]