data-fetching-integration

Name: data-fetching-integration
Availability: InStock
Author: velcrafting

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

1|Updated Jan 13, 2026

Search Tags:#caching #react-query #data-fetching #invalidations #ui-state #typed-inputs

Ready to run

npx skills add https://github.com/velcrafting/codex-skills --skill data-fetching-integration

💬 Prompt for ChatGPT / Claude Chat▼

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.