Advanced Typescript
Typage au runtime

Rick & Morty

Utilisation d'une API typée

Exercice

En utilisant l'API de Rick & Morty créer une application en utilisant Typescript qui permet d'afficher la liste des personnages de la série.

Pour initialiser le projet, vous pouvez utiliser Vite.

  • Vous pouvez utiliser le framework de votre choix: React, Vue, Svelte etc...
  • Implémenter la pagination avec un bouton pour aller à la page suivante

Specs

Afficher la liste des personnages.
Il faudra uniquement récupérer le nom du personnage et son image dans cette liste.
Au clic sur un des élément de la liste, une nouvelle requête GraphQL est envoyée au serveur pour afficher une nouvelle page/modale qui affiche le détail d'un personnage.

Codegen

Utiliser la librairie graphql-codegen pour générer les types de sortie des queries utilisés.

Étapes pour vous aider

  • Installer vite
  • Installer Apollo Client
  • Installer graphql-codegen
  • Lire la docs de l'API pour savoir quelles routes appeler

Spoilers

Je vous recommande de faire vos propres recherches et avancer à votre rythme (vous avez le temps).
L'idée c'est aussi de faire en sorte que vous sachiez faire des recherches et lire de la doc.
Si vous ne souhaitez pas faire de recherche Google non plus vous pouvez ouvrir ces liens.

Je vous conseille de ne pas faire de vibe-coding lorsque vous apprenez de nouveaux concepts.