Introduccion a GraphQL con Angular 21
- GraphQL + Angular 21: consulta declarativa y reactividad granular con Signals para menos deuda técnica.
- Configuración mínima: providers standalone y Apollo + InMemoryCache para normalización y SSR compatible.
- Patrón recomendado: convertir Observables a Signals (toSignal) para plantillas limpias; conservar Observables en la capa de servicios.
- Mutations: usar optimisticResponse y update junto a typePolicies para evitar parpadeos y duplicados.
- Codegen: generar tipos y servicios Angular; fallos de contrato en compilación, no en runtime.
Introducción
Introduccion a GraphQL con Angular 21 es más que “añadir Apollo”: es reconciliar dos ideas que cambian la capa de datos del frontend —consultas declarativas y reactividad granular con Signals— para obtener rendimiento real y menos deuda técnica. En las primeras líneas: esta guía muestra configuración, patrones y criterios prácticos para llevar GraphQL a una app Angular 21 standalone sin convertir el cliente en una pesadilla de suscripciones.
Resumen rápido (lectores con prisa)
Qué es: integración de GraphQL con Angular 21 usando Apollo e InMemoryCache para datos tipados y normalizados.
Cuándo usarlo: vistas que combinan múltiples recursos o requieren minimizar tráfico.
Por qué importa: menos overfetching/underfetching, tipado end-to-end y caché cliente coherente.
Cómo funciona (resumen): configura providers standalone, genera tipos con codegen, convierte Observables a Signals para la UI y usa políticas de caché para mutaciones.
Por qué usar GraphQL con Angular 21
GraphQL resuelve dos problemas frecuentes frente a REST: overfetching (descargas de datos innecesarios) y underfetching (múltiples llamadas para construir una vista). Angular 21 aporta Signals y providers standalone que facilitan inyectar un cliente GraphQL tipado y consumir datos de forma síncrona en la UI.
- Peticiones precisas por vista → menos bytes y mejores Core Web Vitals.
- Tipado end-to-end con GraphQL Code Generator → fallos detectados en compilación.
- Caché cliente (Apollo) con normalización → menos refetches y estado local coherente.
Lecturas oficiales: GraphQL, Apollo Angular, Angular Reactivity.
Configuración mínima en Angular 21 (Standalone + Zoneless)
Angular 21 favorece providers en app.config.ts. Usaremos Apollo Angular y InMemoryCache para normalización.
Proveedores (app.config.ts)
import { ApplicationConfig, inject } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideApollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache } from '@apollo/client/core';
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
provideApollo(() => {
const httpLink = inject(HttpLink);
return {
link: httpLink.create({ uri: '<a href="https://api.example.com/graphql" style="color: #00c2ff !important;">https://api.example.com/graphql</a>' }),
cache: new InMemoryCache({
typePolicies: {
Query: { fields: {} }
}
}),
};
})
]
};Este patrón funciona con SSR/Hydration si añades lógica de serialización del caché (Apollo persist).
Queries con Signals: patrón recomendado
Apollo expone Observables. Convierte esos streams a Signals para plantillas libres de | async y suscripciones manuales.
Consulta ejemplo
# src/graphql/user.graphql
query GetUser($id: ID!) {
user(id: $id) {
id
name
avatar
projects { id name }
}
}Componente standalone usando toSignal
import { Component, inject, input, effect, computed } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { GetUserGQL } from './generated/graphql'; // codegen
import { map } from 'rxjs';
@Component({ standalone: true, template: `...` })
export class UserCard {
private gql = inject(GetUserGQL);
userId = input.required<string>();
// watch() viene del servicio generado por codegen
private obs = this.gql.watch({ id: this.userId }).valueChanges;
private result = toSignal(obs);
user = computed(() => this.result()?.data?.user ?? null);
// reaccionar a cambios del input: refetch en un effect
effect(() => {
const id = this.userId();
if (id) this.gql.fetch({ id }); // o this.gql.watch(...).refetch()
});
}Criterio: usa toSignal para lectura en la UI; para flujos complejos conserva Observables en la capa de servicios.
Documentación codegen: https://www.graphql-code-generator.com/
Mutations y estrategias de caché
Para mutaciones, usa async/await, optimisticResponse y update para evitar parpadeos:
await this.apollo.mutate({
mutation: UPDATE_USER_NAME,
variables: { id, name },
optimisticResponse: { updateUser: { __typename: 'User', id, name } },
update: (cache, { data }) => {
cache.modify({
id: cache.identify({ __typename: 'User', id }),
fields: { name: () => data.updateUser.name }
});
}
});TypePolicies y keyFields son esenciales para normalizar y evitar duplicados. Documentación InMemoryCache: InMemoryCache
Codegen y contrato cliente-servidor
No escribas interfaces a mano. GraphQL Code Generator genera:
- Tipos TypeScript exactos.
- Servicios Angular (watch/mutate) listos para inyectar.
Ejemplo codegen.ts:
schema: "<a href="https://api.example.com/graphql" style="color: #00c2ff !important;">https://api.example.com/graphql</a>",
documents: "src/**/*.graphql",
generates: { "src/generated/": { plugins: ["typescript","typescript-operations","typescript-apollo-angular"] } }Esto convierte errores de contrato en fallos de build, no bugs runtime.
¿Cuándo elegir GraphQL en Angular 21?
Úsalo si:
- Vistas combinan datos de múltiples recursos.
- Móviles requieren minimizar tráfico.
- Equipo backend provee un grafo unificado.
Evítalo si:
- App es CRUD simple (HttpClient es más liviano).
- Necesitas caching CDN agresivo con rutas REST estáticas.
- Equipo no puede mantener esquema y codegen sincronizados.
Buenas prácticas rápidas
- Versiona y valida tu esquema en CI.
- Ejecuta codegen en CI; falla la build si tipos cambian inesperadamente.
- Define typePolicies tempranamente (pagination, merge).
- Monitoriza latencia y cache hit-rate (Apollo DevTools).
- Considera BFF si tu backend no puede evolucionar a GraphQL.
Esta introduccion a GraphQL con Angular 21 es práctica: configura, genera tipos y consume con Signals. No es mágico, pero reduce considerablemente deuda técnica cuando se aplica con criterio. En Dominicode veremos patrones avanzados (cursor pagination, cache eviction, SSR hydration) —esto no acaba aquí.
FAQ
- ¿Qué problemas resuelve GraphQL frente a REST?
- ¿Por qué usar Signals en Angular 21 con GraphQL?
- ¿Cómo evito parpadeos cuando actualizo datos?
- ¿Qué aporta GraphQL Code Generator al flujo de trabajo?
- ¿Es Apollo obligatorio?
- ¿Cómo encaja esto con SSR y Hydration?
Respuesta: Reduce overfetching y underfetching al permitir peticiones precisas por vista; evita múltiples llamadas necesarias para componer una UI.
Respuesta: Signals permiten lectura síncrona en plantillas sin pipes ni suscripciones manuales; facilitan reactividad granular y menos complejidad en la UI.
Respuesta: Usa optimisticResponse y la función update del cliente para modificar el caché inmediatamente; define typePolicies para mantener consistencia y evitar duplicados.
Respuesta: Genera tipos TypeScript y servicios Angular que detectan errores de contrato en build; evita escribir interfaces manualmente y reduce bugs runtime.
Respuesta: No es obligatorio. Apollo aporta InMemoryCache y herramientas maduras para normalización; podrías usar otro cliente GraphQL, pero perderías integraciones y patrones documentados aquí.
Respuesta: Funciona con SSR/Hydration si serializas y rehidratas el caché (Apollo persist), y si colocas providers correctamente en el arranque standalone de Angular 21.
