skills.rest
AdityaBorkar
AdityaBorkarCOMMUNITY
Explore all skills by this author →
Website𝕏@adityab_techGitHub

orpc-contract-first

Implements oRPC contract-first API patterns with typed contracts and TanStack Query integration.

Updated Apr 30, 2026
Search Tags:#type safety#typescript#frontend#api#tanstack query#contract-first#orpc
One-click install
npx skills add https://github.com/AdityaBorkar/igbot-fork --skill orpc-contract-first-adityaborkar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: orpc-contract-first
Source: https://github.com/AdityaBorkar/igbot-fork/tree/main/.agents/skills/orpc-contract-first
Command: npx skills add https://github.com/AdityaBorkar/igbot-fork --skill orpc-contract-first-adityaborkar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Defining type-safe API layers between frontend and backend often leads to inconsistent contracts, untyped fetch calls, and drift between client and server. This Skill standardizes how oRPC contracts are created, registered, and consumed so every endpoint stays fully typed end to end. ## Core Features & Use Cases - Contract Definition: Create typed API contracts in web/contract with detailed input structure using params, query, and body. - Router Composition: Register domain contracts in a central router grouped by API prefix, with inferred input/output types exported for the whole app. - TanStack Query Hooks: Generate service hooks that use typed query keys and contract clients for cache-safe data fetching. - Use Case: When adding a new billing endpoint, define the contract in web/contract/console/billing.ts, register it under the billing group in router.ts, then consume it in a React component via a typed hook in web/service/use-billing.ts. ## Quick Start Create a new oRPC contract for the invoices endpoint, register it in the router, and generate the matching TanStack Query hook.

Frequently Asked Questions about orpc-contract-first

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

FAQPage Schema
How do I create a new oRPC contract for an API endpoint?▼

Create a file in web/contract/console for your domain, import base from ../base and type from @orpc/contract, then define the route with path, method, input, and output. Register it in web/contract/router.ts under the matching API prefix group.

How to integrate oRPC contracts with TanStack Query hooks?▼

Create a hook file in web/service/use-{domain}.ts and use consoleQuery.{group}.{contract}.queryKey() for query keys and consoleClient.{group}.{contract}() for the actual API call. This keeps cache keys and requests fully typed from the contract.

What input structure does oRPC contract-first development use?▼

Contracts use the detailed input structure with an object containing params, optional query, and optional body. Path parameters use {paramName} syntax in the path and must match keys in the params object.

Can I use barrel files to organize oRPC contract imports?▼

No, barrel files are explicitly disallowed in this pattern. Import contracts directly from their specific domain files into router.ts to keep dependencies explicit and avoid circular import issues.

How do I export typed inputs from an oRPC router?▼

Use InferContractRouterInputs with your composed router contract, for example export type ConsoleInputs = InferContractRouterInputs<typeof consoleRouterContract>. This gives every consumer typed access to all endpoint inputs.

Related Skills

Explore More Software Engineering Skills→
Quanby-IT-SolutionsQuanby-IT-Solutions
2

orpc-contracts

Define API contracts and endpoints using oRPC contracts for NestJS and Next.js.

Official
Advanced
ubay1ubay1
1

presentational-container-pattern

Separate data fetching and state logic from UI rendering in React components.

Community
Intermediate
LeonardoTan19LeonardoTan19
2

api-client-gen

Generate a typed TypeScript API client from Strapi content-type schemas and route contracts.

Community
Advanced
fireflyframeworkfireflyframework

firefly-conventions

Document Firefly conventions for code organization, reactive patterns, and error handling.

Official
Intermediate