GraphQL Client Integration for Angular Frontend

[ElioNeto]

GraphQL Client Integration for Angular Frontend

Integrate a GraphQL client into the Angular frontend to provide an alternative data-fetching layer alongside REST.

Backend (already exists)

POST /graphql   — GraphQL endpoint
GET  /graphql   — GraphQL endpoint (for playground)
GET  /graphql/playground — GraphQL Playground IDE

GraphQL Schema (already exists)

type Query {
  get(key: String!): String
  scan(limit: Int): [KeyValue!]!
  keys: [String!]!
  stats: LsmStats
}

type Mutation {
  set(key: String!, value: String!): Boolean!
  delete(key: String!): Boolean!
}

Frontend Requirements

GraphQL Service

@Injectable({ providedIn: root })
export class GraphQLService {
  // Queries
  getKey(key: string): Observable<string | null>;
  scanKeys(limit?: number): Observable<KeyValue[]>;
  listKeys(): Observable<string[]>;
  getStats(): Observable<LsmStats>;
  
  // Mutations
  setKey(key: string, value: string): Observable<boolean>;
  deleteKey(key: string): Observable<boolean>;
}

Implementation Options

• Option A: Apollo Angular (apollo-angular) — full-featured but heavy
• Option B: graphql-request — lightweight, works with signals
• Option C: Custom fetch-based client — minimal dependencies

Integration Points

• Dashboard: Option to use GraphQL instead of REST for stats
• Key Explorer: Use GraphQL as alternative data source
• Stats Page: Use GraphQL stats query instead of REST /stats
• Fallback: Configurable per-component (REST primary, GraphQL fallback)

Developer Experience

• Codegen: Optional GraphQL Code Generator for TypeScript types
• Query Builder: Helper utilities for constructing queries
• Error Handling: Unified error handling with REST service

Acceptance Criteria

• GraphQL service can execute queries and mutations
• Auth token is forwarded correctly
• Error handling produces user-friendly messages
• TypeScript types match GraphQL schema
• Loading/error states in consuming components
• Tests with mock GraphQL responses

Parent Epic

#290

[ElioNeto]

Resolved via feat/notes-engine-v2 branch (PR #321)