Démarrer mon projet
Développer une application avec une API GraphQL a de nombreux avantages :
Utiliser GraphQL du côté client, peut déjà vous faire gagner du temps lors du développement.
Dans cette série nous allons découvrir plusieurs outils qui vous permettront d’avoir une meilleure expérience utilisateur, en utilisant GraphQL.
Aujourd’hui nous allons voir comment générer les types de vos queries et mutations pour utiliser l’autocompletion, avec Typescript et le paquet @graphql-codegen/cli.
Nous avons initialisé une simple application Next.js, avec typescript, mais également un fichier index.js, à l’aide d’apollo-server, pour lancer une API GraphQL sur localhost:4000.
$ npm install @graphql-codegen/cli
$ yarn add @graphql-codegen/cli
Il faudra ensuite initialiser le paquet en utilisant la commande
$ graphql-codegen init
Ou en créant le fichier codegen.yml ci-dessous :
Le paramètre schema ci-dessus, est l’adresse de votre schema GraphQL. Le nôtre sera sur l’adresse localhost:4000
Le paramètre documents ci-dessus, est l’emplacement de vos queries et mutations : elles peuvent être toutes dans le même dossier ou bien séparées dans chaque fichier, selon votre architecture.
Le paramètre generates ci-dessus, est l’emplacement ou seront crées les types : dans notre cas, le fichier ./generated/graphql.tsx. Il faut également préciser les plugins que vous voulez utiliser. Dans notre cas, simple configuration typescript avec react-apollo et uniquement withHooks.
Avant de commencer, assurez vous d’avoir lancé votre serveur GraphQL sur le port 4000 avec la commande
$ node index.js
Pour générer tous les types de vos queries et mutations, il vous suffira d’une simple commande :
$ graphql-codegen --config codegen.yml
Comme à notre habitude, Nous avons ajouté une commande npm dans le package.json pour lancer graqhql-codegen plus facilement :
Ce qui nous permet de générer les types avec la commande :
$ npm run codegen
$ yarn codegen
Tous les types, queries et mutations utilisés dans votre application ont maintenant été crées dans le fichier ./generated/graphql.tsx.
Dans notre exemple /pages/index.tsx, nous pouvons désormais utiliser notre query BOOKSQUERY, qui se situe dans le dossier ./graphql/queries/books_query.tsx.
Vous avez désormais l’auto-complétion sur toutes les données récupérées depuis votre serveur !
Si vos données sont susceptible d’être nulles, votre éditeur pourra vous l’indiquer et vous demander de vérifier la variable avant de l’utiliser.
Cette outil nous as fais gagner un temps conséquent sur nos développements web et mobile, ainsi qu’une meilleure experience développeur.
Cette série continuera avec d’autres outils facilitant la vie des développeurs GraphQL !
.svg)
