[Init]: Tanstack Query 기본 세팅

[shinjigu]

💡 Summary

close #16

Tanstack Query 기본 세팅을 완료했습니다.

✅ Tasks

• @tanstack/react-query, @tanstack/react-query-devtools 패키지 설치
• queryClient 인스턴스 생성 및 기본 옵션 설정
• queryClient 설정을 src/common/util/queryClient.ts로 분리

👀 To Reviewer

• pull 받으시면 pnpm install 해주세요 !!

React Query 기본 설정

import { QueryClient } from "@tanstack/react-query";

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 1, // 1분간은 데이터를 fresh 상태로 간주하여 불필요한 재요청 방지
      refetchOnWindowFocus: false, // 창 포커스 시 자동으로 데이터 재요청하지 않도록 설정
      refetchOnMount: true, // 컴포넌트가 마운트될 때 stale 상태인 쿼리를 재요청하도록 설정
      refetchOnReconnect: false, // 네트워크 복구 시 자동으로 데이터를 재요청하지 않도록 설정
      retry: 2, // 쿼리 실패 시 최대 2번까지 재시도하도록 설정
    },
    mutations: {
      retry: 1, // mutation 실패 시 1번 재시도하도록 설정
    },
  },
});

staleTime & refetchOnWindowFocus 설정 이유
TanStack Query의 기본값(staleTime: 0ms, refetchOnWindowFocus: true)에서는 컴포넌트 마운트나 탭 전환 시마다 불필요한 API 요청이 발생하여 개발 효율성과 사용자 경험을 저하시킬 수 있다고 생각합니다.
이를 개선하기 위해 staleTime을 1분으로 설정하여 데이터 재사용을 허용하고, refetchOnWindowFocus를 false로 설정하여 의도치 않은 자동 재요청을 방지했습니다.

DevTools 설정

• 개발 환경에서만 React Query DevTools 표시되도록 조건부 렌더링 적용

📸 Screenshot

[jisooooooooooo]

고생하셨습니다~~~~🔥🔥

[jisooooooooooo]

p2) retryOnMount 옵션은 v4 기준으로 이제 사용되지 않는다고 해요!
retryOnMount 대신 refetchOnMount와 retry 옵션을 같이 사용하는 게 요즘 권장하는 방식이라고 합니당

https://tanstack.com/query/latest/docs/framework/react/guides/important-defaults#refetchonmount

[shinjigu]

@jisooooooooooo 수정하겠습니다 !!

[jisooooooooooo]

p3) queryClient 부분 별도 파일로 분리해도 좋아 보이네욤

[shinjigu]

@jisooooooooooo 그러면 queryClient 설정을 src/common/util/queryClient.ts로 분리하겠습니다 ! queryClient는 특정 도메인에 속하지 않고 전역적으로 사용되는 설정이므로 common 영역에 배치하고, 외부 라이브러리를 사용한 설정이지만 컴포넌트가 아닌 유틸리티 성격이므로 util 폴더에 위치시켰습니당

[Leeyoonji23]

충돌 해결하시고 머지 해주세요!

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.