tomevault-io TanStack Query Guide
Core Principles
- No Direct Server Actions: Do NOT call Server Actions directly inside
useEffector Event Handlers in Client Components. - Wrapper Requirement: Use TanStack Query (
@tanstack/react-query) to wrap Server Actions for:- Caching
- Loading states
- Optimistic updates
Usage
When implementing data fetching or mutations in Client Components, always create or use a custom hook that wraps the Server Action with useQuery (for fetching) or useMutation (for updates).
Example Pattern:
Instead of calling myServerAction() directly locally, use a hook:
// Correct
const { data, isLoading } = useQuery({
queryKey: ["my-data"],
queryFn: () => myServerAction(),
});
Source: iwindd/istore — distributed by TomeVault.