# Frontend State Server React Query

> Standardized guidelines and patterns for Frontend State Server React Query.

- Skill: `valec3/frontend-state-server-react-query` (Agent Skill)
- Install (CLI): `npx skillmds add valec3/frontend-state-server-react-query`
- Raw SKILL.md: https://api.skillmd.com/api/skills/valec3/frontend-state-server-react-query/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: valec3 (https://skillmd.com/u/valec3)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/valec3/frontend-state-server-react-query

---


# Frontend State Server React Query

## When to use this skill
- Fetching server data
- Managing cache
- Optimistic updates
- Background refetching

## Workflow
- [ ] Setup QueryClient
- [ ] Use useQuery for reads
- [ ] Use useMutation for writes
- [ ] Invalidate queries on mutations
- [ ] Configure stale/cache times

## Instructions

### Setup
```typescript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>
```

### Query
```typescript
function Users() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
    staleTime: 5 * 60 * 1000 // 5 minutes
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error</div>;
  
  return <UserList users={data} />;
}
```

### Mutation
```typescript
function CreateUser() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: createUser,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
    }
  });

  return <button onClick={() => mutation.mutate({ name: 'John' })}>Create</button>;
}
```

## Resources
- useQuery for GET
- useMutation for POST/PUT/DELETE
- Invalidate or update cache after mutations