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