Catégories
Astuces et Design

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

A propos de l'auteur

Ibrahima Ndaw est un développeur et blogueur Full-stack qui adore JavaScript et se penche également sur la conception UI / UX.
Plus à propos
Ibrahima

Ce guide vous apprendra les bases des routes API Next.js. Nous commencerons par expliquer ce qu'ils sont et pourquoi les routes API sont utiles par rapport aux API REST ou GraphQL. Ensuite, nous vous guiderons à travers un tutoriel étape par étape sur la façon de créer votre tout premier serveur GraphQL avec Next.js et l'API Github.

Next.js vous offre la meilleure expérience de développement 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 allons d'abord apprendre ce que sont les routes API, puis créer un serveur GraphQL qui récupère les données de l'API Github à l'aide des routes 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 profiterait à ceux qui souhaitent étendre leurs compétences React ou Next.js côté serveur et être en mesure de créer également leur première application full-stack avec Next.js et GraphQL.

Alors, allons-y.

Que sont les routes d'API Next.js?

Next.js est un framework qui permet le rendu des 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 d'API. Ce qui signifie que, maintenant, vous pourrez accéder à votre point de terminaison API sur l'URL http://localhost:3000/api/your-file-name.

Si vous venez de React et n'avez jamais utilisé Next.js, cela peut être déroutant 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 itinéraires d'API et vous permet d'utiliser votre langage de backend préféré même s'il s'agit techniquement d'un framework React. J'espère que vous avez bien compris.

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

Itinéraires d'API Next.js par rapport à 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 itinéraires d'API Next.js ont un objectif différent car les itinéraires d'API vous permettent d'étendre votre application Next.js en lui ajoutant un backend.

Il existe de meilleures solutions pour créer des API telles que Node.js, Express, GraphQL, etc., car elles sont axées sur le backend. À mon avis, les routes d'API devraient être associées à un côté client pour créer une application complète avec Next.js. Utiliser les routes API pour créer une API simple revient à sous-exploiter 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 auth à partir de zéro avec Node.js ou GraphQL, vous pouvez utiliser les routes API pour ajouter une authentification à votre application, et elle sera toujours disponible sur le point de terminaison http://localhost:3000/api/your-file-name. Les itinéraires API n'augmenteront pas la taille de votre bundle côté client, car il s'agit uniquement de bundles côté serveur.

Cependant, les routes API Next.js ne sont accessibles que dans la même origine car les routes 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 Next App de manière statique en utilisant next export – vous ne pourrez pas utiliser les itinéraires API dans votre application.

Jusqu'à présent, nous avons appris à quel moment les routes API pourraient être une meilleure solution par rapport à des solutions similaires. Maintenant, mettons la main à la pâte et commençons à créer notre serveur GraphQL.

Mise en place

Pour démarrer une nouvelle application avec Next.js, nous allons créer une application suivante. Il est également possible de configurer manuellement une nouvelle application avec Webpack. Vous êtes plus que bienvenu de 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 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 plus tôt, le api Le dossier est l'endroit où réside 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 User type qui décrit la forme d'un utilisateur Github. Il attend un id de type ID, une login, Et un avatar_url de type String. Ensuite, nous utilisons le type sur le getUsers requête qui doit renvoyer un tableau d'utilisateurs. Ensuite, nous nous appuyons sur le getUser requête pour récupérer un seul utilisateur. Il doit recevoir le nom de l'utilisateur pour pouvoir le récupérer.

Avec ce schéma GraphQL créé, nous pouvons maintenant mettre à jour le fichier du résolveur 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 le axios bibliothèque. Alors, ouvrez votre CLI et exécutez cette commande:

yarn add axios

Ou lors de l'utilisation npm

npm install axios

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

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. le getUsers La fonction nous permet de récupérer tous les utilisateurs de l'API, puis de renvoyer un tableau d'utilisateurs qui doivent refléter le User type. Ensuite, nous utilisons le getUser méthode 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 l'importation ApolloServer, nous l'utilisons pour créer une nouvelle instance puis passons 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 le chemin /api/graphql servira de point d'entrée pour notre serveur GraphQL.

Contrairement à Apollo Server classique, Next.js gère le démarrage du serveur pour nous car il repose 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.

Tester 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 http://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
  }
}
get-all-users
get-all-users. (Grand aperçu)

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
  }
}
get-user
get-user. (Grand aperçu)

Génial! Notre serveur fonctionne comme prévu. Nous avons terminé la construction d'un serveur GraphQL en utilisant les routes API Next.js.

Conclusion

Dans ce didacticiel, nous avons parcouru les routes d'API Next.js en expliquant d'abord ce qu'elles 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 véritable backend. Vous pouvez même aller plus loin et connecter une base de données pour créer une API complète à l'aide des routes API. Next.js facilite définitivement la création d'une application complète avec les routes API.

Vous pouvez prévisualiser le projet terminé sur CodeSandbox.

Merci d'avoir lu!

Autres ressources

Ces ressources utiles vous feront sortir du cadre de ce didacticiel.

Éditorial fracassant(ks, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *