React Query의 특징

React Query에서 제공하는 것

<aside> 📦 - 캐싱

</aside>

어떻게 이러한 기능들을 사용하는지 핵심 개념 위주로 살펴보겠습니다.

1. QueryClient

*QueryClient는 쿼리와 쿼리 상태를 관리하는 메소드들을 포함한 객체입니다. 이를 context를 통해 앱의 상단에 위치시키면 사용 준비가 완료됩니다.*

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

2. Query Keys

*useQuery를 통해 컴포넌트 어디에서든 쿼리를 정의할수 있습니다. 이렇게 정의된 쿼리는 병렬적으로 서버에 요청됩니다.*

*query keys는 배열의 형태로 Promise 비동기 함수에 전달됩니다. 첫번째는 query string으로 유니크한 문자열로 제공해야 하며 이는 쿼리 데이터를 판별하는데 사용됩니다. 뒤에 살펴보겠지만 메소드에 query string을 제공하는 것만으로 많은 일들을 할 수 있습니다.*

배열의 형태로 제공되는 option은 옵션으로 제공이 가능하며 문자열, 객체 모두 가능합니다. 해당 인자를 받아 비동기 요청시 전달할 수 있습니다. (ex. api 요청 path 전달, ‘/user’)

여기서 todoList로 정의한 쿼리는 쿼리에 대한 모든 상태를 포함하는 객체입니다. isLoading, isError, data, error등이 있습니다.

*// 방법(1): useQuery(['query string', options], queryFn)*
const todoList = useQuery('todos', fetchTodoList)
const todoList = useQuery(['todos', options], fetchTodoList)

function fetchTodoList({ queryKey }){
  const [_key, options ] = queryKey
  return axios.post("url", {options})
}

*// 방법(2): 객체로 제공할 수도 있습니다.*
useQuery({
  queryKey: ['todo', 7],
  queryFn: fetchTodo,
  ...config,
})