skills.rest
PlazaCC
PlazaCCOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-query-classic-migration

Migrate tRPC client code from @trpc/react-query to @trpc/tanstack-react-query.

2|Updated Apr 11, 2026
Search Tags:#typescript#tanstack#migration#trpc#react-query#codemod
One-click install
npx skills add https://github.com/PlazaCC/antes-da-tela --skill react-query-classic-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-query-classic-migration
Source: https://github.com/PlazaCC/antes-da-tela/tree/main/.agents/skills/react-query-classic-migration
Command: npx skills add https://github.com/PlazaCC/antes-da-tela --skill react-query-classic-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about react-query-classic-migration

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

FAQPage Schema
How do I migrate tRPC classic hooks to TanStack Query?▼

To migrate tRPC classic hooks to TanStack Query, run the @trpc/upgrade codemod to automatically convert common patterns, install @trpc/tanstack-react-query, and manually adapt remaining hooks to queryOptions and mutationOptions.

What does the trpc upgrade codemod do to React Query providers?▼

The tRPC upgrade codemod replaces createTRPCReact with createTRPCContext and updates your application root to use the standard TanStack QueryClientProvider for managing your data fetching context.

How do I update query invalidation when migrating to @trpc/tanstack-react-query?▼

When migrating to @trpc/tanstack-react-query, update query invalidation by converting utils.xxx.invalidate calls to queryClient.invalidateQueries using the trpc.xxx.queryFilter pattern for targeted cache invalidation.

Can I use this tRPC migration codemod with a Next.js TypeScript project?▼

Yes, you can use this tRPC migration process with a Next.js TypeScript project, as it specifically targets TypeScript projects using Next.js, TanStack Query, and tRPC to ensure full type safety is maintained throughout the migration.

Why should I migrate from @trpc/react-query to the TanStack Query API?▼

You should migrate from @trpc/react-query to the TanStack Query API because the classic hooks are deprecated, and the new @trpc/tanstack-react-query API ensures compatibility with the latest TanStack Query features while maintaining full type safety.

Why is my tRPC TanStack Query migration still showing TypeScript errors?▼

Your tRPC TanStack Query migration is showing TypeScript errors because the codemod handles common patterns but manual adaptation of queryOptions and mutationOptions is required, so running TypeScript checks helps catch and resolve remaining migration issues.

Related Skills

Explore More Software Engineering Skills→
kyamsSRLkyamsSRL

next-upgrade

Upgrade Next.js projects by running official codemods and configuration fixes.

Community
Intermediate
proofoftomproofoftom
1

drupal-caching

Apply cache tags, contexts, and max-age to Drupal render arrays and blocks.

Community
Intermediate
udecodeudecode
434

convex

Generate Convex-backed type-safe APIs with cRPC hooks for React apps.

Official
Advanced
PlazaCCPlazaCC
2

react-query-setup

Generate typed tRPC context, provider, and hooks for React Query.

Official
Intermediate