End-to-End TypeScript: Database, Backend, API, and Frontend

[stereobooster]

Inspired by:

• https://www.youtube.com/watch?v=GrnBXhsr0ng
• https://twitter.com/garybernhardt/status/1131962951877849088
• https://twitter.com/garybernhardt/status/1326638179038892032?lang=en

Idea: provide end-to-end type checks.

Basic:

• we can generate TS type definitions from database, which would make sure that types are correct when we read or write to DB
• we can have shared type definitions between server and client, which would make sure that types are correct when send and receive API calls

Advanced:
But this is just a basic idea, we can imagine something more advanced. For example, if we use OpenAPI. From OpenAPI we can generate:

• type definitions shared by server and client (Request, Response)
• We can generate Adonis Validator schema (server validator)
• We can generate validators, to make sure server response is correct (client validator)
• TanStack Query based hooks
• Adonis controllers and actions

flowchart TD
  subgraph client
    react-query[TanStack Query]
    cv[validator]
    creq[[Request]]
    cres[[Response]]
  end

  subgraph server
    sv[validator]
    sres[[Response]]
    sreq[[Request]]
    ORM
    DB[(DB)]
  end

  react-query -.- creq -..- sv -.- sreq -.- ORM
  react-query -.- cres -.- cv -..- sres -.- ORM
  ORM <--> DB

Loading

Links

Database to TS

Related: https://trello.com/c/to3ncEjK/43-introspect-database-to-generate-update-models

• knex based
  • sql-ts
  • knex-types
• pg-to-ts
• pg-typegen
• sequelize-typescript-generator
• schemats
• kanel
• https://blog.logrocket.com/best-typescript-orms/

TypeScript Runtime Data Validators

• adonisjs/validator
• io-ts
• zod
• joi
• yup
• ajv
• superstruct

OpenAPI to TS

• https://xata.io/blog/openapi-typesafe-react-query-hooks
  • openapi-codegen
• swagger-typescript-api
• openapi-typescript-codegen

Alternatives

• https://trpc.io/
• https://vramework.io/
• https://thin.dev/

Related

• https://jsonapi.org/
• https://github.com/kevin1193/adonis-kvn-response
• https://github.com/microeinhundert/radonis/tree/main/packages/radonis-query

[stereobooster]

cc @fabien0102 👋

[ramrami]

This would be nice!

Adding ts-rest to the list of alternatives, which has already solved the API<->Frontend part for NestJS, Express, and Fastify, but not Adonis unfortunately.