data-fetching-integration_skill

Overview

This skill wires a UI to a data source using the repository’s existing data tooling, producing typed inputs/outputs, deterministic cache keys, and explicit invalidation rules. It ensures the UI covers loading, error, empty, and success states and includes telemetry and validations required by the repo profile. The focus is predictable client-side behavior without changing backend contracts.

How this skill works

I inspect the repo profile (REPO_PROFILE.json) or existing client code to determine the data-fetching library and conventions. I implement a hook/loader or data module that calls the API client, emits typed responses, and defines a stable cache key and invalidation rules. The implementation includes deterministic UI states (loading, error, empty, success), typechecks, and comments/constants documenting caching strategy and refetch triggers.

When to use it

• You need a UI entry wired to an API or client function with typed inputs/outputs.
• The repository has an established data tooling pattern (React Query, SWR, or custom) to follow.
• You require explicit caching and invalidation behavior for consistent UX and testability.
• The UI must deterministically show loading, error, empty, and success states.
• You want telemetry and repo-profile driven validations to be included.

Best practices

• Prefer using REPO_PROFILE.json to discover repo conventions and lint/test commands before coding.
• Derive cache keys from stable request inputs and avoid using transient values like Date.now().
• Invalidate only the queries affected by a mutation; avoid broad global invalidation unless justified.
• Implement latest-only guards or cancellation for competing requests to prevent race conditions.
• Document cache keys and invalidation rules in code comments or helper constants for future maintainers.

Example use cases

• Create a useOrders hook that fetches orders with a stable key based on customerId and filters, handles empty lists, and invalidates on order mutations.
• Wire a dashboard widget to a realtime feed where polling is needed; implement polling controls and a clear cache key strategy.
• Integrate a form that performs optimistic updates: update UI immediately, submit mutation, and invalidate the specific query on error or success.
• Replace ad-hoc fetch calls with a repo-consistent loader module that passes typechecks and adds telemetry entries.