GraphQL en TypeScript : Bibliothèques pour des API typés sécurisés

GraphQL en TypeScript : Aperçu complet des bibliothèques et outils

GraphQL et TypeScript sont une combinaison idéale pour créer des API modernes. TypeScript ajoute un typage statique qui s'intègre parfaitement au système de typage strict de GraphQL. Dans cet article, nous allons passer en revue les principales bibliothèques et outils pour travailler avec GraphQL en TypeScript, y compris l'installation, des exemples de code et les meilleures pratiques.

Pourquoi TypeScript pour GraphQL ?

Les requêtes et réponses GraphQL ont une structure stricte, et TypeScript permet de vérifier cette structure au moment de la compilation. Cela élimine toute une classe d'erreurs liées à des types de données incorrects. Les principaux avantages :

• Sécurité des types — génération automatique de types à partir du schéma GraphQL
• Autocomplétion — l'IDE suggère les champs et les types de requêtes
• Refactorisation — la modification du schéma met automatiquement à jour toutes les requêtes client
• Minimisation des erreurs — les erreurs de type sont détectées avant l'exécution du code

Bibliothèques principales pour le côté serveur

1. TypeGraphQL

TypeGraphQL est la bibliothèque la plus populaire pour créer des API GraphQL en TypeScript. Elle utilise des décorateurs pour définir le schéma et les résolveurs.

Installation :

npm install type-graphql graphql reflect-metadata

Exemple de déclaration de type et de résolveur :

import { ObjectType, Field, Int, Resolver, Query, Arg } from "type-graphql";

@ObjectType()class User {  @Field(() => Int)  id: number;

  @Field()  name: string;

  @Field({ nullable: true })  email?: string;}

@Resolver(User)class UserResolver {  @Query(() => User, { nullable: true })  async user(@Arg("id", () => Int) id: number): Promise<User | null> {    // Logique de récupération de l'utilisateur depuis la base de données    return { id, name: "John", email: "john@example.com" };  }}

Construction du schéma :

import { buildSchema } from "type-graphql";

const schema = await buildSchema({  resolvers: [UserResolver],  emitSchemaFile: true,});

2. GraphQL Yoga

GraphQL Yoga est un serveur GraphQL universel qui fonctionne parfaitement avec TypeScript. Il est basé sur Express, mais prend en charge toutes les plateformes.

Installation :

npm install graphql-yoga graphql

Exemple de serveur :

import { createYoga, createSchema } from "graphql-yoga";import { createServer } from "node:http";

const schema = createSchema({  typeDefs: `    type Query {      hello: String      user(id: Int!): User    }    type User {      id: Int!      name: String    }  `,  resolvers: {    Query: {      hello: () => "Hello, GraphQL!",      user: (_, { id }) => ({ id, name: "Alice" }),    },  },});

const yoga = createYoga({ schema });const server = createServer(yoga);server.listen(4000, () => console.log("Serveur en cours d'exécution sur http://localhost:4000/graphql"));

Bibliothèques pour le côté client

3. Apollo Client (avec prise en charge de TypeScript)

Apollo Client est un client puissant pour travailler avec GraphQL. Avec TypeScript, il offre un typage complet des requêtes.

Installation :

npm install @apollo/client graphql

Exemple de requête typée :

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

const GET_USER = gql`  query GetUser($id: Int!) {    user(id: $id) {      id      name      email    }  }`;

interface UserData {  user: {    id: number;    name: string;    email?: string;  };}

function UserProfile({ userId }: { userId: number }) {  const { loading, data } = useQuery<UserData>(GET_USER, {    variables: { id: userId },  });

  if (loading) return <p>Chargement...</p>;  return <p>{data?.user.name}</p>;}