[React] React-query

React-query

API 호출을 통해

서버 데이터를 가져오고

캐싱

값 업데이트(자동)

에러 핸들링

 

read → useQuery

create/update/delete → useMutation

 

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

const queryClient = new QueryClient()

return (
  <QueryCLientProvider client={queryClient}>
    <APP />
    <ReactQueryDevTools />
  </QueryClientProvider>
)

QueryClient

: query, mutation 관리, 캐싱, 데이터를 효율적으로 가져오고 업데이트하는데 사용

ReactQueryDevTools

: 개발할 때만 사용(=콘솔)

 

 

useQuery

첫 번째 인자 문자열 혹은 배열, 두 번째 인자 api 호출 함수, 세 번째 인자 옵션 객체

useQuery('uniqueKey', api 호출 함수, {옵션 객체})

// 객체로 감싸서 전달
useQuery({
  queryKey: [keyword],
  queryFn: () => fetcher(keyword),
  //캐시 시간 지정해주는 옵션
  staleTime: 1800000,
  //웹 페이지 포커싱 시 리페치 여부
  refetchOnWindowFocus: true
  // 기본값
  placeholderData
})

 

data, isSuccess, isError, isLoading 등 다양한 값을 객체로 받아 사용 

const { data, isSuccess, isError, isLoading } = useQuery(...)

 

useQueries

기존에 병렬 fetching(둘 이상의 API 동시에 요청)이 필요한 경우 Promise.all 사용

const [result1, result2, result3, ...] = Promise.all([promise1, promise2, promise3, ... ])

 

React-query에서는 useQueries를 사용해주면 됨

useQueries(
  users.map(user => {
    return {
      queryKey: ['user', user.id],
      queryFn: () => fetchUserById(user.id),
    }
  })
)

// 객체로 감싸서 전달
useQueries({
  queries: queryKeys.map((key) => {
    return {
      queryKey: [key],
      queryFn: () => fetcher(key),
      staleTime: 1000,
      refetchOnWindowFocus: true,
      placeholderData
    }
  })
})

 

 

 

 

2023.04.20

코드스테이츠 리액트쿼리 특강