---
name: velcrafting/data-fetching-integration
source: https://app.decimal.ai/s/velcrafting-data-fetching-integration@1/SKILL.md
source_sha256: 45b8f1a2fa29
---

# Skill: frontend/data-fetching-integration

## Purpose
Connect UI to an API/data source using the repo’s data tooling, ensuring:
- typed inputs/outputs
- correct UI state handling
- explicit caching and invalidation behavior

---

## Inputs
- Data source definition:
  - endpoint contract (method/path/request/response) OR
  - client function signature OR
  - data description (if contract not formalized yet)
- UI entry point(s) that need the data
- Expected behavior:
  - read vs write
  - polling or realtime needs
  - optimistic updates allowed (yes/no)
- Repo profile (preferred): `<repo>/REPO_PROFILE.json`

---

## Outputs
- Data call wired via repo tooling (React Query/SWR/custom)
- A hook / loader / data module consistent with repo patterns
- UI state coverage:
  - loading
  - error
  - empty
  - success
- Explicit cache key strategy and invalidation/refetch rules (code comments or helper constants)

---

## Non-goals
- Changing backend behavior or contracts
- Adding business rules client-side beyond presentation and basic form validation
- Building a new data layer abstraction unless explicitly requested

---

## Workflow
1) Identify the repo’s data fetching pattern (prefer `REPO_PROFILE.json`).
2) Implement the data call using existing client conventions.
3) Define a stable cache key derived from request inputs.
4) Add invalidation rules:
   - mutations invalidate queries that depend on changed data
   - avoid global invalidation unless required
5) Implement UI states:
   - loading: skeleton/spinner (repo standard)
   - error: recoverable messaging + retry path if appropriate
   - empty: explicit “no data” state
   - success: render
6) Run required validations (typecheck/lint/tests per profile).

---

## Checks
- Typecheck passes (if configured)
- UI handles loading/error/empty/success states deterministically
- Cache key is stable and unique
- Invalidation/refetch behavior is explicit
- No silent swallowing of errors

---

## Failure modes
- Data tooling unclear → ask which is used (React Query/SWR/custom) and default caching expectations.
- Stale cache → fix keys and invalidation rules; avoid ad-hoc refetch loops.
- Race conditions → add latest-only guards, cancellation, or stable request identity.
- Contract ambiguity → recommend `api/contract-update` or `shared/schema-types` before hard wiring.

---

## Telemetry
Log:
- skill: `frontend/data-fetching-integration`
- data_tooling: `react-query | swr | custom | unknown`
- cache_keys_added_or_changed
- files_touched
- outcome: `success | partial | blocked`