query-key-factory 대신 queryOptions를 사용하는 것에 대해서

[bbearcookie]

요약

query-key-factory 대신에 Tanstack-Query V5부터 내장된 queryOptions() 함수를 쓰는 건 어떨까요?

내용

useQuery 를 Hook으로 래핑하는 것을 지양하고, queryKey 와 queryFn 의 쌍을 객체로 관리하자는 아이디어를 #2 에서 논의했었는데요.
당시에 query-key-factory 라이브러리를 사용하기로 결정했었습니다!

그런데.. 이런 아이디어를 Tanstack-Query V5 부터는 queryOptions() 라는 함수로 제공하고 있었군요.. 😭😭 (typing-query-options)
따라서 추가적인 라이브러리를 사용하지 않아도 저희가 구상했던 아이디어를 이뤄낼 수 있을 것 같습니다..

아직 API와 관련한 작업은 많이 진행하진 않은 상태여서, 결정만 한다면 빠르게 마이그레이션 할 수 있을 것 같아서 논의를 올립니다!

장점

캐싱된 데이터를 수동으로 조작해야 하는 경우에 제네릭을 부여하지 않아도 자동으로 추론하게 돼요.

// 이거 대신
const data = queryClient.getQueryData<Post[]>(['posts, 'all'])

// 이렇게 사용 가능 (타입 제네릭 필요 없어짐)
const data = queryClient.getQueryData(postOptions.all().queryKey)

P.S.
Suspensive/react-query 의 아이디어가 이젠 Tanstack-Query 에도 들어온 만큼,
query-key-factory 와 유사한 아이디어도 정식으로 도입된 것 같네요..

변경 예시

기존

const postQuery = createQueryKeys('examplePost', {
  all: {
    queryKey: null,
    queryFn: postAPI.getAllPosts
  },
  detail: (postId: string) => ({
    queryKey: [postId],
    queryFn: () => postAPI.getDetailPost(postId)
  })
});

신규

export const postOptions = {
  all: () =>
    queryOptions({
      queryKey: ['groups', 'all'] as const,
      queryFn: postAPI.getAllPosts
    }),
  detail: (postId: string) =>
    queryOptions({
      queryKey: ['groups', 'detail', postId] as const,
      queryFn: () => postAPI.getDetailPost(postId)
    })
};

디렉토리 구조

기존

📂 core
    📂 api
        📂 functions: API 요청하는 함수들
        📂 mutationHooks: 공통화가 필요한 커스텀 useMutation 훅
        📂 queryHooks: 공통화가 필요한 커스텀 useQuery & useQueries 훅
        📂 queries: 기본적으로 매핑할 queryKey, queryFn 정보

신규 (단순 제안입니다!)

📂 core
    📂 api
        📂 functions: API 요청하는 함수들
        📂 mutations: 공통화가 필요한 커스텀 useMutation 훅
        📂 queries: 공통화가 필요한 커스텀 useQuery & useQueries 훅 (근데 거의 사용안될 것 같은..)
        📂 options: 기본적으로 매핑할 queryKey, queryFn, 그 외 옵션 정보

[nayeon-hub]

넵 좋습니다 react-query에서 제공하는 기능들을 적극 활용하면 좋을 것 같네요

[chasj0326]

오호 .. 보니까 저번에 제가 디스커젼에 남긴 방향처럼 모든 옵션을 일괄 처리해줄 수 있다는 점이 훨씬 좋은 것 같아요! (queryKey, quernFn, stale time 등등 모든 옵션을 한 곳에서 수정할 수 있음)
게다가 제공해주는 기능이니 .. 저는 적용하는 것이 좋다고 생각합니다!