openapi-typescript VS trpc-openapi

OpenAPI TypeScript

I'll preface all of this with a couple esoteric design goals that I had in mind:

1. I actually _want_ an SPA. You might not need an SPA, if you don't need one then Vue/React/etc are overkill, etc.

2. I want to power as much of the SPA as I can using the same REST API as my core product, both for dogfooding reasons and for consolidation. Many people might argue that this is a bad idea.

---

With that in mind, some specific packages that I highly recommend:

1. Django-vite (https://github.com/MrBin99/django-vite). This makes it very easy to serve an SPA from the actual django response/request model

2. Some sort of way to get type information (if you're using TypeScript) into the frontend. I use a frankensteined system of the OpenAPI spec that django-ninja generates + openapi-typescript (https://github.com/drwpow/openapi-typescript). This means when I add, say, a new field to a response in Django, I immediately get typechecking for it in Vue — which has been _tremendously_ useful.

3. Django-typescript-routes (a package I extracted and open-sourced!: https://github.com/buttondown-email/django-typescript-routes) which gives your front-end routing information based on the Django router.

Glad to see alternatives but disappointed that Bruno does not support OpenAPI specification.

At my company, we hand-edit OpenAPI specs in YAML and it gets consumed by many tools that generate types[0], static analysis and dynamic checks[1]. The OpenAPI spec itself is linted[2]. And of course, Postman consumes OpenAPI.

Tools that are built on open standards will naturally see greater adoption over those that use proprietary formats.

[0]: https://openapi-ts.pages.dev

Another great library to generate TS types from OpenAPI is https://github.com/drwpow/openapi-typescript . It provides the types as single objects you access via indexing, which is pretty nice. There's a partner library to generate a typed fetch client.

If you're willing to document your API with an OpenAPI schema, then it should be possible to generate TypeScript types based on the OpenAPI schema with something like openapi-typescript. Also, Typebox can generate JSON schemas, maybe it can be used to generate something that the front-end can also use?

REST

In this sample, we'll achive it using openapi-typescript and openapi-typescript-fetch.

tRPC does not natively export OpenAPI documents, but the trpc-openapi package adds this functionality. We'll start this tutorial by adding trpc-openapi to a project, and then we'll add a script to generate an OpenAPI schema and save it as a file.

While trpc-openapi originally was used to expose REST endpoints of the tRPC router, we will use it to generate an OpenAPI specification for our API.

Sure it can, you can use https://github.com/prosepilot/trpc-openapi

You either have to go with react native or use https://github.com/jlalmes/trpc-openapi to generate rest endpoint using trpc. lol. Not sure how good the trpc-openapi package is though. Read somewhere it was missing stuff

As for exposing the API externally, neither (can) limit this but SvelteKit's API is generally considered to be an internal implementation detail that you don't use directly since it might change between versions. If you want to expose an API you should choose tRPC, probably alongside the OpenAPI plugin or something similar.

In essence, features of the language made for static type checking at compilation are possibly being left favour of tools that act like a superset of the language that provide the static build type checking and offer runtime type checking too. An example I recently saw was the trpc-openapi package which uses Zod for creating the types of the schema for the http request and responses, it takes a zod schema as that is what it can use when compiled to JavaScript to generate the types for the openapi file at runtime, there's scarcely a type or interface in sight when using it but you have full type safety.

Take a look at https://github.com/jlalmes/trpc-openapi which will give you a rest endpoint based on your trpc router. Ymmv in reality but basically this should give you some confidence that your trpc router can be called from another client (not just next).

Ok thanks, I did find a good example here https://github.com/jlalmes/trpc-openapi/blob/master/examples/with-nextjs/src/server/router.ts

There is an OpenAPI Extension for tRPC that can be used to create a more REST-like API from your procedures, and that in turn can be used for auto-generating documentation. But if my app needed to offer third-party API access, I would likely reach for GraphQL again.

tRPC is nice because you have type safety the whole way down. Someone has made a tRPC OpenaAPI for exposing tRPC procedures externally in the OpenAPI format https://github.com/jlalmes/trpc-openapi