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

À propos de l'auteur

Ibrahima Ndaw est un développeur et blogueur Full-stack qui aime JavaScript et se mêle également de conception UI / UX.
En savoir plus sur
Ibrahima
…

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 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 de Next .js API Routes.

Pour tirer le meilleur parti de ce tutoriel, vous avez besoin au moins d'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, plongeons-nous dans.

Que sont les routes 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 dans le dossier pages / api comme des points de terminaison d'API. Cela signifie que, maintenant, vous pourrez accéder à votre point de terminaison API sur l'URL http: // localhost: 3000 / api / votre-nom-de-fichier .

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 construire un serveur GraphQL ? Pourquoi ne pas utiliser GraphQL ou Node.js pour ce faire? Par conséquent, comparons les routes API Next.js aux solutions existantes pour créer des API dans la section suivante.

Routes 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 routes API Next.js ont un objectif différent car les routes 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, et ainsi de suite puisqu'ils se concentrent 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-utiliser la puissance de Next.js car c'est 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 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 API Routes pour ajouter une authentification à votre application, et elle sera toujours disponible sur le point de terminaison http: // localhost: 3000 / api / your -nom-fichier . Les routes API n'augmenteront pas la taille de votre bundle côté client car ce sont uniquement des 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 Cross -En-têtes de partage de ressources d'origine (CORS) . 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 de prochaine exportation vous ne pourrez pas utiliser les routes API dans votre application.

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

Configuration

Pour démarrer une nouvelle application avec Next.js, nous allons utiliser Create Next App. 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 tutoriel, nous voulons tout faire à partir de zéro, c'est pourquoi nous utilisons Créez l'application suivante pour démarrer une nouvelle application et non le modèle de démarrage.
Maintenant, structurez le projet comme suit:

 ├── pages
| ├── api
| | ├── graphql.js
| | ├── résolveurs
| | | └── index.js
| | └── schémas
| | └── index.js
| └── index.js
├── package.json
└── yarn.lock

Comme nous l'avons dit précédemment, le dossier api est l'endroit où réside notre API ou 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 final du serveur sera accessible sur le chemin / api / graphql qui est le point d'entrée du serveur GraphQL.

Avec cette étape en avant, 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 graphe de données.

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

 yarn add apollo-server-micro 

For npm

 npm install apollo-server-micro 

Maintenant, créons un nouveau schéma GraphQL. [19659006] Dans api / schemas / index.js

 import {gql} de "apollo-server-micro";

export const typeDefs = gql`
    type User {
        J'ai fait
        login: Chaîne
        avatar_url: Chaîne
    }

    type Requête {
        getUsers: [User]
        getUser (nom: String!): Utilisateur!
    } `

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 [19659003] Un résolveur GraphQL est un ensemble de fonctions qui permettent 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 dans le fichier des résolveurs.

Dans api / resolvers / index.js

 importez axios de "axios";

résolveurs de const export = {
  Requete: {
    getUsers: async () => {
      essayez {
        utilisateurs const = attendre axios.get ("https://api.github.com/users");
        return users.data.map (({id, login, avatar_url}) => ({
          id,
          s'identifier,
          avatar_url
        }));
      } catch (erreur) {
        lancer une erreur;
      }
    },
    getUser: async (_, args) => {
      essayez {
        const user = attendre axios.get (
          `https://api.github.com/users/$ {args.name}`
        );
        revenir {
          id: user.data.id,
          connexion: user.data.login,
          avatar_url: user.data.avatar_url
        };
      } catch (erreur) {
        lancer une erreur;
      }
    }
  }
}; 

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 devant 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 ceci en place, nous avons maintenant un schéma GraphQL et un résolveur GraphQL – c'est il est temps de les combiner et de construire le serveur GraphQL.

Créer le serveur GraphQL

Un serveur GraphQL expose vos données comme une 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} de "apollo-server-micro";
import {typeDefs} de "./schemas";
import {résolveurs} de "./resolvers";

const apolloServer = new ApolloServer ({typeDefs, résolveurs});

export const config = {
    api: {
        bodyParser: faux
    }
};

export default apolloServer.createHandler ({path: "/ api / graphql"}); 

Après avoir importé 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 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 repose sur le rendu côté serveur. C'est pourquoi, ici, nous n'avons pas besoin de démarrer le serveur GraphQL nous-mêmes.

Super! Avec ce pas en avant, nous pouvons maintenant tester si le serveur GraphQL fonctionne.

Test du serveur GraphQL

Une fois que vous naviguez jusqu'à 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 à récupère tous les utilisateurs de Github.

 {
  getUsers {
    id
    s'identifier
    avatar_url
  }
} 

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

 query ($ name: String!) {
  getUser (nom: $ name) {
        s'identifier
    id
    avatar_url
  }
} 

Génial! Notre serveur fonctionne comme prévu. Nous avons fini de créer un serveur GraphQL en utilisant les routes API Next.js.

Conclusion

Dans ce didacticiel, nous avons parcouru les routes API Next.js en expliquant d'abord ce qu'elles sont, puis en construisant 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 [19659077] Ces ressources utiles vous mèneront au-delà de la portée de ce didacticiel.

(ks, ra, yk, il)