Data fetching

---
paths:
  - "**/*.js"
  - "**/*.jsx"
  - "**/*.ts"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
---

# Data fetching (frontend-skills)

Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data.

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.claude/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
description: Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data.
globs: **/*.js, **/*.jsx, **/*.ts, **/*.tsx, **/*.vue, **/*.svelte
alwaysApply: false
---

# Data fetching (frontend-skills)

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.agents/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

---
applyTo: "**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.vue,**/*.svelte"
description: "Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data."
---

# Data fetching (frontend-skills)

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.agents/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
trigger: glob
globs: "**/*.js, **/*.jsx, **/*.ts, **/*.tsx, **/*.vue, **/*.svelte"
description: "Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data."
---

# Data fetching (frontend-skills)

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.agents/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

---
trigger: glob
globs: "**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.vue,**/*.svelte"
---

# Data fetching (frontend-skills)

Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data.

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.agents/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
paths:
  - "**/*.js"
  - "**/*.jsx"
  - "**/*.ts"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
---

# Data fetching (frontend-skills)

Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data.

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.claude/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
inclusion: fileMatch
fileMatchPattern: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.vue", "**/*.svelte"]
---

# Data fetching (frontend-skills)

Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data.

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.kiro/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
description: "Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data."
globs: **/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.vue,**/*.svelte
alwaysApply: false
---

# Data fetching (frontend-skills)

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.trae/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

---
name: "Data fetching"
description: "Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations. Use when fetching data in a component, adding a query or mutation, or fixing stale, duplicated or flickering data."
globs: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.vue", "**/*.svelte"]
alwaysApply: false
---

# Data fetching (frontend-skills)

- Read server data through the framework loader or a server-state library, not per-component fetch plus loading flags (state/server-state-cache).
- A query key holds every variable its function reads (state/query-key-deps).
- TanStack Query 5 takes one options object: `useQuery({ queryKey, queryFn })` (state/query-object-syntax).
- Create the `QueryClient` once, never in a component body (state/query-client-stable).
- Render pending, error (with retry) and success states; never data only (state/query-error-state).
- Query functions throw on HTTP errors: check `res.ok` (js/fetch-check-ok).
- An effect that fetches into state ignores or aborts stale responses in its cleanup (state/fetch-effect-cleanup).
- After a mutation, invalidate or update every query it changed (state/invalidate-after-mutation).
- Start independent requests together (`Promise.all`, parallel queries), never one after another.
- Pass the `signal` the library gives you to `fetch` so cancelled queries stop.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-data-fetching/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-data-fetching` (Data fetching): when editing `**/*.js`, `**/*.jsx`, `**/*.ts`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, first read `.frontend-skills/skills/fe-data-fetching/SKILL.md`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-data-fetching` (Data fetching): when editing `**/*.js`, `**/*.jsx`, `**/*.ts`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, first read `.frontend-skills/skills/fe-data-fetching/SKILL.md`.