Part 5: Setting Up Apollo Angular Client with Auth Link and WebSocket Subscriptions

Module: Module 1: Architecture, Monorepo Setup & Tooling
Category: Technology
Keywords: django, graphql, angular, erp, architecture, docker
Meta Description: Configuring Apollo Client in Angular with JWT header injection, error links, and WebSocket transport.

1. Executive Summary & System Architecture

Establish resilient GraphQL networking with automatic token refresh, error interceptors, and real-time WebSockets.

In enterprise Educational Resource Planning (ERP) systems, orchestrating students, faculty, schedules, attendance, grading, and finances demands a robust, loosely-coupled architecture. We pair Django (leveraging its robust ORM, transactional integrity, and battle-tested security) with GraphQL (providing flexible, client-driven data graphs with zero over-fetching) and Angular (featuring strict TypeScript typing, Standalone components, reactive Signals, and Apollo Client normalization).

2. Backend Database Modeling (Django ORM & PostgreSQL)

Below is the production-grade Django model definition enforcing data integrity, foreign key constraints, indexes, and audit metadata:

# backend/apps/erp/models.py
# Django Channels & WebSocket GraphQL configuration
# settings.py: ASGI_APPLICATION = 'config.asgi.application'

Key Architectural Highlights:

• Audit Logging: Inherits from a base audit model capturing created_at, updated_at, created_by, and soft-delete flags.
• Index Optimization: Explicit database indexes (db_index=True, indexes=[models.Index(...)]) positioned for high-frequency queries.
• Validation: Enforces domain constraints via clean validation methods and unique constraints across academic years and tenant boundaries.

3. GraphQL API Layer (Types, Queries & Mutations)

The GraphQL layer exposes precise schema definitions, input validation, and transactional mutation execution:

# backend/apps/erp/schema.py
# Django GraphQL WebSocket consumer
from channels.generic.websocket import AsyncJsonWebsocketConsumer
class GraphQLConsumer(AsyncJsonWebsocketConsumer):
    pass

Resolver & Data Fetching Patterns:

• Batch Loading: Resolvers integrate with DataLoader to eliminate N+1 database queries when fetching nested relationships.
• Permission Enforcement: Mutations verify caller authorization via role-based access decorators before touching the database.
• Transactional Consistency: Multi-table updates execute inside transaction.atomic() context blocks to ensure ACID atomicity.

4. Frontend Angular Implementation (Signals & Apollo Client)

The modern Angular implementation features Standalone components, reactive Signals, and type-safe Apollo Client interactions:

// frontend/src/app/erp/components/feature.component.ts
import { inject } from '@angular/core';
import { ApolloClientOptions, InMemoryCache, createHttpLink } from '@apollo/client/core';
import { setContext } from '@apollo/client/link/context';

export function createApollo(): ApolloClientOptions<any> {
  const httpLink = createHttpLink({ uri: 'http://localhost:8000/graphql/' });
  const authLink = setContext(() => ({
    headers: { Authorization: `Bearer ${localStorage.getItem('access_token') || ''}` }
  }));
  return { link: authLink.concat(httpLink), cache: new InMemoryCache() };
}

Frontend Architectural Patterns:

• Reactivity with Signals: Uses Angular signal(), computed(), and effect primitives for fine-grained DOM updates without unnecessary change detection cycles.
• Type-Safe GraphQL: Consumes strongly-typed operations generated by @graphql-codegen.
• User Feedback: Integrates reactive loading state indicators, optimistic UI updates, and error handling toasts.

5. Security, Permissions & Multi-Tenancy

Transmit JWTs over encrypted TLS connections only and implement automatic token refresh before expiration.

6. Critical Pitfalls & Production Anti-Patterns

When deploying this module in large-scale institutions with thousands of concurrent users, avoid these traps:

1. Storing raw refresh tokens in insecure localStorage vulnerable to XSS.
2. Failing to handle network disconnections in WebSocket subscriptions.
3. Ignoring Apollo Cache normalization causing stale UI state.

7. Enterprise Best Practices & Production Checklist

• ✅ Store sensitive tokens in HttpOnly, Secure, SameSite=Strict cookies.
• ✅ Implement Apollo Error Link to auto-redirect on 401 Unauthorized.
• ✅ Use InMemoryCache typePolicies for custom ID field normalization.
• ✅ Configure heartbeat ping/pong on WebSocket connections.

Part 5 of the comprehensive Fullstack Student ERP Tutorial Series.