skills.rest
DanSnow
DanSnowCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

using-orpc

Define oRPC API contracts with Zod and generate TypeScript clients.

2|Updated Nov 24, 2024
Search Tags:#typescript#frontend development#tanstack query#contract#api client#orpc
One-click install
npx skills add https://github.com/DanSnow/dotfiles --skill using-orpc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: using-orpc
Source: https://github.com/DanSnow/dotfiles/tree/main/private_dot_claude/skills/using-orpc
Command: npx skills add https://github.com/DanSnow/dotfiles --skill using-orpc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the process of building and maintaining client-side API integrations using the oRPC framework, reducing boilerplate code and improving developer experience.

Core Features & Use Cases

  • oRPC Contract Definition: Define API contracts using Zod schemas and oc.router.
  • Client Generation: Create type-safe clients with @orpc/client and @orpc/openapi-client.
  • TanStack Query Integration: Seamlessly integrate oRPC with TanStack Query for efficient data fetching and state management.
  • Use Case: When adding a new API endpoint to your TypeScript frontend, use this Skill to define the contract, generate the client, and set up the corresponding TanStack Query hooks.

Quick Start

Use the using-orpc skill to create a new API endpoint for fetching user data.

Frequently Asked Questions about using-orpc

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

FAQPage Schema
How do I integrate oRPC with TanStack Query in a TypeScript frontend?▼

To integrate oRPC with TanStack Query, use the `@orpc/tanstack-query` package to seamlessly connect your generated oRPC clients for efficient data fetching and state management. This setup provides type-safe queries and mutations.

What is the best way to define API contracts in oRPC using Zod?▼

The best way to define API contracts in oRPC is by using Zod schemas combined with the `oc.router` utility. This approach ensures your API endpoints are strictly typed and validated on the client side.

How do I generate a type-safe API client from an OpenAPI contract using oRPC?▼

You can generate a type-safe API client from an OpenAPI contract using the `@orpc/client` and `@orpc/openapi-client` packages. These utilities reduce boilerplate by automatically generating strongly typed client methods.

Can I migrate from raw fetch to oRPC for my frontend API calls?▼

Yes, you can migrate from raw fetch to oRPC. The framework provides patterns and utilities to replace manual fetch calls with type-safe clients, improving developer experience and reducing maintenance overhead.

Does oRPC support adding new API endpoints without breaking existing TypeScript types?▼

Yes, oRPC supports adding new API endpoints without breaking existing types. By defining contracts with Zod and `oc.router`, new endpoints are automatically integrated into the type-safe client generation pipeline.

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
CatOfJupit3rCatOfJupit3r
1

tanstack-query-integration

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

Community
Advanced
ali-masterali-master
8

orpc-nextjs

Integrate oRPC into Next.js App Router and Pages Router applications.

Community
Intermediate
AlteriomAlteriom

tRPC

Establish end-to-end type-safe APIs in TypeScript apps using tRPC, Zod, and Next.js.

Official
Advanced