tRPC vs oRPC: Typesafe API battle!

Key Concepts:

• Type-safe Remote Procedure Calls (RPCs)
• TRPC (Typescript Remote Procedure Call)
• ORPC (OpenRPC)
• Raw API requests (REST)
• Server Functions
• Tanstack Query
• Next.js/React
• Input Validation
• TypeScript
• OpenAPI
• SuperJSON
• Zod
• Monorepo

1. Introduction

The video compares two competing standards for type-safe RPCs in Next.js, NestJS, or Tanstack applications: TRPC and ORPC. It outlines a process for choosing between raw API requests, server functions, TRPC, and ORPC by developing a comparison grid.

2. Raw API Requests (REST)

• Implementation: The video begins by creating a Tanstack start application to demonstrate raw API access using GET and POST endpoints with Tanstack Query. A simple to-do list application is built.
• Details: The API endpoint /api/demo/tq-todos is created. A GET request retrieves to-dos, and a POST request adds new to-dos to an in-memory list. The UI uses useQuery and useMutation from Tanstack Query to interact with the API.
• Type Safety: Manually defines types for to-dos in the UI code because there's no automatic type safety between the API and the client.
• Input Validation: No input validation is performed on the POST request.
• Example: Sending an object instead of a string to the POST endpoint causes the application to crash because the API expects a string.
• Evaluation:
  • TypeScript support: No (manual type definitions are required).
  • OAuth support: Possible, but requires manual implementation.
  • Input validation: No (requires manual implementation).
  • URL control: Complete control.
  • Output control: Complete control over the API output format (e.g., JSON, HTTP stream, SSE stream).
  • Standardized format: No (not compliant with standards like GraphQL or OpenAPI).

3. Server Functions (Tanstack Start)

• Implementation: Demonstrates server functions in Tanstack Start. A to-do list is again used as an example.
• Details: The create server function from react-start is used to define server functions. Two server functions, get to-dos (GET method) and add to-do (POST method), are created. Input validation is performed using a validator function.
• Type Safety: Complete end-to-end type safety due to the validator and type definitions within the server function.
• URL & Output: No control over the URL structure, the payload format or the response output.
• Example: Attempting to pass the wrong type to the add to-do server function results in a TypeScript error.
• Evaluation:
  • TypeScript support: Yes.
  • OAuth support: Possible.
  • Input validation: Yes.
  • URL control: No (URL is automatically generated).
  • Output control: No control.
  • Standardized format: No (Tanstack Start-specific, not interoperable with other platforms).

4. TRPC

• Implementation: Integrates TRPC into a Tanstack Start application.
• Details: The UI uses React Query and TRPC. The prefetchQuery is used to initialize the query from TRPC, allowing for server-side rendering. A TRPC router is defined with two public procedures: list (query) and add (mutation).
• Type Safety: Type safety is enforced from the client to the server through the TRPC router.
• Example: Passing an object to the add mutation results in a type error.
• URL & Method Control: With TRPC v11, you can define the methods used for setting and posting.
• Output: The output is SuperJSON by default, but can be configured with other serializers. It also supports SSE streams or HTP streams.
• Evaluation:
  • TypeScript support: Yes.
  • OAuth support: Possible (using protected procedures).
  • Input validation: Yes (built-in).
  • URL control: Yes (you get to choose where to put the endpoint, such as /api/trpc).
  • Output control: Yes.
  • Standardized format: No (natively), but OpenAPI support can be added via an extension.
• Architectural Consideration: The presenter mentions that a single TRPC router definition could be shared between a Next.js/Tanstack Start application and a React Native application in a monorepo.

5. ORPC

• Implementation: Integrates ORPC into a Tanstack Start application.
• Details: Similar to TRPC, it's built on top of React Query. A router is defined with list to-do and add to-do functions.
• Type Safety: Strong typing is enforced.
• Example: Passing invalid input to add to-do results in a type error.
• OpenAPI Integration: ORPC automatically generates an OpenAPI document and provides a UI for exploring the API at /api/$.
• Postman Integration: The generated OpenAPI document can be imported into Postman to create a collection of API endpoints.
• Evaluation:
  • TypeScript support: Yes.
  • OAuth support: Yes.
  • Input validation: Yes (using Zod).
  • URL control: Yes.
  • Output control: Yes (the output format is exactly what you send back).
  • Standardized format: Yes (OpenAPI).

6. Comparison Grid

| Feature | Raw API | Server Functions | TRPC | ORPC | |-------------------|---------|------------------|------|------| | TypeScript | No | Yes | Yes | Yes | | OAuth | Yes | Yes | Yes | Yes | | Input Validation | No | Yes | Yes | Yes | | URL Control | Yes | No | Yes | Yes | | Output Control | Yes | No | Yes | Yes | | Standardized | No | No | No | Yes |

7. Conclusion

The video provides a detailed comparison of raw API requests, server functions, TRPC, and ORPC for building type-safe RPCs in Next.js and similar frameworks. It emphasizes the importance of type safety, input validation, and standardization. ORPC stands out by providing automatic OpenAPI generation, which facilitates integration with other systems and languages. The choice between these options depends on the specific requirements of the project, such as the need for full control over the API structure versus the convenience of automatic type safety and OpenAPI support.