Article original : ⚡ How to Add a GraphQL Server to a RESTful Express.js API in 2 Minutes

Par Khalil Stemmler

On peut faire beaucoup de choses en 2 minutes, comme faire éclater du pop-corn au micro-ondes, envoyer un message texte, manger un cupcake, et configurer un serveur GraphQL.

Oui. Si vous avez une ancienne API RESTful Express.js qui traîne ou si vous êtes intéressé à adopter progressivement GraphQL, nous n'avons besoin que de 2 minutes pour la configurer avec un tout nouveau serveur GraphQL.

Prêt ? À vos marques. Partez !

Disons que votre serveur ressemble à quelque chose comme ceci.

import express from 'express';
import { apiRouter } from './router';

const app = express();
const port = process.env.PORT || 5000;

// Routes existantes pour notre application Express.js
app.use('/api/v1', apiRouter);

app.listen(port, () => console.log(`[App]: Listening on port ${port}`))

À la racine de votre projet, npm install apollo-server-express comme dépendance.

npm install apollo-server-express --save

Allez là où votre application Express est définie et importez ApolloServer et gql depuis apollo-server-express.

import { ApolloServer, gql } from 'apollo-server-express'

Ensuite, créez une instance d'un ApolloServer avec les définitions de types et les résolveurs les plus simples possibles en GraphQL.

const server = new ApolloServer({
  typeDefs: gql`
    type Query {
      hello: String
    }
  `,
  resolvers: {
    Query: {
      hello: () => 'Hello world!',
    },
  }
})

Enfin, utilisez la méthode applyMiddleware de ApolloServer pour passer notre serveur Express.js.

server.applyMiddleware({ app })

Boom. C'est tout !

Votre code devrait ressembler à quelque chose comme ceci.

import express from 'express';
import { v1Router } from './api/v1';
import { ApolloServer, gql } from 'apollo-server-express'

const app = express();
const port = process.env.PORT || 5000;

const server = new ApolloServer({
  typeDefs: gql`
    type Query {
      hello: String
    }
  `,
  resolvers: {
    Query: {
      hello: () => 'Hello world!',
    },
  }
})

server.applyMiddleware({ app })

app.use('/api/v1', v1Router);

app.listen(port, () => {
  console.log(`[App]: Listening on port ${port}`)
})

Si vous naviguez vers localhost:5000/graphql, vous devriez pouvoir voir votre schéma GraphQL dans le bac à sable GraphQL.

Alt Text

Remarque : Si vous souhaitez changer l'URL où se trouve le point de terminaison GraphQL de /graphql à autre chose, vous pouvez passer une option path à server.applyMiddleware() avec l'URL que vous souhaitez, comme path: '/specialUrl'. Consultez la documentation pour une utilisation complète de l'API.

À quel point c'était simple ? Votre pop-corn est-il prêt ? ?

Résumé

Voici ce que nous avons fait.

  1. Installer apollo-server-express
  2. Créer un new ApolloServer
  3. Connecter votre serveur GraphQL avec server.applyMiddleware

J'aime personnellement le fait que Apollo Server soit non intrusif et puisse être ajouté à n'importe quel projet comme une alternative pour communiquer entre les services et les applications.

Où aller à partir d'ici

Si vous êtes nouveau dans Apollo et GraphQL, une excellente façon d'apprendre est de construire quelque chose en vrai. Pour cette raison, je vous recommande vivement de consulter le Tutoriel Fullstack Apollo (vous pouvez aussi apprendre en TypeScript maintenant ?).

Je suis Khalil Stemmler, un Développeur Advocate chez Apollo GraphQL. J'enseigne les meilleures pratiques avancées de TypeScript, GraphQL et Node.js pour les applications à grande échelle. N'hésitez pas à me contacter sur Twitter si vous avez besoin d'aide pour quoi que ce soit lié à Apollo, TypeScript ou l'architecture. Santé ?