React-Query

devAnderson·2022년 2월 3일

TIL

목록 보기

50/106

배경

상태는 크게 Client State와 Server State로 나눌 수 있다
Client State은 브라우저에 의해 나타내지는 최신 데이터로, ajax 요청에 의해 서버로부터 받아온 그 당시의 최신 snapshot을 나타낸다
Server State은 서버에서 관리되고 있는 데이터로, 항상 외부 요청으로 인해 변동이 되는 값들이다.
이런 두 간극으로 인해, 클라이언트는 항상 서버의 최신 데이터를 보여준다고 장담할 수가 없다 ( 언제든 바뀌어있을 것이기 떄문에 )
따라서, 서버에서 변경된 내용을 지속적으로 보여주기 위해서는 필요한 비동기 요청의 절차가 필요하다
이런 요청들을 해결하기 위해 만들어진 것이 react-query이다

중요 컨셉 ( Query의 4가지 상태 )

fresh : 데이터의 신선도를 뜻한다. staleTime 옵션을 설정하지 않는다면 default가 0이기 때문에, 바로 더러운(stale) 데이터가 된다. staleTime 옵션이 설정되어 있으면, 만약 컴포넌트가 재 마운트 되더라도 요청이 가지 않고 fresh로 등록된 값이 리턴된다.
fetching : 데이터 요청이 수행되고 있는 쿼리이다.
stale : 이미 패칭이 완료가 되어 신선도가 떨어진 상태이다. ( 즉, 서버에 데이터와 간격이 벌어저 있을 수 있다 ). 재 마운트가 될 경우, 일단은 캐싱되어 있는 stale 데이터를 보이면서 곧바로 재요청을 통해 새로운 데이터를 받아오는 것을 시도한다.
inactive : 언마운트되는 컴포넌트의 쿼리들은 inactive가 된다. 이 상태에서는 cacheTime동안 해당 쿼리결과가 유지되었다가 타임이 넘어가면 쿼리데이터는 GC에 의해 수거된다.
데이터의 신선도를 유지하기 위한 재 요청이 이루어지는 타이밍은

stale 상태가 된 쿼리 인스턴스가 새롭게 만들어질 때
window가 재 포커스 되었을 때
네트워크가 재 연결되었을 때
요청이 실패했을 경우 retry 횟수만큼 요청이 새로 날아갈때

각 형태

1. 전역 쿼리 context

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
const queryClient = new QueryClient()

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

데이터를 자식들에게 전파한다는 ContextAPI의 특성을 그대로 이어간다. 모든 컴포넌트는 useQuery를 이용하여 특정 쿼리들의 결과값을 조회할 수 있다. (key가 사용된다)

2. Queries

const { status, data, error, isFetching, isPreviousData } = useQuery(
  ['projects', page],
  () => fetchProjects(page),
  { keepPreviousData: true, staleTime: 5000 }
)

// 예외처리 -> reject쓰지말고 무조건 throw Error
const { error } = useQuery(['todos', todoId], async () => {
  if (somethingGoesWrong) {
    throw new Error('Oh no!')
  }

  return data
 })