react-query-classic-migration
OfficialMigrate tRPC classic hooks to TanStack Query
AuthorPlazaCC
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It helps developers transition from the deprecated @trpc/react-query classic hooks to the modern @trpc/tanstack-react-query API, ensuring compatibility with the latest TanStack Query features and maintaining type safety.
Core Features & Use Cases
- Codemod Execution: Runs the @trpc/upgrade tool to automatically convert common hook patterns.
- Provider Refactor: Replaces createTRPCReact with createTRPCContext and updates the app root to use QueryClientProvider.
- Hook Migration: Switches trpc.xxx.useQuery and useMutation to TanStack useQuery/useMutation with queryOptions and mutationOptions.
- Invalidation Update: Converts utils.xxx.invalidate calls to queryClient.invalidateQueries using trpc.xxx.queryFilter.
- Verification: Encourages running TypeScript checks to catch any remaining migration issues.
- Use Case Example: In a Next.js TypeScript project, migrate all data‑fetching components to the new pattern to retain full type safety and leverage improved query caching.
Quick Start
Run npx @trpc/upgrade, install @trpc/tanstack-react-query, and update your TRPC provider and hooks as described in the guide.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: react-query-classic-migration Download link: https://github.com/PlazaCC/antes-da-tela/archive/main.zip#react-query-classic-migration Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.