query-key-factory 라이브러리 도입에 관해서

[bbearcookie]

query-key-factory 라이브러리를 이용해서 queryKey와 queryFn을 함께 관리해보는 것 어떨까요!?
이 라이브러리를 사용하면 queryKey와 queryFn의 매핑을 손쉽게 할 수 있어요!

라이브러리의 필요성

• 컴포넌트에서 useQuery 를 사용할 때 직접 queryKey, queryFn 을 적어줄 경우에는 API에 변동 사항이 발생할 때 대응이 유연하지 못해서 잘 구조화 및 공통화 하는 것이 필요해요.
• 그런데.. 공통 부분을 커스텀 훅으로 묶어내자니.. 몇 가지 어려움이 존재해요.
  • 각각의 훅의 이름을 명시적이면서도 길어지지 않게 네이밍 하는 것이 어려워요.
  • 대부분의 API 요청 Query에서 커스텀이 필요한 부분은 queryKey, queryFn 인 경우가 많은데, 커스텀을 위해서 훅을 만들기까지의 보일러 플레이트 과정이 번거로워요. (이름 짓기 -> 파일 생성 -> 제네릭 부여 -> useQuery 반환 ... 등등)

장점

• 그래서 query-key-factory 라이브러리를 사용하면 대부분의 queryKey 와 queryFn 의 매핑은 손쉽게 만들고, 간혹 API 요청과 함께 긴밀하게 엮여있는 작업이 필요하다면 그 부분은 유연하게 커스텀 훅으로 만드는 방법도 가능해져요.

사실 라이브러리를 사용하는 것 보다는 직접 유사한 구조로 구성해보면 어떨까 싶었는데..
몇 가지 삽질을 해본 결과 그냥 잘 나와있는 라이브러리를 이용하는게 더 편리할 것 같은 생각이 들었어요.
(타입 자동 추론을 유연하게 제공하면서 개발자가 객체의 인터페이스를 지키도록 만드는 게 생각보다 쉽지 않네요..)

사용한다면..

사용한다면 요런 느낌이 될 것 같아요!

매핑 정보 정의

@api/queries/posts.ts

import axios from 'axios';
import { createQueryKeys } from '@lukemorales/query-key-factory';

type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

export const posts = createQueryKeys('posts', {
  all: {
    queryKey: null,
    queryFn: async () => {
      const { data } = await axios.get<Post[]>('https://jsonplaceholder.typicode.com/posts');
      return data;
    },
  },
  detail: (postId: string) => ({
    queryKey: [postId],
    queryFn: async () => {
      const { data } = await axios.get<Post>(`https://jsonplaceholder.typicode.com/posts/${postId}`);
      return data;
    },
  }),
});

@api/queries/comments.ts

import axios from 'axios';
import { createQueryKeys } from '@lukemorales/query-key-factory';

type Comment = {
  postId: number;
  id: number;
  name: string;
  email: string;
  body: string;
};

export const comments = createQueryKeys('comments', {
  all: {
    queryKey: null,
    queryFn: async () => {
      const { data } = await axios.get<Comment[]>('https://jsonplaceholder.typicode.com/comments');
      return data;
    },
  },
  detail: (commentId: string) => ({
    queryKey: [commentId],
    queryFn: async () => {
      const { data } = await axios.get<Comment>(`https://jsonplaceholder.typicode.com/comments/${commentId}`);
      return data;
    },
  }),
});

@api/queries/index.ts

import { mergeQueryKeys } from '@lukemorales/query-key-factory';
import { comments } from './comments';
import { posts } from './posts';

export const queryKeys = mergeQueryKeys(comments, posts);

실제로 컴포넌트에서 사용하기

import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
import { queryKeys } from '@/api/queries';
import { posts } from '@/api/queries/posts';
import './App.css';

function App() {
  const { data: postList } = useQuery({ ...posts.all, retry: 2 });
  const { data: postDetail } = useQuery({ ...queryKeys.posts.detail('5'), retry: 0, refetchOnWindowFocus: false });
  const { data: commentDetail } = useSuspenseQuery({ ...queryKeys.comments.detail('3') });

  return <></>;
}

export default App;

물론 실제로 프로젝트에 도입할 땐 타입이나 API 함수같은 부분도 다른 레이어에서 정리하게 되겠지만 예시로 코드를 작성해봤어요.
공통으로 관리해야 할 부분은 잘 관리하면서도 옵션에 해당하는 부분은 자유자재로 활용할 수 있다는 점을 확인할 수 있어요!
원래 서드파티였다가 이번 v5 버전에 정식으로 도입된 useSuspenseQuery 에도 호환이 잘 되네요.

[chasj0326]

감사합니다 상훈님 ! 덕분에 query-key-factory 라이브러리를 공부하는 데에 많은 도움이 되었어요 : )
이 글에 영감을 받아서 제가 생각한 바가 있는데, 길어져서 따로 올렸습니다!
커스텀하는 것과 라이브러리를 사용하는 것의 장단점을 비교해보고, 혼합해서 쓰는 방식에 대한 생각을 적었습니다.

여기에 링크할게요

https://github.com/orgs/team-moabam/discussions/4#discussion-5761684