Tag: Angular 21

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

1. ¿Qué problemas resuelve GraphQL frente a REST?
2. ¿Por qué usar Signals en Angular 21 con GraphQL?
3. ¿Cómo evito parpadeos cuando actualizo datos?
4. ¿Qué aporta GraphQL Code Generator al flujo de trabajo?
5. ¿Es Apollo obligatorio?
6. ¿Cómo encaja esto con SSR y Hydration?