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

react-query-setup

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes a typed tRPC integration with TanStack React Query by generating a ready-to-use React context, provider, and hooks for a React app.

Core Features & Use Cases

  • Typed tRPC context creation (createTRPCContext) for safe client usage.
  • TRPCProvider wiring to supply the tRPC client to the React component tree.
  • useTRPC hook and TRPC client helpers for convenient access to endpoints.
  • queryOptions and mutationOptions factories to generate type-safe query and mutation hooks.
  • Invalidation and cache management via queryClient.invalidateQueries using queryFilter, plus type inference via inferInput/inferOutput.

Quick Start

Install the required packages and initialize the tRPC context, then wrap your root component with TRPCProvider.

Frequently Asked Questions about react-query-setup

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

FAQPage Schema
How do I set up tRPC with TanStack React Query in a Next.js app?▼

You wire tRPC with TanStack React Query by generating a typed React context and wrapping your root component with TRPCProvider to supply the tRPC client and QueryClient to the component tree.

How do I create type-safe query and mutation hooks for tRPC procedures?▼

Create type-safe query and mutation hooks by using queryOptions and mutationOptions factories, which generate strictly typed configurations for fetching and modifying data across client and server boundaries.

Does this tRPC React Query integration support both Next.js and SPA setups?▼

Yes, this tRPC React Query integration applies to frontend apps using both Next.js and SPA setups that rely on tRPC v11 and TanStack React Query for data fetching and cache management.

How do I infer input and output types across tRPC client and server boundaries?▼

Infer input and output types across client and server boundaries by using the inferInput and inferOutput utilities, ensuring strict type safety throughout your tRPC React Query integration.

What is the best way to invalidate tRPC queries safely with React Query?▼

The best way to invalidate tRPC queries safely is by using queryClient.invalidateQueries combined with a queryFilter, allowing targeted cache invalidation without manually specifying query keys.

Related Skills

Explore More Software Engineering Skills→
tianhuiltianhuil

trpc

Build end-to-end type-safe APIs with tRPC v11 in Next.js App Router.

Community
Advanced
CatOfJupit3rCatOfJupit3r
1

tanstack-query-integration

Integrate TanStack Query with oRPC for typed data fetching and caching.

Community
Advanced
SlanyCukrSlanyCukr
2

TanStack Query v5

Manage React server state with data fetching, caching, and background updates.

Community
Advanced
PlazaCCPlazaCC
2

react-query-classic-migration

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

Official
Intermediate