Query Options

queryKey와 queryFn을 여러 곳에서 공유하면서도 관련 코드를 한 곳에 모아 관리하는 가장 좋은 방법 중 하나는 queryOptions helper를 사용하는 것이다. 런타임 시 이 헬퍼는 전달받은 옵션 객체를 그대로 반환할 뿐이지만, TypeScript와 함께 사용할 때 수많은 이점을 제공한다. 쿼리에 필요한 모든 옵션을 한 곳에서 정의할 수 있으며, 이를 통해 type inference(타입 추론)과 type safety(타입 안정성)을 완벽하게 보장받을 수 있다.

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)

 

무한 쿼리(Infinite Queries)를 위해서는 별도의 infiniteQueryOptions helper가 제공된다.

 

컴포넌트 단에서 일부 옵션을 재정의할 수도 있다. 매우 흔하고 유용한 패턴은 각 컴포넌트의 필요에 맞게 select 함수를 추가하는 것이다.

// 타입 추론은 여전히 동작한다.
// query.data의 타입은 queryFn의 반환 타입이 아니라 select 함수의 반환 타입이 된다.
const query = useQuery({
  ...groupOptions(1),
  select: (data) => data.groupName,
})

 

https://tanstack.com/query/latest/docs/framework/react/guides/query-options

Query Options | TanStack Query React Docs