Julien Fournier - Tech Lead & Coordinateur d'agence
Découvrez notre calendrier de l'Avent spécial éco-conception
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Title document
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Next.js est un framework React open source créé par Vercel qui vient apporter tout un cadre de travail à la librairie React et des fonctionnalités supplémentaires. Lorsque nous utilisons React, nous avons souvent besoin d'outils externes afin de réaliser certaines tâches, comme React-Router ou React Intl, qui sont déjà intégrés dans Next.js.
Et surtout, un site web créé via React est très difficile à référencer par les "crawlers" (les robots de Google et autres) car React est une librairie rendue côté client, c'est-à-dire que le contenu est chargé uniquement via Javascript après le chargement initial de la page. Les robots voient souvent une page blanche lors de la lecture du code source du site.
Next.js répond à cette problématique et permet donc de réaliser un site web SEO Friendly grâce à sa fonction de rendu côté serveur, appelée Server-Side Rendering (SSR). C'est ce qui fait sans doute sa plus grande force.
Dans le cadre de ce rendu, chaque page va être générée côté serveur pour chaque requête utilisateur. Si un appel API est nécessaire, il sera fait à chaque fois pour récupérer les données avant de les renvoyer au client.
Les avantages du SSR :
Les inconvénients :
Lors de la création de votre site web, vous pourrez par exemple :
Quelques exemples de fonctionnalités intégrées à Next.js :
Twitch, Netflix Jobs, Github Copilot, Nike, Binance, Auth0, Playstation, Material UI, Lego, Docker, Deliveroo, ... Voir plus
GraphQL est un langage de requêtage d’API développé par Facebook. Tout comme REST, GraphQL est une méthode d’implémentation d’API répondant à des standards.
Il existe 5 grands points différenciant les deux types d’API :
Dans une API REST, chaque route est prévue pour renvoyer un certain type de données. Il est usuel de définir des routes GET, POST, UPDATE, DELETE pour chaque table présente dans la base de données.
Dans GraphQL, une seule route est nécessaire. Toutes les requêtes sont envoyées à la même route et cette dernière est capable de traiter toutes les demandes. En réalité, il faut deux routes et non pas une. Une en GET et une en POST.
Dans une implémentation REST, chaque route renvoie une certaine structure de données qui est fixe. Même si le client n’a pas besoin de connaître l’âge d’un utilisateur, l’API le renverra pour chaque profil utilisateur, car c’est ce pourquoi elle a été programmée. Ici, l’API a le pouvoir.
Dans le cas de GraphQL, la route ne renvoie QUE les données que le client demande. Si le client n’a pas l’utilité de connaître l’âge d’un utilisateur alors l’API ne renverra pas l’âge pour chaque utilisateur. Dans ce cas-ci l’API adapte sa réponse en fonction de la demande du client. Ici, le client a le pouvoir.
Un élément particulièrement intéressant de l’approche GraphQL est la syntaxe des requêtes car la requête envoyée correspond au format de la réponse attendue. Ce qui donne des requêtes simples, logiques et claires.
Exemple de requête permettant de récupérer les attributs author_id, first_name et last_name d'une table authors :
Cette requête nous permet de récupérer la réponse suivante :
À savoir que GraphQL est un bon choix architectural si le site web et sa structure de données font appel à de nombreuses requêtes. C'est également intéressant lorsque les objets retournés ont beaucoup de propriétés et de nombreuses relations avec d'autres objets.
Avec une API Rest, si nous souhaitons requêter un film pour obtenir ses détails, ses commentaires et l'auteur de chaque commentaire, il nous faudra plusieurs requêtes distinctes.
Avec GraphQL, cela peut être effectué de façon plus programmatique, et permettre au client de requêter les seules informations souhaitées au final.
Exemple :
GraphQL se base sur des schémas pour connaître le format des données qu’il va servir. Ces schémas sont décrits dans un simple fichier texte.
Exemple :
L'exemple de schéma ci-dessus décrit un objet author qui contient trois champs: author_id, first_name et last_name.
Nous pouvons faire de même avec des fonctions permettant d’interagir avec l’API en définissant leurs prototypes.
Exemple de prototype de type Query :
Les prototypes de type Query correspondent à des fonctions de récupération simple d’information (comme des GET).
Ici, nous indiquons que l’API peut renvoyer une liste d’auteurs et qu’elle accepte des paramètres de recherche, author_id, first_name et last_name.
Exemple de prototype de type Mutation :
Les prototypes de type Mutation correspondent aux fonctions d’altération de la base de données (comme des POST, UPDATE ou DELETE). Ici, l'API permet d'ajouter un auteur, de mettre à jour les informations d’un auteur ou bien de supprimer une entrée author.
Hasura est un produit open source depuis 2018 qui accélère considérablement le développement en nous donnant des API GraphQL ou REST avec une autorisation intégrée sur nos données, instantanément.
Hasura facilite l'accès aux données, en composant instantanément une API GraphQL qui s'appuie sur des bases de données et des services afin que l'équipe de développeurs (ou les consommateurs d'API) deviennent immédiatement productifs. La nature même de GraphQL et l'approche dynamique d'Hasura facilitent l'intégration et l'itération.
Le moteur d'événements de Hasura permet d'adopter la technologie "cloud-native" sans avoir à s'inquiéter de la mise à l'échelle des éléments non fonctionnels, de la fiabilité et des garanties de livraison.
Les développeurs peuvent facilement construire une logique d'entreprise qui publie et consomme des événements, qui réagit aux changements de données ou qui est programmée en fonction du temps.
Avec Hasura nous avons donc une interface utilisateur qui nous permet de gérer notre base de données, de créer des rôles et ainsi de leur donner des droits sur chaque colonne de chaque table.
Étant donné qu'un CRUD API basé sur notre base de données est auto-généré, il est également possible de tester des requêtes GraphQL via l'explorateur API :
Si nous avons des appels API à effectuer depuis notre site web vers des services externes (ex : Mapbox, Google, Stripe, ou tout autre service), il est possible de créer des schémas distants via Apollo Server (ou autre) de façon à ce qu'ils soient fusionnés avec Hasura et que l'on ait toujours qu'un seul endpoint à appeler (notre endpoint Hasura) :
Hasura permet également de déporter une partie de la logique métier en dehors de notre site web afin qu'elle soit gérée par Hasura grâce aux actions :
Autre fonctionnalité intéressante (uniquement disponible en mode Cloud et avec l'offre Hasura Entreprise Edition), un onglet de monitoring :
Pour en finir avec ce listing des fonctionnalités d'Hasura, l'onglet "événements" offre la possibilité de créer des déclencheurs d'événements :
Si vous souhaitez tester Hasura, il est possible de le mettre en place en quelques secondes de 2 façons différentes :
À savoir que l'offre gratuite d'Hasura Cloud est faite pour un usage personnel et la création de sites "basiques" (60 requêtes par minute et transmission de données de 1GB par mois).
En savoir plus sur les offres.
Hasura a besoin d'un accès à une base de données Postgres pour stocker ses metadonnées et déployer son moteur GraphQL. Lors de la mise en place d'Hasura en mode Cloud, il est proposé de créer une base de données sur Heroku gratuitement et très rapidement via l'interface.
Une fois l’url de connexion à la base de données spécifiée à Hasura, les tables et les données seront affichées sur l’interface.
On peut ensuite choisir quelles données seront trackées par l’API (ex : si nous n'avons pas besoin d’ouvrir une table à notre api, il est possible de choisir de ne pas la tracker), de créer les rôles et de gérer les autorisations pour chaque colonne (ex : nous pouvons dire que le rôle User n’a pas accès à telle ou telle donnée). Tout cela se fait dans la section data de l’interface Hasura.
Remarque importante : nous ne sommes pas obligés d'utiliser l'interface d'Hasura pour créer nos tables et colonnes de la base de données, il est d'ailleurs recommandé d'utiliser le système de migrations et la création de seeds de façon à gérer des données initiales.
Ensuite on peut se rendre dans la section api de l’interface Hasura pour faire des requêtes.
Airbus, The Marshall Project, BBVA, Cajoo, Philips Healthcare, ... Voir plus
J'ai déjà utilisé Hasura dans le cadre professionnel pour le groupe Vinci dans ma précédente entreprise, avec une stack Next.js, GraphQL et React Admin qui est désormais en production, j'ai beaucoup aimé.
Le seul défaut que je peux trouver à Hasura (si on peut vraiment appeler ça un « défaut ») c’est qu’il ne fourni pas d’interface d’administration de contenu, donc il faut la créer nous-même via un React Admin, Easy Admin, Forest Admin, en sur-mesure ou autre. À l'instar d'un outil comme Strapi qui combine à la fois l'API et l'interface d'administration.
De plus, j'aime beaucoup le fait qu'Hasura s'appuie principalement sur le gestionnaire de base de données PostgreSQL qui est selon-moi le meilleur choix possible pour créer un site web. Plus besoin de le présenter, Postgres est une valeur sûre qui a fait ses preuves depuis plus de 30 ans, il est fiable et performant. Et encore plus quand il y a des calculs et/ou de grosses requêtes à effectuer.
Next.js nous permettra d'avoir entre les mains un vrai cadre de travail avec une architecture de dossiers pré-définie, ainsi que de créer des sites internet performants et SEO Friendly (si on le souhaite) grâce au rendu côté serveur et aux diverses fonctionnalités qui lui sont intégrées.
GraphQL va nous donner la possibilité de faire de belles requêtes à notre endpoint Hasura en installant Apollo Client (c'est le plus connu mais il existe d'autres alternatives) sur notre site web et d'avoir un système de mise en cache des requêtes.
Hasura sera notre API synchronisée en temps réel à notre base de données Postgres. Hasura nous fournira un backend sur lequel effectuer toutes nos requêtes GraphQL depuis le site web ainsi que toute la gestion de rôles.
L'objectif est aussi de créer des actions afin de déléguer notre logique métier à Hasura et des schémas distants lorsqu'il s'agit d'appels vers des services externes, de façon à avoir qu'un seul et unique endpoint à appeler.
Par exemple, si nous souhaitons effectuer un appel API à Mapbox de façon à mettre en place du forward geocoding / reverse geocoding, au lieu d'appeler cette API depuis le site web, nous allons plutôt créer un schéma distant (qui est un serveur GraphQL sur-mesure) sur lequel nous allons écrire nos fonctions et ensuite donner son URL à Hasura de façon à ce qu'il fusionne ce nouveau schéma dans notre schéma existant.
Le but est de typer notre code javascript de façon à le rendre plus strict et d'éviter les erreurs grâce à Typescript. Cependant, la rédaction des types prend du temps et CodeGen va nous permettre de les rédiger à notre place, c'est tout simplement magique. ✨
Définition selon Wikipedia :
TypeScript est un langage de programmation libre et open source développé par Microsoft qui a pour but d'améliorer et de sécuriser la production de code JavaScript. Il s'agit d'un sur-ensemble syntaxique strict de JavaScript (c'est-à-dire que tout code JavaScript correct peut être utilisé avec TypeScript). Le code TypeScript est transcompilé en JavaScript, et peut ainsi être interprété par n'importe quel navigateur web ou moteur JavaScript. TypeScript a été cocréé par Anders Hejlsberg, principal inventeur de C#.
TypeScript permet un typage statique optionnel des variables et des fonctions, la création de classes et d'interfaces, l'import de modules, tout en conservant l'approche non-contraignante de JavaScript. Il supporte la spécification ECMAScript 6.
En d'autres termes, il faut juste comprendre que c'est une surcouche à Javascript qui permet de le typer et même de le transpiler dans la version de Javascript de notre choix.
CodeGen permet de générer du code à partir de notre schéma et de nos opérations GraphQL avec une simple CLI.
Comme expliqué précédemment dans le point GraphQL : le langage de requête :
GraphQL se base sur des schémas pour connaitre le format des données qu’il va servir. Ces schémas sont décrits dans un simple fichier texte.
Et donc l'idée serait de générer les types TypeScript basés sur notre schéma GraphQL en instantané. Cela permettra de nous faire gagner beaucoup d'heures de travail car nous n'aurons pas à nous soucier de rédiger les types TypeScript et nous connaîtrons chaque type d'entrée / sortie de nos requêtes GraphQL.
Par exemple, admettons que nous ajoutons / supprimons / modifions une colonne dans la base de données, CodeGen détectera un changement dans notre schéma et re-générera automatiquement nos types.
Pour ce faire, il suffit d'installer la librairie CodeGen dans notre projet Next.js, de créer notre configuration dans le fichier codegen.yml à la racine du projet et de lancer la commande npm run codegen.
Voici un exemple de fichier codegen.yml :
Dans cet exemple nous disons à CodeGen de lire le schéma GraphQL spécifié ainsi que tous les documents GraphQL rédigés dans le dossier src et ses sous-dossiers.
La ligne 8 correspond au chemin dans lequel CodeGen va générer les types.
Les autres lignes sont des configurations supplémentaires qui permettent par exemple de dire à CodeGen d'utiliser les plugins listés.
La requête ci-dessous permet de récupérer un événement par son identifiant, il attend une variable <event_id> de type <uuid> qui est obligatoire via le <!>.
Cette requête est écrire dans un fichier <.ts> dans le projet Next.js (un sous-dossier de <src> pour correspondre à la configuration ci-dessus) et lorsque l'on va exécuter la commande <npm run codegen>, CodeGen va écrire sa génération dans <generated/graphql.tsx> (toujours par rapport à la configuration ci-dessus).
Le résultat 👌 :
CodeGen a généré le typage des variables attendues par la requête, le typage de la requête, le document, des hooks et le typage de retour sans que l'on ai à les écrire nous-même, c'est donc un gros gain de temps !
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
