Query Options

queryKey와 queryFn을 여러 곳에서 공유하면서도 서로 가까이 위치하도록 하는 가장 좋은 방법 중 하나는 queryOptions 헬퍼를 사용하는 것입니다. 런타임에서는 이 헬퍼가 전달된 값을 그대로 반환하지만, 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);

무한 쿼리의 경우에는 별도의 infiniteQueryOptions 헬퍼를 사용할 수 있습니다.

Query Functions Network Mode