data-fetching

Provide React hooks for data fetching, pagination, and polling in Kinetic applications.

Updated Feb 24, 2026
One-click install
npx skills add https://github.com/kineticdata/kinetic-platform-ai-skills --skill data-fetching-kineticdata
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: data-fetching
Source: https://github.com/kineticdata/kinetic-platform-ai-skills/tree/main/skills/front-end/data-fetching
Command: npx skills add https://github.com/kineticdata/kinetic-platform-ai-skills --skill data-fetching-kineticdata

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the process of fetching and managing data within Kinetic front-end portals, reducing boilerplate code and improving data handling efficiency.

Core Features & Use Cases

  • Data Fetching Hooks: Provides hooks like useData, usePaginatedData, and usePoller for streamlined data retrieval.
  • KQL Query Builder: Enables type-safe construction of KQL queries for precise data filtering.
  • Use Case: Display a list of user submissions, allowing users to navigate through pages of results, and automatically refresh the list periodically to show the latest updates.

Quick Start

Use the data-fetching skill to fetch a list of submissions for the 'my-app' kapp, displaying them with pagination controls.

Frequently Asked Questions about data-fetching

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

FAQPage Schema
How do I fetch paginated data with React hooks in a portal application?

Efficient data fetching with React hooks uses `useData` for single fetches and `usePaginatedData` for paginated lists. These hooks manage state and cursor-based navigation, reducing boilerplate code in Kinetic front-end portals.

What is the best way to automatically refresh a list of API submissions periodically?

To automatically refresh a list of API submissions periodically, use the `usePoller` hook to manage periodic data polling. This retrieves the latest updates and refreshes the list without manual intervention.

How do I build type-safe KQL queries for dynamic data filtering?

Build type-safe KQL queries for dynamic data filtering using the included KQL query builder. This tool enables precise construction of search criteria to standardize and filter submission retrieval parameters.

Can I use these data fetching utilities to display submissions from a specific kapp?

Yes, you can use these data fetching utilities to display submissions from a specific kapp. The hooks standardize submission retrieval parameters, enabling efficient data handling and display in Kinetic front-end portals.

When should I use cursor-based pagination instead of standard data fetching?

Use cursor-based pagination instead of standard data fetching when displaying large lists of submissions across multiple pages. The `usePaginatedData` hook manages this navigation state, whereas `useData` handles single fetches.

Does this data fetching approach work without external dependencies?

Yes, this data fetching approach works without external dependencies. It provides self-contained React hooks and utilities for state management, requiring no additional libraries to handle single fetches, pagination, or polling.