data-fetching-integration

Connect UI entry points to data sources with typed contracts and explicit caching.

1|Updated Jan 13, 2026
One-click install
npx skills add https://github.com/velcrafting/codex-skills --skill data-fetching-integration
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: data-fetching-integration
Source: https://github.com/velcrafting/codex-skills/tree/main/skills/frontend/data-fetching-integration
Command: npx skills add https://github.com/velcrafting/codex-skills --skill data-fetching-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Wire a UI to a data source using the repo’s data tooling, ensuring typed inputs/outputs, and robust UI state handling with explicit caching and invalidation.

Core Features & Use Cases

  • Typed inputs and outputs for data contracts
  • Correct UI state handling (loading, error, empty, and success)
  • Explicit caching and invalidation rules to control data freshness

Quick Start

Configure a data hook by wiring a UI entry point to the data source using the repo's data tooling.

Frequently Asked Questions about data-fetching-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle loading and error states when fetching data in React Query?

Data fetching UI state handling requires defining typed inputs and outputs to manage loading, error, empty, and success states, applying explicit cache keys with invalidation rules to ensure deterministic UI state transitions and data freshness.

What is the best way to set up cache invalidation rules for data fetching?

Cache invalidation rules for data fetching are set up by defining explicit cache keys linked to read and write operations. This deterministic caching approach ensures proper data contracts and controls data freshness across UI entry points.

How do I wire a UI entry point to a data source with typed inputs and outputs?

Wiring a UI entry point to a data source uses the repository's data tooling to establish data contracts, applying typed inputs and outputs to read and write operations while managing loading, error, and empty states deterministically.

Does this data fetching approach work without external dependencies?

The data fetching and integration approach operates without external dependencies, relying on the repository's existing data tooling and patterns to wire UI entry points, enforce typed data contracts, and manage deterministic caching.

Why do I need explicit cache keys for UI state data fetching?

Explicit cache keys are needed for UI state data fetching to establish deterministic caching and invalidation rules. This ensures proper data contracts and typed inputs/outputs, preventing stale data and unmanaged loading or error states.