tanstack-query

Centralizes Supabase and edge function reads into React queries with caching, invalidation, retries, mutations.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/B4rz99/fidy --skill tanstack-query-b4rz99
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/B4rz99/fidy/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/B4rz99/fidy --skill tanstack-query-b4rz99

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the complexity of handling server-side state, async operations, and data caching with tools like Supabase or Edge Functions, making it easy to maintain consistent data flows in your app.

Core Features & Use Cases

  • Server State Management: Centralizes reads from remote databases and edge functions, including user-specific configurations.
  • Query Caching and Invalidation: Provides caching and invalidation logic to optimize performance and ensure data consistency.
  • Async Mutation Flows: Supports operations that update the remote data and trigger cached updates, improving efficiency.
  • Use Case: Integrate TanStack Query in Fidy to automatically update your user preferences from Supabase and manage notifications, enhancing user experience with reduced load times and fewer network calls.

Quick Start

Initialize a QueryClient in your app to set up query caching and invalidation with supabase data.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I manage remote state and async operations when fetching data from Supabase?▼

You can manage remote state from Supabase by centralizing data reads into React queries. This approach provides built-in query caching and invalidation logic to handle async operations and maintain consistent server-side state.

What is the best way to handle query caching and invalidation for Edge Functions in React?▼

The best way to handle query caching for Edge Functions is to initialize a QueryClient. This configures query caching and invalidation mechanisms to optimize performance, reduce network calls, and ensure data consistency automatically.

How do I update cached remote data after async mutations in a Supabase React application?▼

You update cached remote data by running async mutation flows that trigger cached updates. This built-in mutation support efficiently updates remote data while automatically synchronizing your local query cache to reflect the changes.

Do I need React Query to centralize server-side state and data reads from edge functions?▼

You need the @tanstack/react-query dependency to centralize server-side state. It manages data reads from edge functions, offering robust query caching, invalidation, and retry mechanisms to reduce complexity in your app.

Can I use query caching to automatically update user-specific configurations from Supabase?▼

Yes, query caching can automatically update user-specific configurations fetched from Supabase. By centralizing these reads into React queries, your app enhances user experience with reduced load times and fewer network calls.

Why does handling server-side state complexity require a dedicated query management approach?▼

Handling server-side state complexity requires a dedicated approach because raw async operations lack built-in caching. Centralizing remote database reads into queries solves this by providing automated retries, invalidation, and mutation updates.