tanstack-query-patternslisted
Install: claude install-skill smicolon/ai-kit
# TanStack Query Patterns
This skill enforces TanStack Query best practices for server state management in React applications.
## Query Key Factory Pattern
The factory pattern provides type-safe, hierarchical query keys:
```typescript
// lib/query-keys.ts
export const queryKeys = {
posts: {
all: () => ['posts'] as const,
lists: () => [...queryKeys.posts.all(), 'list'] as const,
list: (filters: PostFilters) => [...queryKeys.posts.lists(), filters] as const,
details: () => [...queryKeys.posts.all(), 'detail'] as const,
detail: (id: string) => [...queryKeys.posts.details(), id] as const,
comments: (id: string) => [...queryKeys.posts.detail(id), 'comments'] as const,
},
users: {
all: () => ['users'] as const,
detail: (id: string) => [...queryKeys.users.all(), id] as const,
profile: () => [...queryKeys.users.all(), 'profile'] as const,
},
auth: {
session: () => ['auth', 'session'] as const,
},
} as const
```
## Query Options Factory
Define reusable query options for consistency:
```typescript
// features/posts/queries/postQueries.ts
import { queryOptions } from '@tanstack/react-query'
import { queryKeys } from '@/lib/query-keys'
import { postApi } from '@/features/posts/api'
export const postQueryOptions = (postId: string) =>
queryOptions({
queryKey: queryKeys.posts.detail(postId),
queryFn: () => postApi.getPost(postId),
staleTime: 5 * 60 * 1000, // 5 minutes
})
export const postsQueryOptions = (filters: