@tanstack/react-query 5 업데이트, 변경사항

후크및 함수의 사용방식이 하나로 통합되었다.

typescript

- useQuery(key, fn, options) // 이렇게도 쓸수 있었다면
+ useQuery({ queryKey, queryFn, ...options }) // 이제는 이렇게만 쓸수 있다
- useInfiniteQuery(key, fn, options)
+ useInfiniteQuery({ queryKey, queryFn, ...options })
- useMutation(fn, options)
+ useMutation({ mutationFn, ...options })
- useIsFetching(key, filters)
+ useIsFetching({ queryKey, ...filters })
- useIsMutating(key, filters)
+ useIsMutating({ mutationKey, ...filters })

- queryClient.isFetching(key, filters)
+ queryClient.isFetching({ queryKey, ...filters })
- queryClient.ensureQueryData(key, filters)
+ queryClient.ensureQueryData({ queryKey, ...filters })
- queryClient.getQueriesData(key, filters)
+ queryClient.getQueriesData({ queryKey, ...filters })
- queryClient.setQueriesData(key, updater, filters, options)
+ queryClient.setQueriesData({ queryKey, ...filters }, updater, options)
- queryClient.removeQueries(key, filters)
+ queryClient.removeQueries({ queryKey, ...filters })
- queryClient.resetQueries(key, filters, options)
+ queryClient.resetQueries({ queryKey, ...filters }, options)
- queryClient.cancelQueries(key, filters, options)
+ queryClient.cancelQueries({ queryKey, ...filters }, options)
- queryClient.invalidateQueries(key, filters, options)
+ queryClient.invalidateQueries({ queryKey, ...filters }, options)
- queryClient.refetchQueries(key, filters, options)
+ queryClient.refetchQueries({ queryKey, ...filters }, options)
- queryClient.fetchQuery(key, fn, options)
+ queryClient.fetchQuery({ queryKey, queryFn, ...options })
- queryClient.prefetchQuery(key, fn, options)
+ queryClient.prefetchQuery({ queryKey, queryFn, ...options })
- queryClient.fetchInfiniteQuery(key, fn, options)
+ queryClient.fetchInfiniteQuery({ queryKey, queryFn, ...options })
- queryClient.prefetchInfiniteQuery(key, fn, options)
+ queryClient.prefetchInfiniteQuery({ queryKey, queryFn, ...options })

- queryCache.find(key, filters)
+ queryCache.find({ queryKey, ...filters })
- queryCache.findAll(key, filters)
+ queryCache.findAll({ queryKey, ...filters })

queryClient.getQueryData 및 queryClient.getQueryState가 queryKey 인수 하나만 허용.

typescript

- queryClient.getQueryData(queryKey, filters)
+ queryClient.getQueryData(queryKey)
- queryClient.getQueryState(queryKey, filters)
+ queryClient.getQueryState(queryKey)

useQuery에서 콜백 제거 (onSuccess, onError, onSettled)
refetchInterval의 콜백에는 query만 전달

typescript

- refetchInterval: number | false | ((data: TData | undefined, query: Query) => number | false | undefined)
+ refetchInterval: number | false | ((query: Query) => number | false | undefined)

useQuery에 remove메소드 제거, queryClient.removeQueries로 동일한 기능 가능

typescript

const queryClient = useQueryClient();
 const query = useQuery({ queryKey, queryFn });
- query.remove()
+ queryClient.removeQueries({ queryKey })

typescript최소 버전은 4.7
useQuery에서 isDataEqual 제거, structuralSharing으로 동일한 기능 구현 가능

typescript

import { replaceEqualDeep } from '@tanstack/react-query'

- isDataEqual: (oldData, newData) => customCheck(oldData, newData)
+ structuralSharing: (oldData, newData) => customCheck(oldData, newData) ? oldData : replaceEqualDeep(oldData, newData)

custom logger 제거됨
지원되는 브라우저 변경

shell

Chrome >= 91
Firefox >= 90
Edge >= 91
Safari >= 15
iOS >= 15
opera >= 77

private이 TypeScript에서 ECMAScript 클래스 기능으로 변경됨. 진정한 의미의 privated이 되었으므로, 런타임 밖에서 접근할 수 없다.
cacheTime 에서 gcTime으로 변경

typescript

const MINUTE = 1000 * 60;

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
-      cacheTime: 10 * MINUTE,
+      gcTime: 10 * MINUTE,
    },
  },
})

useErrorBoundary옵션 이름 변경 throwOnError
에러 타입이 unknown에서 Error로 변경
generic에 에러 타입 지정 가능

typescript

useQuery<number, string>({
  queryKey: ['some-query'],
  queryFn: async () => {
    if (Math.random() > 0.5) {
      throw 'some error'
    }
    return 42
  },
})

keepPreviousData 는 placeholderData에 통합
custom context 는 제거됨, 대신 queryClient 인스턴스 사용

typescript

import { queryClient } from './my-client'

const { data } = useQuery(
  {
    queryKey: ['users', id],
    queryFn: () => fetch(...),
-   context: customContext
  },
+  queryClient,
)

refetchPage제거, 대신 maxPages (무한 쿼리에서)
새로운 dehydrate API (단순화), 기존의 dehydrateMutations 및 dehydrateQueries 옵션 제거됨, 같은 기능을 수행하려면 shouldDehydrateQuery또는 shouldDehydrateMutation를 사용해야하며, 모든 동작을 수행하지 않으려면 () => false
이제 useInfiniteQuery 무한 쿼리에 initialPageParam이 필요합니다.

typescript

useInfiniteQuery({
   queryKey,
-  queryFn: ({ pageParam = 0 }) => fetchSomething(pageParam),
+  queryFn: ({ pageParam }) => fetchSomething(pageParam),
+  initialPageParam: 0,
   getNextPageParam: (lastPage) => lastPage.next,
})

Manual mode에서 무한쿼리는 제거됨, 더이상 pageParams을 덮어써서 무한쿼리인것처럼 사용할 수 없다.
getNextPageParam 또는 getPreviousPageParam에 null을 반환해도 다음페이지가 없음을 확인함.
서버 retry기본값이 3에서 0으로 변경, React 18부터는 서스펜스(suspense)가 활성화된 쿼리도 서버에서 바로 실행될 수 있게 됐으므로 서버에서는 재시도를 하지 않도록 기본값이 변경됨.
status의 loading은 pending으로 변경
hasgQueryKey는 hashKey로 변경
React최소 버전은 18.0버전
QueryClientProvider에서 contextSharing제거
Hydration API 변경사항, Hydrate가 HydrationBoundary로 변경되고 useHydrate훅은 제거됨. HydrationBoundary는 더이상 뮤테이션을 수행하지 않으므로, hydrate 뮤테이션을 수행하려면 hydrate API를 이용하거나, persistQueryClient 플러그인을 사용

typescript

- import { Hydrate } from '@tanstack/react-query'
+ import { HydrationBoundary } from '@tanstack/react-query'

- <Hydrate state={dehydratedState}>
+ <HydrationBoundary state={dehydratedState}>
  <App />
- </Hydrate>
+ </HydrationBoundary>