---
name: valec3/frontend-state-server-react-query
source: https://app.decimal.ai/s/valec3-frontend-state-server-react-query@1/SKILL.md
source_sha256: ab3e56c08631
---

# 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