Comment créer un serveur GraphQL à l'aide des routes d'API Next.js

Next.js vous offre la meilleure expérience de développeur avec toutes les fonctionnalités dont vous avez besoin pour la production. Il fournit une solution simple pour créer votre API à l'aide des routes d'API Next.js.

Dans ce guide, nous apprendrons d'abord ce que sont les routes d'API, puis créerons un serveur GraphQL qui récupère les données de l'API Github à l'aide des routes d'API Next.js.

Pour tirer le meilleur parti de ce didacticiel, vous avez besoin d'au moins une compréhension de base de GraphQL. La connaissance d'Apollo Server serait utile mais n'est pas obligatoire. Ce didacticiel profitera à ceux qui souhaitent étendre leurs compétences React ou Next.js côté serveur et pouvoir également créer leur première application full-stack avec Next.js et GraphQL.

Alors, plongeons dedans.

Que sont les routes d'API Next.js ?

Next.js est un framework qui permet de rendre les applications React sur le client ou/et le serveur. Depuis la version 9, Next.js peut désormais être utilisé pour créer des API avec Node.js, Express, GrapQL, etc. Next.js utilise le système de fichiers pour traiter les fichiers à l'intérieur du dossier pages/api en tant que points de terminaison de l'API. Cela signifie que, désormais, vous pourrez accéder à votre point de terminaison API sur l'URL https://localhost:3000/api/your-file-name .

Si vous venez de React et que vous n'avez jamais utilisé Next.js, cela peut prêter à confusion car Next.js est un framework React. Et comme nous le savons déjà, React est utilisé pour créer des applications frontales. Alors pourquoi utiliser Next.js pour les applications backend et les API ?

Eh bien, Next.js peut être utilisé à la fois côté client et côté serveur car il est construit avec React, Node.js, Babel et Webpack, et évidemment, il devrait également être utilisable sur le serveur. Next.js s'appuie sur le serveur pour activer les API Routes et vous permet d'utiliser votre langage backend préféré même s'il s'agit techniquement d'un framework React. J'espère que vous avez raison.

Jusqu'à présent, nous avons appris ce que sont les API Routes. Cependant, la vraie question demeure : pourquoi utiliser Next.js pour construire un serveur GraphQL ? Pourquoi ne pas utiliser GraphQL ou Node.js pour le faire ? Alors, comparons les itinéraires d'API Next.js aux solutions existantes pour créer des API dans la section suivante.

Routes API Next.js versus REST et GraphQL

GraphQL et REST sont d'excellents moyens de créer des API. Ils sont très populaires et utilisés par presque tous les développeurs de nos jours. Alors, pourquoi utiliser un framework React pour créer des API ? Eh bien, la réponse rapide est que les routes d'API Next.js ont un objectif différent, car les routes d'API vous permettent d'étendre votre application Next.js en y ajoutant un backend.

Il existe de meilleures solutions pour créer des API telles que Node.js, Express, GraphQL, etc., car elles se concentrent sur le backend. À mon avis, les API Routes doivent être couplées à un côté client pour créer une application complète avec Next.js. Utiliser les API Routes pour créer une API simple revient à sous-utiliser la puissance de Next.js, car il s'agit d'un framework React qui vous permet d'y ajouter un backend en un rien de temps.

Considérez le cas d'utilisation lorsque vous devez ajouter une authentification à une application suivante existante. Au lieu de créer la partie d'authentification à partir de zéro avec Node.js ou GraphQL, vous pouvez utiliser des API Routes pour ajouter une authentification à votre application, et elle sera toujours disponible sur le point de terminaison https://localhost:3000/api/your-file-name . Les routes d'API n'augmenteront pas la taille de votre bundle côté client car ce sont des bundles uniquement côté serveur.

Cependant, les routes d'API Next.js ne sont accessibles qu'au sein de la même origine, car les routes d'API ne spécifient pas d'en-têtes CORS (Cross-Origin Resource Sharing). Vous pouvez toujours modifier le comportement par défaut en ajoutant CORS à votre API, mais il s'agit d'une configuration supplémentaire. Si vous générez votre application suivante de manière statique à l'aide next export , vous ne pourrez pas utiliser les routes d'API dans votre application.

Jusqu'à présent, nous avons appris quand API Routes pourrait être une meilleure solution par rapport à d'autres. Maintenant, mettons les mains dans le cambouis et commençons à construire notre serveur GraphQL.

Mise en place

Pour démarrer une nouvelle application avec Next.js, nous allons opter pour Create Next App. Il est également possible de configurer manuellement une nouvelle application avec Webpack. Vous êtes plus que bienvenu pour le faire. Cela étant dit, ouvrez votre interface de ligne de commande et exécutez cette commande :

 npx create-next-app next-graphql-server

Next.js fournit un modèle de démarrage pour les routes d'API. Vous pouvez l'utiliser en exécutant la commande suivante :

 npx create-next-app --example api-routes api-routes-app

Dans ce didacticiel, nous voulons tout faire à partir de zéro, c'est pourquoi nous utilisons Create Next App pour démarrer une nouvelle application et non le modèle de démarrage. Maintenant, structurez le projet comme suit :

 ├── pages | ├── api | | ├── graphql.js | | ├── resolvers | | | └── index.js | | └── schemas | | └── index.js | └── index.js ├── package.json └── yarn.lock

Comme nous l'avons dit précédemment, le dossier api est l'endroit où se trouve notre API ou notre serveur. Puisque nous allons utiliser GraphQL, nous avons besoin d'un résolveur et d'un schéma pour créer un serveur GraphQL. Le point de terminaison du serveur sera accessible sur le chemin /api/graphql , qui est le point d'entrée du serveur GraphQL.

Avec cette avancée, nous pouvons maintenant créer le schéma GraphQL pour notre serveur.

Créer les schémas GraphQL

Pour récapituler rapidement, un schéma GraphQL définit la forme de votre graphique de données.

Ensuite, nous devons installer apollo-server-micro pour utiliser Apollo Server dans Next.js.

 yarn add apollo-server-micro

Pour npm

 npm install apollo-server-micro

Maintenant, créons un nouveau schéma GraphQL.

Dans api/schemas/index.js

 import { gql } from "apollo-server-micro"; export const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { getUsers: [User] getUser(name: String!): User! }`

Ici, nous définissons un type User qui décrit la forme d'un utilisateur Github. Il attend un id de type ID , un login et un avatar_url de type String. Ensuite, nous utilisons le type sur la requête getUsers qui doit renvoyer un tableau d'utilisateurs. Ensuite, nous nous appuyons sur la requête getUser pour récupérer un seul utilisateur. Il doit recevoir le nom de l'utilisateur afin de le récupérer.

Avec ce schéma GraphQL créé, nous pouvons maintenant mettre à jour le fichier de résolution et créer les fonctions pour effectuer ces requêtes ci-dessus.

Créer les résolveurs GraphQL

Un résolveur GraphQL est un ensemble de fonctions qui vous permet de générer une réponse à partir d'une requête GraphQL.

Pour demander des données à l'API Github, nous devons installer la bibliothèque axios . Alors, ouvrez votre CLI et exécutez cette commande :

 yarn add axios

Ou lors de l'utilisation de npm

 npm install axios

Une fois la bibliothèque installée, ajoutons maintenant du code significatif au fichier des résolveurs.

Dans api/resolvers/index.js

 import axios from "axios"; export const resolvers = { Query: { getUsers: async () => { try { const users = await axios.get("https://api.github.com/users"); return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url })); } catch (error) { throw error; } }, getUser: async (_, args) => { try { const user = await axios.get( `https://api.github.com/users/${args.name}` ); return { id: user.data.id, login: user.data.login, avatar_url: user.data.avatar_url }; } catch (error) { throw error; } } } };

Comme vous pouvez le voir ici, nous faisons correspondre le nom des requêtes défini précédemment sur le schéma GraphQL avec les fonctions de résolution. La fonction getUsers nous permet de récupérer tous les utilisateurs de l'API, puis de renvoyer un tableau d'utilisateurs qui doit refléter le type User . Ensuite, nous utilisons la méthode getUser pour récupérer un seul utilisateur à l'aide du nom passé en paramètre.

Avec cela en place, nous avons maintenant un schéma GraphQL et un résolveur GraphQL - il est temps de les combiner et de construire le serveur GraphQL.

Créer le serveur GraphQL

Un serveur GraphQL expose vos données en tant qu'API GraphQL. Il donne aux applications clientes le pouvoir de demander exactement les données dont elles ont besoin et rien de plus.

Dans api/graphql.js

 import { ApolloServer } from "apollo-server-micro"; import { typeDefs } from "./schemas"; import { resolvers } from "./resolvers"; const apolloServer = new ApolloServer({ typeDefs, resolvers }); export const config = { api: { bodyParser: false } }; export default apolloServer.createHandler({ path: "/api/graphql" });

Après avoir importé ApolloServer , nous l'utilisons pour créer une nouvelle instance, puis transmettons le schéma et le résolveur pour créer un serveur GraphQL. Ensuite, nous devons dire à Next.js de ne pas analyser la requête entrante et de laisser GraphQL la gérer pour nous. Enfin, nous utilisons apolloServer pour créer un nouveau gestionnaire, ce qui signifie que le chemin /api/graphql servira de point d'entrée pour notre serveur GraphQL.

Contrairement au serveur Apollo classique, Next.js gère le démarrage du serveur pour nous car il s'appuie sur le rendu côté serveur. C'est pourquoi, ici, nous n'avons pas à démarrer le serveur GraphQL par nous-mêmes.

Génial! Avec cette avancée, nous pouvons maintenant tester si le serveur GraphQL fonctionne.

Testez le serveur GraphQL

Une fois que vous accédez à la racine du projet, ouvrez-le sur la CLI, puis exécutez cette commande :

 yarn dev

Ou pour npm

 npm run dev

Maintenant, visitez https://localhost:3000/api/graphql et ajoutez la requête GraphQL ci-dessous pour récupérer tous les utilisateurs de Github.

 { getUsers { id login avatar_url } }

Vérifions si nous pouvons récupérer un seul utilisateur avec cette requête.

 query($name: String!){ getUser(name:$name){ login id avatar_url } }

Génial! Notre serveur fonctionne comme prévu. Nous avons terminé la construction d'un serveur GraphQL à l'aide des routes d'API Next.js.

Conclusion

Dans ce didacticiel, nous avons parcouru les itinéraires de l'API Next.js en expliquant d'abord ce qu'ils sont, puis en créant un serveur GraphQL avec Next.js. La possibilité d'ajouter un backend aux applications Next.js est une fonctionnalité vraiment intéressante. Cela nous permet d'étendre nos applications avec un vrai backend. Vous pouvez même aller plus loin et connecter une base de données pour créer une API complète à l'aide d'API Routes. Next.js facilite définitivement la création d'une application complète avec les API Routes.

Vous pouvez prévisualiser le projet fini sur CodeSandbox.

Merci d'avoir lu!

Autres ressources

Ces ressources utiles vous mèneront au-delà de la portée de ce didacticiel.

• Présentation des routes d'API (Next.js 9)
• Itinéraires d'API Next.js
• Intergiciel de routage d'API