Applications et avantages de GraphQL dans les applications Web modernes

GraphQL est un langage de requête API moderne largement utilisé dans les applications Web modernes car il offre un moyen efficace, flexible et puissant d'obtenir des données

Exemple d'application rapide de base GraphQL :

1. Paramètres du backend (en utilisant graphql-yoga)

Tout d'abord, nous devons créer un serveur GraphQL. Installez graphql-yoga et créez un schéma GraphQL simple :

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

2. Configuration frontale (à l'aide du client Apollo)

Ensuite, nous devons configurer Apollo Client dans l'application front-end pour communiquer avec notre serveur GraphQL :

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

3. Écrivez des composants frontaux

Maintenant, nous utilisons Apollo Client dans le composant React pour effectuer des requêtes et des mutations :

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      <h1 id="data-hello">{data.hello}</h1>
      <button onclick="{()"> addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

Nous créons une requête GET_HELLO pour obtenir le message d'accueil du serveur et l'afficher sur la page. En parallèle, nous définissons une opération de mutation ADD_MESSAGE_MUTATION, qui enverra un nouveau message au serveur lorsque l'utilisateur cliquera sur le bouton.

4. Exécutez l'application

Démarrez le serveur backend :

node server.js

Ensuite, démarrez l'application frontale, en supposant que Create React App :

npm start

Requêtes de base GraphQL

1. Langage de requête : requêtes, mutations, abonnements

Dans GraphQL, les requêtes et les mutations sont des chaînes représentées par des structures de type JSON. Voici un exemple simple :

# Query Example
query GetUser {
  user(id: 1) {
    name
    email
  }
}

# Mutation Example
mutation CreateUser {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
  }
}

# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
  newUser {
    id
    name
  }
}

Dans le code ci-dessus, la requête GetUser demande le nom et l'adresse e-mail de l'utilisateur avec l'ID utilisateur 1. La mutation CreateUser crée un nouvel utilisateur et renvoie l'ID et le nom du nouvel utilisateur. L'abonnement OnNewUser attend la création du nouvel utilisateur et renvoie les informations du nouvel utilisateur.

2. Tapez le système

Sur le backend, nous définissons un schéma GraphQL pour décrire ces types :

type User {
  id: ID!
  name: String!
  email: String!
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  newUser: User
}

Nous définissons ici un type d'objet Utilisateur, un type Mutation pour les opérations de mutation et un type Abonnement pour les opérations d'abonnement.

3. Structure de la requête : champs et paramètres

La structure de la requête se compose de champs et de paramètres. Dans l'exemple de requête ci-dessus, user est le champ, et id et email sont des sous-champs du champ user. Des paramètres tels que id : 1 sont utilisés pour personnaliser la requête.

4. Hiérarchie et imbrication

Les requêtes GraphQL peuvent être imbriquées. Voici un exemple plus complexe :

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

Cette requête interroge tous les utilisateurs et leurs publications respectives, qui incluent également des informations sur l'auteur. Les hiérarchies permettent de récupérer plusieurs niveaux de données en une seule requête.

Exemple de code client (utilisation du client Apollo)

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

Dans ce composant React, nous utilisons useQuery pour récupérer des données à partir d'un serveur GraphQL et restituer des informations sur les utilisateurs et leurs publications. C'est ainsi que les requêtes GraphQL, les systèmes de types et les hiérarchies entrent en jeu.

Schéma GraphQL

GraphQL Schema Definition Language (SDL) est un langage permettant de décrire les schémas GraphQL. Il définit les types de données, les requêtes, les mutations et les directives dans un format concis et lisible par l'homme.

Définir les types
Tout d’abord, définissons quelques types de données de base. Par exemple, définissez un type d'utilisateur et un type de publication.

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

Ici, le type d'utilisateur comporte un identifiant, un nom d'utilisateur, des champs de courrier électronique et un champ de publication qui renvoie à plusieurs publications. Le type de publication contient des champs d'identifiant, de titre, de contenu et un champ d'auteur qui pointe vers l'utilisateur.

Requête racine et racine de mutation
Ensuite, définissez les types de racine de requête GraphQL (Query) et de racine de mutation (Mutation), qui sont les points d'entrée permettant aux clients de demander des données et de modifier des données.

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      <h1 id="data-hello">{data.hello}</h1>
      <button onclick="{()"> addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

Dans le type Requête, nous définissons des requêtes pour obtenir un seul utilisateur, tous les utilisateurs, une seule publication et toutes les publications. Dans le type Mutation, nous définissons les opérations de création de nouveaux utilisateurs et de nouveaux posts.

Comprendre et utiliser les directives
Les directives sont des instructions du schéma GraphQL qui modifient le comportement d'exécution. Ils peuvent être appliqués à n'importe quelle partie de la définition du système de types, telle que les champs, les types d'entrée, les types d'objets, etc. Ce qui suit montre comment utiliser une directive @auth personnalisée pour contrôler les droits d'accès.

Tout d'abord, supposons que nous définissions une directive @auth pour restreindre l'accès à certains champs et exiger que les utilisateurs se connectent.

node server.js

Ensuite, appliquez cette directive dans le schéma :

npm start

Dans l'exemple ci-dessus, les champs de requête moi et de nom d'utilisateur sont accessibles sans autorisations spéciales, mais l'accès au champ de messagerie de l'utilisateur nécessite des autorisations d'administrateur (spécifiées par la directive @auth(requires: ADMIN)).

Applications avancées GraphQL

1. Pagination

Utilisez la pagination basée sur le curseur GraphQL pour améliorer les performances et l'expérience utilisateur.

Définition du schéma :

# Query Example
query GetUser {
  user(id: 1) {
    name
    email
  }
}

# Mutation Example
mutation CreateUser {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
  }
}

# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
  newUser {
    id
    name
  }
}

Exemple de résolveur :

type User {
  id: ID!
  name: String!
  email: String!
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  newUser: User
}

2. Gestion des erreurs

Personnalisez la gestion des erreurs pour améliorer la capacité du client à gérer les erreurs.

Exemple de résolveur :

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

3. Directives personnalisées

Créez des directives personnalisées pour mettre en œuvre une logique métier ou des exigences de sécurité spécifiques.

Définition du schéma :

import { gql, useQuery } from '@apollo/client';

const GET_USERS_AND_POSTS = gql`
  query GetUsersAndPosts {
    users {
      id
      name
      posts {
        id
        title
        content
        author {
          id
          name
        }
      }
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_USERS_AND_POSTS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :-(</p>;

  return (
    <div>
      {data.users.map(user => (
        <div key="{user.id}">
          <h2 id="user-name">{user.name}</h2>
          <ul>
            {user.posts.map(post => (
              <li key="{post.id}">
                <h3 id="post-title">{post.title}</h3>
                <p>{post.content}</p>
                <p>Author: {post.author.name}</p>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default App;

Exemple de résolveur :

type User {
  id: ID!
  username: String!
  email: String!
  posts: [Post!]!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}

Assurez-vous d'enregistrer ce gestionnaire de directives dans la configuration de votre serveur GraphQL.

4. Fédération GraphQL

La fédération permet de créer une seule API GraphQL composée de plusieurs services.

Service A Schéma :

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

Schéma du service B :

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

5. Optimisation des requêtes complexes

Utilisez le résolveur de champs et le chargeur de données de GraphQL pour optimiser les performances.

Exemple de chargeur de données :

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      <h1 id="data-hello">{data.hello}</h1>
      <button onclick="{()"> addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

Fonctionnalités et avantages de GraphQL

• Optimisation des performances : en obtenant des données à la demande, la surcharge de transmission du réseau est réduite et la vitesse de chargement des pages est améliorée.
• Réduire les erreurs : le client définit la structure de la requête et le serveur renvoie la forme attendue, réduisant ainsi les erreurs causées par une incompatibilité d'interface.
• Meilleure conception de l'API : le système de types robuste garantit la cohérence et l'exactitude des données, ce qui rend l'API plus facile à comprendre et à maintenir.
• Contrôle client : le client peut décider de la quantité de données à obtenir et du moment où les obtenir, ce qui améliore l'expérience utilisateur.
• Optimisation du cache : le client peut plus facilement mettre en œuvre des stratégies de mise en cache basées sur la structure de données renvoyée.
• Réduisez la complexité du backend : le backend n'a plus besoin de créer plusieurs points de terminaison d'API pour répondre aux besoins des différents clients.

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!