frontend-query-mutation

Automate frontend API hook creation with TypeScript types and UseRequestProcessor.

153k|9.8k|Updated Feb 8, 2023
One-click install
npx skills add https://github.com/langflow-ai/langflow --skill frontend-query-mutation-langflow-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-query-mutation
Source: https://github.com/langflow-ai/langflow/tree/main/.agents/skills/frontend-query-mutation
Command: npx skills add https://github.com/langflow-ai/langflow --skill frontend-query-mutation-langflow-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creates a consistent, scalable pattern for building and maintaining frontend API hooks that interact with the Langflow backend via Axios and TanStack React Query, enabling uniform data fetching, mutation, and error handling across the codebase.

Core Features & Use Cases

  • Structured domain-based hook organization under controllers/API/queries/{domain}/
  • Use UseRequestProcessor to standardize retries, error handling, and lifecycle behavior for both queries and mutations
  • Centralized API access through a shared Axios instance with a getURL helper for consistent endpoints
  • Guidance on query/mutation patterns, URL construction, conditional queries, and cache invalidation strategies

Quick Start

Create a domain-specific frontend hook pair under controllers/API/queries and wire it to the shared Axios API using UseRequestProcessor.

Frequently Asked Questions about frontend-query-mutation

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

FAQPage Schema
How do I standardize React Query hooks for API requests in a frontend codebase?

You can standardize React Query hooks by organizing them by domain, using UseRequestProcessor for retry and error handling, and enforcing type-safety with dedicated TypeScript types and centralized URL constants.

What is the best way to structure data fetching and mutation logic with TanStack React Query?

Structuring data fetching logic with TanStack React Query works best when you organize hooks under domain-specific directories and centralize API access through a shared Axios instance with a getURL helper for consistent endpoints.

Can I use Axios with React Query to handle conditional queries and cache invalidation?

Yes, you can use Axios with React Query to handle conditional queries and cache invalidation by wiring your domain-specific hooks to a shared Axios instance via UseRequestProcessor for consistent lifecycle behavior.

Do I need TypeScript types to maintain consistent API hook patterns across a frontend application?

You need dedicated TypeScript types and standardized query/mutation keys to maintain consistent, reusable API hook patterns, ensuring type-safety and uniform data fetching across the frontend application.

How do I handle retries and error handling for React Query mutations and queries?

Handle retries and error handling for React Query mutations and queries by implementing UseRequestProcessor, which standardizes lifecycle behavior and error management for both operations across your codebase.

How does streaming work with React Query hooks when fetching data from an API?

Streaming patterns with React Query hooks are implemented alongside conditional queries and cache invalidation strategies, ensuring continuous data fetching while maintaining type-safety through centralized URL constants and TypeScript types.