Skip to content

[Init]: Tanstack Query 기본 세팅 #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shinjigu merged 8 commits into from
Jul 5, 2025
Merged

[Init]: Tanstack Query 기본 세팅 #18

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
adbfe43
init: Tanstack Query 기본 세팅
shinjigu Jun 29, 2025
9acd6b7
refactor: queryClient 설정 별도 파일로 분리
shinjigu Jul 3, 2025
9d5c807
chore: 불필요한 .gitkeep 파일 삭제
shinjigu Jul 3, 2025
d1af47b
Merge branch 'develop' into init/#16/tanstackQuery
jisooooooooooo Jul 4, 2025
6262a4e
Merge branch 'develop' into init/#16/tanstackQuery
shinjigu Jul 5, 2025
6032c97
fix: React Query 의존성 패키지 추가
shinjigu Jul 5, 2025
eadd9d3
fix: ESLint 자동 포맷팅 적용
shinjigu Jul 5, 2025
4636dd6
Merge remote-tracking branch 'origin/develop' into init/#16/tanstackQ…
shinjigu Jul 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@
"svgr": "npx @svgr/cli -d src/assets/svg --ignore-existing --typescript --no-dimensions public/svg"
},
"dependencies": {
"@tanstack/react-query": "^5.81.5",
"axios": "^1.10.0",
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
"devDependencies": {
"@eslint/js": "^9.29.0",
"@tanstack/react-query-devtools": "^5.81.5",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@vanilla-extract/css": "^1.17.4",
Expand All @@ -33,9 +35,9 @@
"globals": "^16.2.0",
"prettier": "^3.6.0",
"typescript": "~5.8.3",

"typescript-eslint": "^8.34.1",
"vite": "^6.3.5",
"vite-plugin-svgr": "^4.3.0"
}
},
"packageManager": "pnpm@10.12.4+sha512.5ea8b0deed94ed68691c9bad4c955492705c5eeb8a87ef86bc62c74a26b037b08ff9570f108b2e4dbd1dd1a9186fea925e527f141c648e85af45631074680184"
}
38 changes: 38 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

29 changes: 25 additions & 4 deletions src/main.tsx
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@jisooooooooooo jisooooooooooo Jun 30, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor Author

@shinjigu shinjigu Jul 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Original file line number Diff line number Diff line change
@@ -1,9 +1,30 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

createRoot(document.getElementById('root')!).render(
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retryOnMount: true,
Copy link
Copy Markdown
Collaborator

@jisooooooooooo jisooooooooooo Jun 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Copy Markdown
Contributor Author

@shinjigu shinjigu Jul 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jisooooooooooo 수정하겠습니다 !!

refetchOnReconnect: false,
retry: 2,
},
mutations: {
retry: 1,
},
},
});

createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>,
)
<QueryClientProvider client={queryClient}>
<App />
{import.meta.env.DEV && (
<ReactQueryDevtools initialIsOpen={false} />
)}
</QueryClientProvider>
</StrictMode>
);