[FEAT] query-key-factory 적용 #102
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughReact Query 쿼리 키를 중앙화하고 체크리스트 관련 훅을 해당 키로 마이그레이션했다. 패키지에 쿼리 키 팩토리와 React Query Devtools를 추가하고, 개발 환경에서만 Devtools를 렌더링하도록 레이아웃을 수정했다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant App as App (RootLayout)
participant RQ as React Query
participant Devtools as ReactQueryDevtools
Note over App: NODE_ENV === 'development'
App->>Devtools: 렌더링 (initialIsOpen=false)
App->>RQ: Provider 하위에서 앱 렌더링
Note over Devtools,RQ: Devtools는 개발 환경에서만 표시
sequenceDiagram
autonumber
participant Hook as useChecklistInfo
participant Keys as queries.checklist.info
participant RQ as React Query
participant API as getChecklistInfo()
Hook->>RQ: useQuery(Keys)
RQ->>API: queryFn 호출
API-->>RQ: ChecklistResponse
RQ-->>Hook: 데이터 반환
participant Mut as useSendRequiredItems
participant QC as QueryClient
Mut->>API: mutationFn 실행
API-->>Mut: 성공
Mut->>QC: invalidateQueries(queryKey = Keys.queryKey)
QC-->>RQ: 해당 쿼리 무효화/재패치 트리거
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing touches
🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Pre-merge checks❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @ujinsim, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
이 PR은 React Query의 queryKey 관리 방식을 개선하여 코드의 응집도를 높이고 쿼리 무효화 범위를 명확하게 하기 위한 변경사항을 포함합니다. query-key-factory 라이브러리를 도입하여 쿼리 키를 체계적으로 정의하고 관리하며, checklist 관련 쿼리에 우선적으로 적용되었습니다. 또한, 개발 편의성을 위해 React Query Devtools를 설치했습니다.
Highlights
- Query Key Factory 적용: React Query의
queryKey와queryFn의 응집도를 높이고 일관된 네이밍을 위해@lukemorales/query-key-factory라이브러리를 도입했습니다. - 체크리스트 쿼리 리팩토링:
checklist관련 쿼리 키를Query Key Factory기반으로 재구성하고,useChecklistInfo및useSendRequiredItems훅을 새로운queries.checklist.*API를 사용하도록 변경했습니다. - 쿼리 키 통합 관리:
src/queries/index.ts파일을 신규 생성하여mergeQueryKeys를 통해 모든 쿼리 키를 통합 관리할 수 있는 구조를 마련했습니다. - React Query Devtools 설치: 개발 환경에서 React Query의 상태를 시각적으로 확인할 수 있도록
@tanstack/react-query-devtools를 설치하고src/app/layout.tsx에 추가했습니다.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
|
Update: 2025년 09월 13일 17시 48분 56초 |
There was a problem hiding this comment.
Code Review
@lukemorales/query-key-factory를 도입하여 React Query의 키 관리를 개선하고, checklist 관련 쿼리를 리팩토링한 점이 좋습니다. 이를 통해 쿼리 키의 응집도를 높이고 일관성을 확보하여 유지보수성을 향상시켰습니다. 또한, 개발 환경에 ReactQueryDevtools를 추가하여 디버깅 편의성을 높인 점도 훌륭합니다.
한 가지 개선점을 제안합니다. useSendRequiredItems 훅에서 쿼리를 무효화할 때, info 쿼리 키만 특정하기보다는 checklist 도메인 전체를 무효화하는 것이 더 견고한 설계입니다. 이렇게 하면 향후 관련 쿼리가 추가되더라도 데이터 정합성을 유지하기 용이합니다. 자세한 내용은 관련 코드에 남긴 코멘트를 참고해주세요.
| qc.invalidateQueries({ | ||
| queryKey: queries.checklist.info.queryKey, | ||
| }); |
There was a problem hiding this comment.
queryKey를 queries.checklist.info.queryKey로 지정하여 무효화 범위를 너무 구체적으로 한정하고 있습니다. 기존 코드에서는 ['checklist']를 사용하여 checklist와 관련된 모든 쿼리를 무효화했습니다.
향후 checklist와 관련된 다른 쿼리(예: 상세 정보)가 추가될 경우, 현재 코드는 해당 쿼리들을 무효화하지 못해 데이터 불일치를 유발할 수 있습니다.
queries.checklist.all을 사용하여 checklist 도메인 전체를 무효화하는 것이 더 견고하고 유지보수하기 좋은 방법입니다. 이렇게 하면 기존 코드의 동작과도 일치하게 됩니다.
| qc.invalidateQueries({ | |
| queryKey: queries.checklist.info.queryKey, | |
| }); | |
| qc.invalidateQueries({ | |
| queryKey: queries.checklist.all, | |
| }); |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
src/app/layout.tsx (1)
5-5: React Query Devtools는 dynamic import + SSR 비활성화로 개발 환경에서만 로드하세요정적 import는 프로덕션 번들에 devtools 코드가 포함될 수 있고(트리셰이킹 실패 시), 서버 렌더링 경로에서 불필요한 모듈 해석이 발생할 수 있습니다. next/dynamic과 ssr: false를 사용해 개발에서만 지연 로드하는 쪽이 안전합니다.
아래처럼 변경을 제안합니다:
- import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; + import dynamic from 'next/dynamic'; + const ReactQueryDevtools = + process.env.NODE_ENV === 'development' + ? dynamic( + () => + import('@tanstack/react-query-devtools').then( + (m) => m.ReactQueryDevtools + ), + { ssr: false } + ) + : (() => null as any);- {process.env.NODE_ENV === 'development' && <ReactQueryDevtools initialIsOpen={false} />} + <ReactQueryDevtools initialIsOpen={false} />Also applies to: 72-72
package.json (1)
15-15: Devtools는 devDependencies로 이동 권장 + TanStack 패키지 버전 정렬 제안
- devtools는 개발 전용이므로 devDependencies로 옮기면 프로덕션 설치 용량을 줄일 수 있습니다.
- react-query(현재 ^5.84.0)와 devtools(^5.87.4)의 마이너 버전을 맞추면 타입/옵션 차이로 인한 미묘한 불일치를 줄일 수 있습니다. 둘 다 동일 마이너로 정렬을 고려해 주세요.
예시:
"dependencies": { "@lukemorales/query-key-factory": "^1.3.4", - "@tanstack/react-query": "^5.84.0", - "@tanstack/react-query-devtools": "^5.87.4", + "@tanstack/react-query": "^5.87.4", ... }, "devDependencies": { + "@tanstack/react-query-devtools": "^5.87.4", ... }Also applies to: 17-17
src/queries/checkList/index.ts (1)
1-3: 케이스 일관성: 'checkList' vs 'checklist'폴더/파일 경로가
checkList(카멜)와checklist(스네이크/로워)로 혼재합니다. CI/배포 환경이 대소문자 구분 파일시스템이면 혼동 여지가 있으니 네이밍 컨벤션을 통일하는 것을 권장합니다.src/queries/index.ts (1)
1-6: 중앙 레지스트리 구성 OK
mergeQueryKeys로 확장 가능하게 열어둔 구조가 좋습니다. 이후 다른 도메인 키를 합칠 때도 변경 범위가 최소화됩니다.필요하시면 users/todos 등 스캐폴딩 예시(PR 추가 커밋용)도 드릴게요.
src/queries/checkList/useChecklistInfo.ts (1)
2-2: useQuery에 key 객체 직접 전달: 간결하고 타입 안정적입니다
- queryFn/반환 타입이 키 팩토리에서 추론되어 훅 코드가 단순해졌습니다.
체크리스트 데이터 변동 빈도가 낮다면, 필요 시 훅 레벨에서
staleTime/gcTime을 부여해 불필요한 재요청을 줄이는 것도 고려해 보세요.Also applies to: 5-5
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (6)
package.json(1 hunks)src/app/layout.tsx(2 hunks)src/queries/checkList/index.ts(1 hunks)src/queries/checkList/useChecklistInfo.ts(1 hunks)src/queries/checkList/useSendRequiredItems.ts(1 hunks)src/queries/index.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (4)
src/queries/index.ts (1)
src/queries/checkList/index.ts (1)
checklist(5-11)
src/queries/checkList/useSendRequiredItems.ts (3)
src/services/checkList.ts (1)
sendRequiredItems(8-11)src/utils/toastStyles.ts (1)
TOAST_STYLES(1-24)src/queries/index.ts (1)
queries(4-4)
src/queries/checkList/index.ts (2)
src/types/checklist.ts (1)
ChecklistResponse(24-28)src/services/checkList.ts (1)
getChecklistInfo(13-16)
src/queries/checkList/useChecklistInfo.ts (1)
src/queries/index.ts (1)
queries(4-4)
🔇 Additional comments (1)
src/queries/checkList/index.ts (1)
1-11: Query Key Factory 적용 깔끔합니다
- queryKey와 queryFn을 한 곳에서 관리하게 되어 훅 구현이 간결해집니다.
- all 네임스페이스를 둔 것도 이후 일괄 무효화 전략에 유용합니다.
| import { sendRequiredItems } from '@/services/checkList'; | ||
| import toast from 'react-hot-toast'; | ||
| import { TOAST_STYLES } from '@/utils/toastStyles'; | ||
| import { queries } from '@/queries'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
중앙화된 queryKey로 invalidation 전환: 좋습니다
queries.checklist.info.queryKey사용으로 키 오탈자/불일치 위험이 사라집니다.
레거시 하드코딩 키가 남아 있는지 확인하려면 아래 스크립트를 제안합니다.
Also applies to: 8-8, 15-16
🏁 Script executed:
#!/bin/bash
# 'checklist' 관련 쿼리 무효화/사용 패턴 점검
rg -nP -C2 "(invalidateQueries|prefetchQuery|ensureQueryData)\s*\(\s*\{?\s*queryKey:\s*\[?['\"]checklist['\"]" --type=ts --type=tsxLength of output: 27
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 'checklist' 관련 쿼리 무효화/사용 패턴 재검증 (TS/TSX/JS/JSX)
echo "1) invalidate/prefetch/ensure with queryKey: ['checklist']"
rg -nP -C2 "(invalidateQueries|prefetchQuery|ensureQueryData)\s*\(\s*\{?\s*queryKey\s*:\s*\[?\s*['\"]checklist['\"]" -g '!**/node_modules/**' -g '**/*.ts' -g '**/*.tsx' -g '**/*.js' -g '**/*.jsx' || echo "no matches"
echo "2) invalidate/prefetch/ensure called with 'checklist' directly"
rg -nP -C2 "(invalidateQueries|prefetchQuery|ensureQueryData)\s*\(\s*['\"]checklist['\"]" -g '!**/node_modules/**' -g '**/*.ts' -g '**/*.tsx' -g '**/*.js' -g '**/*.jsx' || echo "no matches"
echo "3) queryKey: ['checklist'] anywhere"
rg -nP -C2 "queryKey\s*:\s*\[?\s*['\"]checklist['\"]" -g '!**/node_modules/**' -g '**/*.ts' -g '**/*.tsx' -g '**/*.js' -g '**/*.jsx' || echo "no matches"Length of output: 537
하드코딩된 'checklist' queryKey 교체 필요
src/queries/houseMemo/useChecklistInfo.ts (줄 7): queryKey: ['checklist'] 를 queries.checklist.info.queryKey 로 교체하세요.
🤖 Prompt for AI Agents
In src/queries/checkList/useSendRequiredItems.ts around line 5, replace the
hardcoded queryKey ['checklist'] with the centralized constant
queries.checklist.info.queryKey; update any import or usage so the hook uses
queries.checklist.info.queryKey instead of the literal array, ensuring you
import queries from '@/queries' if not already and remove the hardcoded array.
ydw1996
left a comment
ydw1996
left a comment
There was a problem hiding this comment.
따로 노션까지 정리해주셔서 감사합니다 🙏
Query Key Factory 기반으로 구조가 일관되게 정리되어 좋았고,
mergeQueryKeys 중앙 관리로 앞으로 다른 API 확장 시에도 통일성 있게 가져갈 수 있을 것 같습니다!
🚀 기능 추가
배경
정리 자료
🏗 작업 내용
👀 관련 이슈 번호
Summary by CodeRabbit