queryOptions
TanStack Query의 메인테이너 Tkdodo의 TanStack Query v5의 queryOptions 설명 영상 에서 이 interface가 필요한 이유를 잘 설명되어 있습니다. TanStack Query v4에서도 queryOptions를 활용할 수 있습니다.
- queryKey와 queryFn을 묶어서 처리해 queryKey관리가 쉬워집니다.
- 불필요한 커스텀 쿼리 훅을 제거할 수 있습니다. TanStack Query v4의
useQuery
,useQueries
, Suspensive React Query의useSuspenseQuery
,useSuspenseQueries
,SuspenseQuery
에 모두 직접 사용할 수 있기 때문입니다. - TanStack Query v5에는 이미 queryOptions가 제공되고 있기 때문에 TanStack Query v4에서 TanStack Query v5로의 마이그레이션이 쉬워집니다.
import { queryOptions, useSuspenseQuery, useSuspenseQueries, SuspenseQuery } from '@suspensive/react-query'
import { useQuery, useQueries, useQueryClient } from '@tanstack/react-query'
const postQueryOptions = (postId) =>
queryOptions({
queryKey: ['posts', postId] as const,
queryFn: ({
queryKey: [, postId], // queryKey를 활용할 수 있습니다.
}) => fetch(`https://example.com/posts/${postId}`),
})
// 커스텀 쿼리 훅을 만들 필요가 없습니다.
// useQuery, useQueries, useSuspenseQuery, useSuspenseQueries, SuspenseQuery에서 직접 queryOptions를 활용할 수 있습니다.
const post1Query = useQuery(postQueryOptions(1))
const { data: post1 } = useSuspenseQuery({
...postQueryOptions(1),
refetchInterval: 2000, // 사용처에서 확장성을 명확히 표현됩니다.
})
const [post1Query, post2Query] = useQueries({
queries: [postQueryOptions(1), { ...postQueryOptions(2), refetchInterval: 2000 }],
})
const [{ data: post1 }, { data: post2 }] = useSuspenseQueries({
queries: [postQueryOptions(1), { ...postQueryOptions(2), refetchInterval: 2000 }],
})
const Example = () => <SuspenseQuery {...postQueryOptions(1)}>{({ data: post1 }) => <>{post1.text}</>}</SuspenseQuery>
// queryClient의 메소드에서 queryKey와 queryFn을 쉽게 활용할 수 있습니다.
const queryClient = useQueryClient()
queryClient.refetchQueries(postQueryOptions(1))
queryClient.prefetchQuery(postQueryOptions(1))
queryClient.invalidateQueries(postQueryOptions(1))
queryClient.fetchQuery(postQueryOptions(1))
queryClient.resetQueries(postQueryOptions(1))
queryClient.cancelQueries(postQueryOptions(1))
버전 기록
Version | Changes |
---|---|
v3.0.0 | networkMode 는 제거되었습니다. 자세한 내용은 v3로 마이그레이션하기 문서를 참고하세요. |
수정된 날짜: