Agent skill
data-fetching
TanStack Query 기반 데이터 페칭 패턴
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/data-fetching
SKILL.md
Data Fetching Patterns
TanStack Query (@tanstack/react-query)를 사용한 데이터 페칭 규칙.
구조
src/renderer/
├── queries/
│ ├── client.ts # QueryClient 인스턴스 (staleTime: 30s)
│ └── keys.ts # 쿼리 키 팩토리
└── hooks/
├── useLaunchdJobs.ts # useQuery 예시
├── useJobActions.ts # useMutation 예시
├── useSettings.ts # 공유 상태 예시
├── useFocusMode.ts # optimistic update 예시
└── useCalendarData.ts # 복합 훅 예시
쿼리 키
src/renderer/queries/keys.ts에 정의된 팩토리 사용:
queryKeys.jobs.list() // ["jobs", "list"]
queryKeys.calendar.events() // ["calendar", "events"]
queryKeys.settings.get() // ["settings", "get"]
새 쿼리 추가 시 반드시 keys.ts에 키 정의.
읽기 (useQuery)
const { data: jobs = [], isLoading, error } = useQuery({
queryKey: queryKeys.jobs.list(),
queryFn: () => window.electronAPI.listJobs(),
refetchInterval: JOB_POLLING_INTERVAL_MS, // 폴링 (선택)
});
조건부 폴링
running job이 있을 때만 빠르게 폴링:
refetchInterval: (query) =>
(query.state.data?.length ?? 0) > 0 ? 1000 : false,
쓰기 (useMutation)
const mutation = useMutation({
mutationFn: (settings: AppSettings) =>
window.electronAPI.setSettings(settings),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: queryKeys.settings.all });
},
});
낙관적 업데이트
const mutation = useMutation({
mutationFn: (event: LocalEvent) => window.electronAPI.addLocalEvent(event),
onMutate: async (event) => {
await queryClient.cancelQueries({ queryKey: queryKeys.calendar.events() });
const previous = queryClient.getQueryData(queryKeys.calendar.events());
queryClient.setQueryData(queryKeys.calendar.events(), (old = []) =>
[...old, toCalendarEvent(event)],
);
return { previous };
},
onError: (_err, _vars, context) => {
if (context?.previous)
queryClient.setQueryData(queryKeys.calendar.events(), context.previous);
},
onSettled: () => {
queryClient.invalidateQueries({ queryKey: queryKeys.calendar.events() });
},
});
핵심 규칙
- 컴포넌트에서
window.electronAPI직접 호출 금지 — 반드시 hooks 사용 - mutation 성공 시 관련 쿼리
invalidateQueries필수 - 낙관적 업데이트는
onMutate+onError+onSettled세트 - 새 도메인 추가 시
queries/keys.ts에 키 팩토리 추가 window.electronAPI.onWindowShow이벤트 시invalidateQueries로 새로고침
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?