GraphQL em TypeScript: Bibliotecas para APIs com segurança de tipos

GraphQL em TypeScript: Visão geral completa de bibliotecas e ferramentas

GraphQL e TypeScript são a combinação ideal para criar APIs modernas. TypeScript adiciona tipagem estática, que se encaixa perfeitamente no sistema de tipos rigoroso do GraphQL. Neste artigo, abordaremos as principais bibliotecas e ferramentas para trabalhar com GraphQL em TypeScript, incluindo instalação, exemplos de código e melhores práticas.

Por que TypeScript para GraphQL?

As consultas e respostas do GraphQL têm uma estrutura rigorosa, e o TypeScript permite verificar essa estrutura em tempo de compilação. Isso elimina toda uma classe de erros relacionados a tipos de dados incorretos. Principais vantagens:

• Segurança de tipos — geração automática de tipos a partir do esquema GraphQL
• Autocompletar — a IDE sugere campos e tipos de consultas
• Refatoração — alterar o esquema atualiza automaticamente todas as consultas do cliente
• Minimização de erros — erros de tipo são detectados antes da execução do código

Principais bibliotecas para o lado do servidor

1. TypeGraphQL

TypeGraphQL é a biblioteca mais popular para criar APIs GraphQL em TypeScript. Ela usa decoradores para definir o esquema e os resolvers.

Instalação:

npm install type-graphql graphql reflect-metadata

Exemplo de declaração de tipo e 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 obter usuário do banco de dados    return { id, name: "John", email: "john@example.com" };  }}

Construção do esquema:

import { buildSchema } from "type-graphql";

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

2. GraphQL Yoga

GraphQL Yoga é um servidor GraphQL versátil que funciona muito bem com TypeScript. É baseado no Express, mas suporta qualquer plataforma.

Instalação:

npm install graphql-yoga graphql

Exemplo 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("Servidor rodando em http://localhost:4000/graphql"));

Bibliotecas para o lado do cliente

3. Apollo Client (com suporte a TypeScript)

Apollo Client é um cliente poderoso para trabalhar com GraphQL. Com TypeScript, ele oferece tipagem completa das consultas.

Instalação:

npm install @apollo/client graphql

Exemplo de consulta tipada:

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