Développement d'API transformant GraphQL

Présentation

Les applications Web modernes exigent une récupération de données efficace et flexible. GraphQL, langage de requête révolutionnant le développement d’API, répond à ce besoin. Depuis ses débuts par Facebook en 2015, l'adoption généralisée de GraphQL prouve sa valeur au-delà d'une tendance passagère.

Comprendre les principes fondamentaux de GraphQL

GraphQL est un langage de requête et un environnement d'exécution API. Contrairement aux API REST traditionnelles, où le serveur dicte la structure de réponse, GraphQL permet aux clients de demander des données précises avec des requêtes uniques. Cela résout de nombreux défis de développement d'applications modernes.

Imaginez un bibliothécaire compétent qui trouve rapidement n'importe quel livre. Au lieu de rechercher plusieurs étagères (plusieurs points de terminaison d'API), vous fournissez une demande détaillée et le bibliothécaire renvoie exactement ce dont vous avez besoin : ni plus, ni moins.

La nature basée sur le schéma de GraphQL crée un contrat client-serveur clair. Chaque service GraphQL définit des types de données, permettant la validation du schéma avant l'exécution pour des réponses prévisibles et cohérentes.

Fondements techniques

GraphQL utilise trois opérations principales : les requêtes (récupération de données), les mutations (modification des données) et les abonnements (mises à jour en temps réel). Un système de type robuste sous-tend chaque opération, définissant les capacités de l'API.

<code>type User {
  id: ID!
  name: String!
  email: String!
  posts: [Post!]!
  friends: [User!]!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
  comments: [Comment!]!
  createdAt: String!
}

type Comment {
  id: ID!
  text: String!
  author: User!
  post: Post!
}</code>

Le schéma définit des relations, permettant la récupération de données imbriquées (par exemple, les publications ou les amis d'un utilisateur) dans une seule requête.

Résolveurs : le cœur de GraphQL

La puissance de GraphQL réside dans ses fonctions de résolution. Ces fonctions récupèrent les données pour chaque champ de schéma. Les résolveurs peuvent récupérer des données à partir de bases de données, appeler d'autres API ou effectuer des calculs complexes, le tout transparent pour le client.

Exemples de résolveurs (utilisant Prisma)

Voici comment implémenter des résolveurs pour récupérer les publications et les amis d'un utilisateur à l'aide de Prisma :

<code>const resolvers = {
  User: {
    async posts(parent, args, context) {
      const posts = await context.prisma.post.findMany({
        where: { authorId: parent.id },
        orderBy: { createdAt: 'desc' },
      });
      return posts;
    },
    async friends(parent, args, context) {
      const friends = await context.prisma.user.findMany({
        where: {
          id: { in: parent.friendIds },
        },
      });
      return friends;
    },
  },
};</code>

Ces résolveurs récupèrent efficacement les données uniquement sur demande.

L'évolution du développement d'API

Vous vous souvenez de l'époque des API REST uniquement ? Plusieurs points de terminaison ont renvoyé des structures de données fixes. Cela fonctionnait pour des applications simples, mais devenait compliqué à mesure que la complexité augmentait. Les clients mobiles et Web avaient besoin de données différentes, ce qui entraînait plusieurs appels d'API.

Résoudre le problème de requête N 1

Le problème de requête N 1 (récupération de données associées avec plusieurs requêtes de base de données) est un défi important pour l'API. La capacité de GraphQL à regrouper et à optimiser les requêtes à l'aide de DataLoader et d'outils similaires change la donne en termes de performances.

Exemple d'implémentation (DataLoader) :

La récupération des données associées conduit souvent au problème N1. GraphQL résout ce problème avec des outils tels que DataLoader, le traitement par lots et la mise en cache des appels de base de données :

<code>type User {
  id: ID!
  name: String!
  email: String!
  posts: [Post!]!
  friends: [User!]!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
  comments: [Comment!]!
  createdAt: String!
}

type Comment {
  id: ID!
  text: String!
  author: User!
  post: Post!
}</code>

Cela minimise les requêtes de base de données en regroupant les requêtes, améliorant considérablement les performances.

Histoires de réussite réelles

• Interface utilisateur dynamique de Netflix : Netflix utilise GraphQL pour les interfaces utilisateur dynamiques sur tous les appareils, récupérant des informations précises sur l'émission en fonction du contexte.
• La révolution de l'API de GitHub : Le passage de l'API v4 de GitHub à GraphQL a réduit la taille de la charge utile des réponses et augmenté la flexibilité des développeurs.

Implémentation de GraphQL avec Node.js et Apollo Server

Voici une mise en œuvre pratique :

1. Installer les dépendances : npm install @apollo/server graphql

2. Définissez votre schéma :

<code>const resolvers = {
  User: {
    async posts(parent, args, context) {
      const posts = await context.prisma.post.findMany({
        where: { authorId: parent.id },
        orderBy: { createdAt: 'desc' },
      });
      return posts;
    },
    async friends(parent, args, context) {
      const friends = await context.prisma.user.findMany({
        where: {
          id: { in: parent.friendIds },
        },
      });
      return friends;
    },
  },
};</code>

3. Ajouter des résolveurs :

<code>const DataLoader = require('dataloader');

const userLoader = new DataLoader(async (userIds) => {
  const users = await prisma.user.findMany({
    where: {
      id: { in: userIds },
    },
  });
  return userIds.map(id => users.find(user => user.id === id));
});

const resolvers = {
  Post: {
    async author(parent) {
      return userLoader.load(parent.authorId);
    },
  },
};</code>

4. Démarrez le serveur :

<code>const typeDefs = `#graphql
type Query {
  hello: String
}`;</code>

Optimisation des performances grâce à la sélection de champs (Prisma)

GraphQL optimise les requêtes de base de données en fonction des champs demandés :

<code>const resolvers = {
  Query: {
    hello: () => "Hello, GraphQL!",
  },
};</code>

Cela récupère uniquement les données nécessaires, réduisant ainsi les frais généraux.

L'avenir de GraphQL

• Apollo Federation : Permet de diviser les schémas GraphQL sur plusieurs services tout en présentant une API unifiée.
• Fonctionnalités en temps réel avec abonnements : Permet des mises à jour en temps réel pour les notifications en direct et les applications collaboratives. Exemple utilisant graphql-subscriptions :

<code>const { ApolloServer } = require('@apollo/server');

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
  console.log(`? Server ready at ${url}`);
});</code>

Premiers pas avec GraphQL

L'adoption progressive de GraphQL est un avantage clé. Commencez par l'implémenter aux côtés des API REST existantes, peut-être en tant que couche proxy. Cela minimise les risques tout en réalisant les avantages.

Conclusion

GraphQL est un changement de paradigme dans la récupération de données et la communication client-serveur. Sa flexibilité et son efficacité deviennent de plus en plus cruciales à mesure que les applications se développent. Considérez GraphQL pour améliorer les performances, l'expérience des développeurs et la satisfaction des utilisateurs. Commencez par de petites expériences et élargissez progressivement son utilisation. La communauté et l'écosystème florissants constituent le moment idéal pour intégrer GraphQL dans votre pile de développement.

Références

1. Documentation officielle de GraphQL
2. Plateforme Apollo GraphQL
3. Netflix Engineering - Fédération GraphQL
4. Étude de cas de l'API GitHub GraphQL
5. Meilleures pratiques GraphQL

À propos de l'auteur

Ivan Duarte est un développeur backend indépendant passionné par le développement Web et l'IA.

Abonnez-vous à notre newsletter

Lisez les articles de ByteUp directement dans votre boîte de réception. Abonnez-vous maintenant !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!