What is the difference between prefetchQuery and ensureQueryData?

prefetchQuery starts a fetch without waiting for it to finish, which is non-blocking. ensureQueryData awaits the result, meaning the router will wait for the data to be ready before completing the navigation.

Can I fetch multiple data sources at once?

Yes, the skill includes patterns for parallel prefetching using Promise.all() within route loaders, allowing multiple independent API calls to happen simultaneously.

How does this skill handle cache invalidation?

It provides patterns for using useMutation hooks with onSuccess callbacks to call queryClient.invalidateQueries, ensuring your route data stays fresh after user actions.

Why should I use route loaders with TanStack Query?

Loaders begin fetching data before the route component renders. This eliminates 'loading waterfalls' where components mount and then trigger fetches, resulting in a much faster, 'instant' navigation feel.

Router & Query Integration

Name: Router & Query Integration
Author: tianzecn

bytianzecn

0•

生産性とワークフロー

Optimizes Single Page Application performance by integrating TanStack Router loaders with TanStack Query prefetching.

This skill provides standardized patterns for combining TanStack Router and TanStack Query to eliminate request waterfalls and ensure instant navigation in React applications. It guides users through implementing route loaders that prefetch data using the ensureQueryData pattern, handling parallel and dependent queries, and managing cache invalidation after mutations. By following these industry-standard best practices, developers can create highly responsive SPAs where data is loaded before the component renders, significantly improving the user experience.

主な機能

01Parallel and dependent data fetching patterns

02Preloading strategies for instant perceived performance (hover/intent)

03Route loader integration with TanStack Query prefetching

04Type-safe Query Options for DRY codebases

05Automatic cache invalidation and mutation handling

060 GitHub stars

ユースケース

01Implementing complex dashboard routes requiring multiple parallel data sources

02Optimizing SPA navigation speed by removing loading states between routes

03Setting up standardized, type-safe data fetching architecture in React projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tianzecn/myclaudecode router-query-integration

For use in Claude.ai and ChatGPT

Download Skill