GraphQL en TypeScript: Bibliotecas para API tiposeguras

GraphQL en TypeScript: Revisión completa de bibliotecas y herramientas

GraphQL y TypeScript son la combinación ideal para crear API modernas. TypeScript añade tipificación estática, que encaja perfectamente con el estricto sistema de tipos de GraphQL. En este artículo, analizaremos las principales bibliotecas y herramientas para trabajar con GraphQL en TypeScript, incluyendo instalación, ejemplos de código y mejores prácticas.

¿Por qué TypeScript para GraphQL?

Las consultas y respuestas de GraphQL tienen una estructura estricta, y TypeScript permite verificar esa estructura en tiempo de compilación. Esto elimina toda una clase de errores relacionados con tipos de datos incorrectos. Las principales ventajas:

• Tiposeguridad — generación automática de tipos a partir del esquema GraphQL
• Autocompletado — el IDE sugiere campos y tipos de consultas
• Refactorización — cambiar el esquema actualiza automáticamente todas las consultas del cliente
• Minimización de errores — los errores de tipo se detectan antes de ejecutar el código

Principales bibliotecas para el lado del servidor

1. TypeGraphQL

TypeGraphQL es la biblioteca más popular para crear API GraphQL en TypeScript. Utiliza decoradores para definir el esquema y los resolvers.

Instalación:

npm install type-graphql graphql reflect-metadata

Ejemplo de declaración de tipo y resolver:

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> {    // Lógica para obtener usuario de la BD    return { id, name: "John", email: "john@example.com" };  }}

Construcción del esquema:

import { buildSchema } from "type-graphql";

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

2. GraphQL Yoga

GraphQL Yoga es un servidor GraphQL universal que funciona excelentemente con TypeScript. Está basado en Express, pero soporta cualquier plataforma.

Instalación:

npm install graphql-yoga graphql

Ejemplo de servidor:

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("Server running on http://localhost:4000/graphql"));

Bibliotecas para el lado del cliente

3. Apollo Client (con soporte para TypeScript)

Apollo Client es un potente cliente para trabajar con GraphQL. Con TypeScript proporciona tipificación completa de las consultas.

Instalación:

npm install @apollo/client graphql

Ejemplo de consulta tipificada:

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>Cargando...</p>;  return <p>{data?.user.name}</p>;}