skills.rest
Quanby-IT-Solutions
Quanby-IT-SolutionsOFFICIAL
Explore all skills by this author →
GitHub

tanstack-query-orpc

Integrate TanStack Query with oRPC for typed data fetching.

2|Updated Jan 8, 2026
Search Tags:#typescript#ssr#hydration#tanstack-query#data-fetching#orpc
One-click install
npx skills add https://github.com/Quanby-IT-Solutions/turbo-template --skill tanstack-query-orpc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-orpc
Source: https://github.com/Quanby-IT-Solutions/turbo-template/tree/main/.ruler/skills/tanstack-query-orpc
Command: npx skills add https://github.com/Quanby-IT-Solutions/turbo-template --skill tanstack-query-orpc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query integration with oRPC for this monorepo enables typed, cache-aware data fetching across frontend and API boundaries, reducing boilerplate and ensuring consistent data handling.

Core Features & Use Cases

  • Unified data fetching: createQueryClient, provider, and orpc integration that harmonizes TanStack Query with oRPC for queries, mutations, and prefetching.
  • SSR hydration and hydration: supports server-side prefetching and client hydration with serialized data.
  • Type-safe contracts: uses v1Contract types and contract-types helpers to ensure end-to-end type safety across web services and contracts.

Quick Start

Install and configure the TanStack Query + oRPC setup in your web app, then create a sample hook using orpc.* query utilities and render data.

Frequently Asked Questions about tanstack-query-orpc

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

FAQPage Schema
How do I integrate TanStack Query with oRPC for typed data fetching?▼

Integrate TanStack Query with oRPC by using the StandardRPCJsonSerializer and OpenAPILink to create typed query and mutation hooks via orpc.* utilities, ensuring cache-aware data fetching across your monorepo.

What is the best way to prefetch oRPC queries on the server and hydrate them on the client?▼

Prefetch oRPC queries on the server using getQueryClient and HydrateClient, then hydrate the serialized data on the client using the QueryProvider to maintain server-client data consistency.

Can I use TanStack Query and oRPC to manage cache invalidation across a monorepo?▼

Yes, you can manage cache invalidation across a monorepo by leveraging the typed contract surface v1Contract and createQueryClient to harmonize mutations and maintain server-client data consistency.

Does oRPC support end-to-end type safety with TanStack Query contracts?▼

oRPC supports end-to-end type safety with TanStack Query by using v1Contract types and contract-types helpers, ensuring consistent typed data handling across frontend and API boundaries.

How do I create a TanStack Query hook for an oRPC mutation?▼

Create a TanStack Query hook for an oRPC mutation by accessing the feature hooks via orpc.* utilities, which harmonize the typed contract surface with the query client for cache-aware mutations.

Related Skills

Explore More Software Engineering Skills→
rostiSerostiSe
1

orpc

Build end-to-end type-safe RPC APIs with oRPC across server, client, and contracts.

Community
Intermediate
pelithpelith

tanstack-query

Manage server state in React apps with TanStack Query v5.

Official
Advanced
rafaelminatto1rafaelminatto1

nextjs-react-expert

Optimize React and Next.js apps by eliminating waterfalls and reducing bundle size.

Community
Advanced
masonjamesmasonjames

trpc-patterns

Implement typed TRPC data fetching with TanStack Query patterns in TSX files.

Community
Intermediate