skills.rest
bayazknn
bayazknnCOMMUNITY
Explore all skills by this author →
GitHub

frontend-query-mutation

Standardize Langflow frontend API hooks with TanStack React Query v5 and Axios.

Updated Aug 27, 2026
Search Tags:#hooks#streaming#react-query#axios#api-patterns#cache-invalidation#langflow
One-click install
npx skills add https://github.com/bayazknn/elciai-platform-analysis --skill frontend-query-mutation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-query-mutation
Source: https://github.com/bayazknn/elciai-platform-analysis/tree/main/langflow/.agents/skills/frontend-query-mutation
Command: npx skills add https://github.com/bayazknn/elciai-platform-analysis --skill frontend-query-mutation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend development in Langflow can suffer from inconsistent API hooks, duplicated URL logic, and scattered cache invalidation which leads to bugs, retry mismatches, and fragmented error handling. This Skill centralizes patterns for queries and mutations so hooks are predictable, testable, and maintainable across the codebase.

Core Features & Use Cases

  • Standardized query and mutation hook structure using TanStack React Query v5 and a shared Axios api instance.
  • Integration with UseRequestProcessor for default retry, retryDelay, consistent error handling, and automatic mutate/query helpers.
  • Conventions for query keys, getURL-based path construction, onSettled cache invalidation, conditional queries, polling, and streaming operations via performStreamingRequest.
  • Real-world use cases: creating/updating flows with proper invalidation, migrating legacy API calls to query hooks, implementing build/chat streaming, and polling message or build status endpoints.

Quick Start

Create a hook under controllers/API/queries/{domain}/ that uses UseRequestProcessor, the shared api instance, getURL constants, and places cache invalidation in onSettled.

Frequently Asked Questions about frontend-query-mutation

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

FAQPage Schema
How do I structure React Query v5 hooks for consistent API calls in Langflow?▼

Structure React Query v5 hooks in Langflow by using the UseRequestProcessor wrapper, the shared Axios instance, and getURL helpers to enforce consistent query keys, retry semantics, and error handling across your codebase.

What is the best way to handle cache invalidation after a mutation in Langflow?▼

Handle cache invalidation for Langflow mutations by placing invalidation logic inside the onSettled callback of your mutation hook, ensuring related queries are refreshed predictably after create or update operations complete.

How do I implement streaming requests with Axios and React Query in Langflow?▼

Implement streaming requests in Langflow using the performStreamingRequest pattern to handle build and chat operations, integrating the shared Axios instance with React Query v5 for consistent data fetching and polling.

Can I migrate legacy Axios API calls to React Query hooks without breaking existing Langflow endpoints?▼

Yes, you can migrate legacy Axios calls to React Query hooks by routing requests through the shared Axios instance and getURL constants, preserving endpoint paths while gaining automatic caching, retries, and onSettled invalidation.

Why are my React Query retries mismatching when polling build status in Langflow?▼

Retry mismatches during Langflow polling often occur when hooks bypass the UseRequestProcessor, which centralizes default retry and retryDelay configurations to ensure consistent behavior across all query and mutation hooks.

Related Skills

Explore More Software Engineering Skills→
Yoriichi-DangYoriichi-Dang

tanstack-query

Manage React server state with TanStack Query v5 hooks.

Community
Advanced
arorakrishharorakrishh

frontend-query-mutation

Create React hooks for REST calls with Axios and React Query.

Community
Intermediate
Timothy191Timothy191

tanstack-query

Automate data fetching and cache management with TanStack Query v5.

Community
Advanced
FlorianRiquelmeFlorianRiquelme

Global Error Handling

Implement global error handling with retry logic and user-friendly messages.

Community
Basic