skills.rest
modrinth
modrinthOFFICIAL
Explore all skills by this author →
Website𝕏@modrinthGitHub

tanstack-query

Convert useAsyncData and manual ref patterns to TanStack Query hooks.

2.3k|559|Updated Jun 20, 2021
Search Tags:#state management#frontend#react#data fetching#vue#migration#tanstack query
One-click install
npx skills add https://github.com/modrinth/code --skill tanstack-query-modrinth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/modrinth/code/tree/main/.claude/skills/tanstack-query
Command: npx skills add https://github.com/modrinth/code --skill tanstack-query-modrinth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the migration of existing data-fetching patterns in a frontend application to TanStack Query, a powerful library for server-state management. It helps improve caching, reduce boilerplate, and enhance the overall data handling experience.

Core Features & Use Cases

  • Automated Conversion: Converts useAsyncData, useFetch, and manual ref() + await patterns to useQuery and useMutation.
  • Standard Adherence: Ensures query keys follow established conventions and leverages an api-client for fetching.
  • Cache Management: Facilitates the implementation of cache invalidation and optimistic updates for mutations.
  • Use Case: Migrating a Nuxt.js application's data fetching from useAsyncData to TanStack Query to leverage its advanced caching and background update capabilities.

Quick Start

Convert the data fetching in the file '/src/pages/users/[id].vue' to use TanStack Query.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I migrate from useAsyncData to TanStack Query in Vue?▼

Migrating from useAsyncData to TanStack Query involves converting existing fetching patterns to useQuery and useMutation hooks. This standardizes server-state management and leverages advanced background caching capabilities.

What is the best way to manage cache invalidation for frontend data fetching?▼

Migrating data fetching logic to TanStack Query facilitates the implementation of cache invalidation and optimistic updates. It uses specific query key conventions and an injected API client to manage server state effectively.

Can I convert manual ref and await patterns to useQuery in Vue?▼

Yes, manual ref() and await patterns can be converted to useQuery. The migration process replaces manual Vue reactive references with standardized TanStack Query hooks for improved data handling.

Does migrating to TanStack Query require a specific API client setup?▼

Migrating to TanStack Query requires utilizing an injected API client for query functions. Your codebase must adhere to specific query key conventions to ensure proper cache management and data fetching.

How does TanStack Query improve frontend state management over manual fetching?▼

TanStack Query improves frontend state management by reducing boilerplate and centralizing server-state. It replaces manual fetching patterns with structured hooks, enabling better cache invalidation and optimistic updates.

Related Skills

Explore More Software Engineering Skills→
KILWA73KILWA73

client-side-data-fetching

Manage client-side server-state with TanStack Query in React or Vue applications.

Community
Intermediate
bartolomeomuellerbartolomeomueller

tanstack-query

Manage client-side server state with automatic caching and background refetching.

Community
Advanced
MadAppGangMadAppGang
7

state-management

Guide React and Vue state management with Zustand, Pinia, and TanStack Query.

Official
Intermediate
AratKruglikAratKruglik
9

vue-state-management

Guide Vue 3 developers in selecting state management approaches for SPAs.

Community
Advanced