queryOptions 헬퍼

플홀 메인페이지 정렬, 필터 구현 중.

sortType은 필수 파라미터이자 queryKey로 들어가는 반면,
(sortType과 setSortType을 RTK로 전역 상태 관리하여, ThumbnailArea와 SortArea가 분리되어 있지만 한 페이지에서 렌더링되며 정렬이 가능하다)

filterType은 optional 파라미터이고,
파라미터가 필요한 경우에
1. 두 가지 범주 중 하나 선택 -> 기본값으로 요청 전송
2. 범주에 해당하는 구체적 옵션 선택 -> 옵션에 해당하는 요청 전송
이라는 부수적인 단계도 동반된다.

그래서

• api에 query로 요청을 어떻게 보낼 것인가
• TanstackQuery의 queryKey를 어떻게 없었다 있었다 하게 만들 것인가

하는 고민거리가 생겼다.

optional queryKey TanstackQuery로 구글링해본 결과
탠스택쿼리 공식문서에서 optioanl query helper라는 게 나왔는데 아리까리하다.

---

queryOptions 헬퍼란?

Tanstack Query에서 쿼리의 키와 함수를 여러 곳에서 재사용하면서도
한 곳에 관리할 수 있게 해주는 유틸리티.
https://tanstack.com/query/latest/docs/framework/react/guides/query-options

👼 역할

• 코드 재사용성 향상 : 쿼리 설정(queryKey, queryFn, staleTime 등)을
  한 곳에서 정의하고 여러 곳에서 사용할 수 있다.
• 타입스크립트 지원 : 타입 추론과 타입 안전성을 제공.

🧊 사용 예시

1.

🖥️ typescript

// 이렇게 한 번 정의하고
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)

2. 컴포넌트별 옵션 재정의
특정 컴포넌트에서 쿼리 옵션의 일부를 재정의할 수도 있다.
특히 select 함수를 사용해 데이터를 변환하는 것이 일반적이다.

🖥️typescript

const query = useQuery({
  ...groupOptions(1),
  select: (data) => data.groupName,
  // 여기서는 전체 데이터 대신 groupName만 선택
})

➡️ 이렇게 하면 쿼리 로직을 중앙화하면서도 필요에 따라 유연하게 조정할 수 있다. 무한 쿼리(Infinite Queries)를 위해서는 infiniteQueryOptions 헬퍼가 별도로 제공된다.

---