Creando un Api Client en TS

Hoy os traigo una cosa que es un flipe!! Nos encontramos que teníamos que empezar un proyecto de nuevo, de full-stack. Teníamos que colaborar varios developers en un equipo, y alguno de ellos estaban empezando con React, Typescript, etc, entonces se nos ocurrió la idea de estandarizar las llamadas a la API con nuestro API Client propio con TS (que luego lo creamos con plop.js para automatizar, pero eso ya en otro capítulo).

Algunos de vosotros os estaréis preguntando que de qué estoy hablando. Aquí un ejemplo rápido, para hacer data fetching en un componente en React, haríamos una cosa tal que así:

Que está bien, pero si queremos tiparlo, que todo el mundo lo tipe igual, que no se repitan los tipos, que esté separado por entidades o modelos, etc etc, pues se complica si van a participar vario developers. Entonces, molaría mucho más poder hacer una cosa así:

Aquí podemos ver, "client" es el API client, "users" la entidad o modelo, y el "getAll" la función que devuelve todos los users.A que mola? Pues vamos allá paso por paso!! Vamos a tener una organización de carpeta, como en la imagen:

Empecemos por lo principal, el HTTP. Primero, vamos a crear los métodos de una api, GET, POST, etc. tiparemos las opciones del cliente y del fetch. Luego, vamos a crear la función de fetch, que como podréis ver a continuación, tendrá una autorización (Bearer), una url, unos query params y lo que va a esperar (una response), que la vamos a parsear directamente a JSON. Este archivo nos va a quedar así:

Ahora, vamos con el cliente. En él, vamos a crear la clase Client, con el nombre que queramos, usamos los services y los añadiremos al constructor. Luego exportamos la función y ya casi tenemos listo los dos pilares del Api Client. Queda así:

Entonces, como podéis observar, tenemos un UserService. Vamos a ir por partes, primero, necesitamos un User model, y luego un Service para usarlo aquí. En la carpeta models, vamos a añadir el siguiente fichero, que básicamente es el tipado del modelo. En este caso sería así con User o con la entidad que necesitemos:

Ahora, creamos el User Service, donde estarán los métodos que hagan las request de forma tipada, y con lo que nuestro Frontend necesite. Una manera o ejemplo sería este:

Ahora mismo, ya solo queda lo mejor, que es usarlo con el ejemplo que hemos visto antes!!En nuestra page podemos usar todo lo anterior de esta forma:

Espero que os haya gustado y lo implementéis en vuestros proyectos y equipos!!!