🔥 쿼리 옵션
200자
3분
쿼리 키와 쿼리 함수를 여러 곳에서 공유하면서도 서로 가까이 배치하는 가장 좋은 방법 중 하나는 queryOptions 도우미를 사용하는 것입니다. 실행 시에 이 도우미는 여러분이 전달한 내용을 그대로 반환하지만, TypeScript와 함께 사용할 때 많은 장점을 제공합니다. 한 곳에서 쿼리에 대한 모든 가능한 옵션을 정의할 수 있으며, 모든 옵션에 대해 타입 추론과 타입 안전성을 얻을 수 있습니다.
typescript
import { queryOptions } from '@tanstack/react-query'
function groupOptions(id: number) {
return queryOptions({
queryKey: ['groups', id],
queryFn: () => fetchGroups(id),
staleTime: 5 * 1000,
})
}
// 사용 예:
useQuery(groupOptions(1))
useSuspenseQuery(groupOptions(5))
useQueries({
queries: [groupOptions(1), groupOptions(2)],
})
queryClient.prefetchQuery(groupOptions(23))
queryClient.setQueryData(groupOptions(42).queryKey, newGroups)
typescript
import { queryOptions } from '@tanstack/react-query'
function groupOptions(id: number) {
return queryOptions({
queryKey: ['groups', id],
queryFn: () => fetchGroups(id),
staleTime: 5 * 1000,
})
}
// 사용 예:
useQuery(groupOptions(1))
useSuspenseQuery(groupOptions(5))
useQueries({
queries: [groupOptions(1), groupOptions(2)],
})
queryClient.prefetchQuery(groupOptions(23))
queryClient.setQueryData(groupOptions(42).queryKey, newGroups)
이 코드는 groupOptions 함수를 정의하고 있습니다. 이 함수는 쿼리 옵션을 생성하며, 다양한 쿼리 관련 함수에서 사용할 수 있습니다. 함수는 ID를 인자로 받아 해당 ID에 대한 그룹을 가져오는 쿼리를 설정합니다.
useQuery, useSuspenseQuery, useQueries와 같은 훅에서 이 옵션을 사용할 수 있으며, queryClient의 메서드에서도 활용할 수 있습니다. 이렇게 하면 쿼리 설정을 한 곳에서 관리하면서 여러 곳에서 일관되게 사용할 수 있습니다.
무한 쿼리의 경우, 별도의 infiniteQueryOptions 도우미를 사용할 수 있습니다. 이 도우미는 무한 스크롤과 같은 특수한 쿼리 상황에 맞춰 설계되었습니다.
이러한 접근 방식은 코드의 재사용성을 높이고, 타입 안전성을 제공하며, 쿼리 관련 로직을 중앙화하여 관리할 수 있게 해줍니다. 결과적으로 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있게 됩니다.
YouTube 영상
