# Tanstack Query

> Best practices for data fetching and state management using TanStack Query. Use this when calling Server Actions from Client Components. Use when this capability is needed.

- Skill: `tomevault-io/tanstack-query` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/tanstack-query`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/tanstack-query/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/tanstack-query

---


# TanStack Query Guide

## Core Principles

1. **No Direct Server Actions**: Do NOT call Server Actions directly inside `useEffect` or Event Handlers in Client Components.
2. **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:

```tsx
// Correct
const { data, isLoading } = useQuery({
  queryKey: ["my-data"],
  queryFn: () => myServerAction(),
});
```

---
> Source: [iwindd/istore](https://github.com/iwindd/istore) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-30 -->