React Query v5 바뀐 점

https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#callbacks-on-usequery-and-queryobserver-have-been-removed

Migrating to TanStack Query v5 | TanStack Query Docs

https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose

 

Breaking React Query's API on purpose

useQuery의 콜백들이 사라짐.

 

onSuccess를 사용해 상태를 업데이트하면 실제 onSuccess의 콜백이 실행되기 전의 data와 업데이트하려는 상태값이 불일치하는 경우가 발생하거나  (불필요한 리렌더링 사이클이 추가되는 것은 덤), staleTime 등을 설정한 경우 콜백이 실행되지 않아 제대로 동기화가 이루어지지 않을 수도 있는 문제 등으로 인해 없앴다고 한다.

 

아래는 바뀐 주요 내용들에 대해 정리한 글

 

useQuery의 콜백 사라짐

onError

전역 수준에서 관리하기

 

onSuccess

1. 되도록 파생값을 사용

 

2. data 가공 시엔 선택자 옵션을 활용

 

3. data 동기화, 기타 경우들에 useEffect를 사용(의존성 배열에 data와 isSuccess )

 

useMutation은 useQuery에서 발생하는 문제의 위험이 적고 변이, optimistic updates 등에 필요하므로 살려놨다고 함.

 

기타

cacheTime 이름 변경

gcTime으로 바뀜

 

useErrorBoundary 이름 변경

throwOnError으로 바뀜

 

isLoading 이름 변경

isPending으로 바뀜

 

useInfiniteQuery 사용법 변경

이제 initialPageParam를 설정해줘야 함
getNextPageParam 필수로 변경
maxPages라는 캐싱할 페이지 수를 지정하는 옵션 생김

 

useQuery 새로운 옵션 추가

combine 옵션 추가

  combine: (results) => {
    return ({
      data: results.map(result => result.data),
      pending: results.some(result => result.isPending),
    })

 

useQuery의 에러 타입이 unknown으로 바뀌어 타입스크립트 쓰기에 좀 더 쉬워졌다고 함