Back to Trpc

tRPC

www/docs/main/introduction.mdx

11.16.08.2 KB
Original Source
<div align="center" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}> <svg width="429" height="100" viewBox="0 0 429 128" fill="none" xmlns="http://www.w3.org/2000/svg" className="max-w-full"> <g clip-path="url(#clip0_3_2)"> <path d="M90.5 0H37.5C16.7893 0 0 16.7893 0 37.5V90.5C0 111.211 16.7893 128 37.5 128H90.5C111.211 128 128 111.211 128 90.5V37.5C128 16.7893 111.211 0 90.5 0Z" fill="#398CCB"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M63.8615 18.75L81.6307 29.002V34.639L103.138 47.0595V68.306L108.908 71.6365V92.152L91.15 102.404L83.2662 97.8445L64.098 108.912L45.0445 97.9085L37.2713 102.404L19.5135 92.1345V71.6365L25.0578 68.4358V47.0595L46.1038 34.9095L46.1155 34.909V29.002L63.8615 18.75ZM81.6307 39.9698V49.5058L63.873 59.7578L46.1155 49.5058V40.234L46.1038 40.2345L29.673 49.725V65.771L37.2713 61.3845L55.0288 71.6365V92.1345L49.6565 95.2413L64.098 103.581L78.6545 95.178L73.3922 92.1345V71.6365L91.15 61.3845L98.523 65.6413V49.725L81.6307 39.9698ZM78.0077 89.4923V76.9788L88.8422 83.2328V95.7463L78.0077 89.4923ZM104.292 76.9615L93.4577 83.2155V95.7463L104.292 89.475V76.9615ZM24.1289 89.475V76.9615L34.9635 83.2155V95.7288L24.1289 89.475ZM50.4135 76.9615L39.5788 83.2155V95.7288L50.4135 89.475V76.9615ZM80.3155 72.9808L91.15 66.727L101.984 72.9808L91.15 79.2405L80.3155 72.9808ZM37.2713 66.7095L26.4365 72.9808L37.2713 79.223L48.1058 72.9808L37.2713 66.7095ZM50.7308 46.8405V34.327L61.5537 40.5865V53.0943L50.7308 46.8405ZM77.0038 34.327L66.1807 40.5865V53.0885L77.0038 46.8405V34.327ZM53.0385 30.3345L63.8615 24.0808L74.6962 30.3345L63.8615 36.5885L53.0385 30.3345Z" fill="white"/> </g> <path class="fill-black dark:fill-white" fill="currentFill" d="M186.695 107.848C191.031 107.848 194.137 107.496 196.422 107.086V92.3203C195.25 92.4961 194.195 92.6133 192.555 92.6133C187.457 92.6133 184.996 90.5625 184.996 85.0547V57.9258H196.422V42.6914H184.996V27.9844H164.195V42.6914H155.523V57.9258H164.195V87.8672C164.195 102.281 171.227 107.848 186.695 107.848ZM201.641 106.5H223.145V77.3789H234.102L248.634 106.5H272.774L255.841 74.1562C264.63 70.3477 270.255 60.9727 270.255 50.1328V50.0156C270.255 32.0859 258.712 21.9492 238.263 21.9492H201.641V106.5ZM223.145 61.793V38.1797H235.743C243.302 38.1797 248.341 42.8672 248.341 49.957V50.0742C248.341 57.2227 243.477 61.793 235.86 61.793H223.145ZM276.295 106.5H297.798V81.7148H312.33C331.197 81.7148 343.384 70.1133 343.384 52.0078V51.8906C343.384 33.7852 331.197 21.9492 312.33 21.9492H276.295V106.5ZM307.173 38.4141C316.255 38.4141 321.646 43.1016 321.646 51.8906V52.0078C321.646 60.7969 316.255 65.543 307.173 65.543H297.798V38.4141H307.173ZM386.924 108.023C408.897 108.023 424.366 93.9023 425.127 74.9766L425.186 74.332H404.502L404.385 74.9766C402.92 84.4102 396.299 90.2109 386.983 90.2109C375.205 90.2109 367.705 80.4844 367.705 64.1367V64.0781C367.705 47.9062 375.147 38.2383 386.924 38.2383C396.768 38.2383 402.92 44.4492 404.268 53.2383L404.385 54.1172H425.069V53.5312C424.307 34.6055 409.014 20.4258 386.924 20.4258C361.67 20.4258 345.791 36.5391 345.791 64.1367V64.1953C345.791 91.793 361.553 108.023 386.924 108.023Z" fill="white"/> <defs> <clipPath id="clip0_3_2"> <rect width="128" height="128" fill="white"/> </clipPath> </defs> </svg> <p>End-to-end typesafe APIs made easy</p> <p> <a href="https://npmcharts.com/compare/@trpc/server?interval=30">
</a>{' '}
<a href="https://github.com/trpc/trpc">
  
</a>{' '}
<a href="https://github.com/trpc/trpc">
  
</a>
</p> </div>

Introduction

<p> <abbr title="TypeScript Remote Procedure Call">tRPC</abbr> lets you build & consume fully typesafe APIs without schemas or code generation. It combines concepts from [REST](https://www.sitepoint.com/rest-api/) and [GraphQL](https://graphql.org/) - if you are unfamiliar with either, take a look at the key [Concepts](./concepts.mdx). </p>

In full-stack TypeScript projects, keeping API contracts in sync between the client and server is a common pain point. tRPC does this by leveraging TypeScript's type inference directly, with no code generation step, and catches problems at build time.

tRPC can run standalone or mounted as an endpoint on your existing REST API using our extensive ecosystem of adapters.

Features

  • ✅  Well-tested and production ready.
  • 🧙‍♂️  Full static typesafety & autocompletion on the client, for inputs, outputs, and errors.
  • 🐎  Snappy DX - No code generation, run-time bloat, or build pipeline.
  • 🍃  Light - tRPC has zero runtime dependencies and a tiny client-side footprint.
  • 🐻  For new and old projects - Easy to start with or add to your existing brownfield project.
  • 🔋  Framework agnostic - The tRPC community has built adapters for all of the most popular frameworks.
  • 🥃  Subscriptions support - Add typesafe real-time updates to your application.
  • ⚡️  Request batching - Requests made at the same time can be automatically combined into one.
  • 👀  Examples - Check out an example to learn with or use as a starting point.

Quick Look

See more on the Videos & Community Resources page.

Try tRPC

Or use an example app to get started locally.

Adopt tRPC

Creating a new project

Since tRPC can live inside of many different frameworks, you will first need to decide where you want to use it.

On the backend, there are adapters for a range of frameworks as well as vanilla Node.js. On the frontend, you can use our TanStack React Query or Next.js integrations, a third-party integration for a variety of other frameworks, or the Vanilla Client, which works anywhere JavaScript runs.

After choosing your stack, you can either scaffold your app using a template, or start from scratch using the documentation for your chosen backend and frontend integration.

Adding tRPC to an existing project

Adding tRPC to an existing project is not significantly different from starting a new project, so the same resources apply. The main challenge is that it can feel difficult to know how to integrate tRPC with your existing application. Here are some tips:

  • You don't need to port all of your existing backend logic to tRPC. A common migration strategy is to initially only use tRPC for new endpoints, and only later migrate existing endpoints to tRPC.
  • If you're not sure where to start, check the documentation for your backend adapter and frontend implementation, as well as the example apps.
  • If you are looking for some inspiration of how tRPC might look as part of a larger codebase, there are some examples in Open-source projects using tRPC.

Community

Join us on Discord to ask questions and share your experiences!