pitfalls-tanstack-query
TanStack Query 문제 디버깅
TanStack Query v5는 주요 변경 사항과 미묘한 캐싱 동작을 도입하여 버그를 발생시킵니다. 이 스킬은 올바른 데이터 가져오기, 변형 및 캐시 무효화에 대한 검증된 패턴과 안티 패턴을 제공합니다.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "pitfalls-tanstack-query". TanStack Query v5에 대해 내 useQuery 구현 검토
Erwartetes Ergebnis:
- QueryKey가 적절한 중복 제거를 위해 전체 URL 경로를 사용합니다
- queryFn가 일치하는 엔드포인트에서 올바르게 가져옵니다
- 사용 사례에 맞게 StaleTime이 적절하게 구성되었습니다
- 실시간 데이터가 필요하면 refetchOnWindowFocus 추가 고려
Verwendung von "pitfalls-tanstack-query". 변형 후 내 데이터가 왜 오래되었습니까?
Erwartetes Ergebnis:
- onSuccess 핸들러에서 queryClient.invalidateQueries 누락
- 관련 쿼리를 무효화하기 위해 onSuccess 콜백 추가
- 가져오기와 무효화 사이에 queryKey가 정확히 일치하는지 확인
Sicherheitsaudit
SicherThis is a documentation-only skill containing markdown and TypeScript code examples. All 16 static findings are false positives: TypeScript template literals were misidentified as shell commands, API patterns were misidentified as cryptographic code, and metadata fields were misidentified as network/filesystem access. No executable code, network calls, or file system operations exist.
Risikofaktoren
🌐 Netzwerkzugriff (1)
📁 Dateisystemzugriff (1)
⚙️ Externe Befehle (6)
Qualitätsbewertung
Was du bauen kannst
데이터 가져오기 디버깅
TanStack Query를 사용하여 React 컴포넌트의 데이터 가져오기 버그 수정
코드 품질 검토
일반적인 실수가 있는지 TanStack Query를 사용하는 풀 리퀘스트 검토
v5로 마이그레이션
v5로 업데이트가 필요한 v4 패턴 식별
Probiere diese Prompts
올바른 TanStack Query v5 패턴을 위해 이 useQuery 구현을 검토하세요. queryKey 구조, queryFn 및 옵션을 확인합니다:
적절한 캐시 무효화를 위해 이 useMutation을 확인하세요. 성공 시 올바른 쿼리를 무효화합니까?
TanStack Query v5에서 롤백을 포함한 낙관적 업데이트의 올바른 패턴을 보여주세요. onMutate, onError 및 onSettled 핸들러를 포함합니다.
이 코드에서 v5로 업데이트가 필요한 모든 v4 패턴을 식별하세요. 특히 isPending이어야 하는 isLoading을 찾으세요.
Bewährte Verfahren
- 올바른 중복 제거를 위해 ['/api/strategies', id]와 같이 queryKeys에 전체 URL 경로 사용
- 캐시를 유지하기 위해 useMutation의 onSuccess에서 항상 관련 쿼리 무효화
- v5에서 변형 상태 확인에 isLoading 대신 isPending 사용
Vermeiden
- 컴포넌트 간 적절한 중복 제거를 방지하는 ['strategy']와 같은 짧은 queryKeys
- 변형 후 queryClient.invalidateQueries 호출을 잊어서 오래된 데이터 발생
- v5에서 변형 상태 확인에 isPending 대신 isLoading 사용