Einleitung
GraphQL bietet flexible APIs, erfordert aber mehr Design-Aufwand als REST. AI hilft beim Schema-Design, Resolver-Implementierung und Performance-Optimierung. Hier sind 10 Prompts für die GraphQL-Entwicklung.
Inhaltsverzeichnis
- Prompt 1: GraphQL Schema Design
- Prompt 2: Resolver implementieren
- Prompt 3: Queries & Mutations
- Prompt 4: Auth & Autorisierung
- Prompt 5: Relationen & DataLoader
- Prompt 6: Subscriptions (Echtzeit)
- Prompt 7: Input Validation
- Prompt 8: Performance & N+1
- Prompt 9: Client-Integration
- Prompt 10: GraphQL Testing
- FAQ
Prompt 1: GraphQL Schema Design
Grundsätzlich gibt es dabei einige Punkte zu beachten.
Designe ein GraphQL Schema für:
Domain: [z.B. "Blog-Plattform mit Usern, Posts, Kommentaren, Tags"]
Stack: [z.B. "Apollo Server, TypeScript, Prisma"]
Erstelle:
1. **Types**: User, Post, Comment, Tag mit allen Feldern
2. **Enums**: PostStatus (DRAFT, PUBLISHED, ARCHIVED)
3. **Interfaces**: Node (id), Timestamped (createdAt, updatedAt)
4. **Unions**: SearchResult = User | Post | Comment
5. **Input Types**: CreatePostInput, UpdatePostInput
6. **Queries**: posts, post(id), users, me, search
7. **Mutations**: createPost, updatePost, deletePost, login
8. **Custom Scalars**: DateTime, URL, Email
9. **Pagination**: Cursor-based (Connection Pattern: edges, pageInfo)
10. **Directives**: @auth, @deprecated, @cacheControl
Schema-Design Prinzipien:
- Demand-driven (was braucht der Client?)
- Keine Over-fetching: nur nötige Felder exposed
- Konsistente Namenskonventionen (camelCase)
Dementsprechend ist eine manuelle Überprüfung empfehlenswert.
Prompt 2: Resolver implementieren
Außerdem gibt es hilfreiche Tools, die dich dabei unterstützen.
Implementiere GraphQL Resolver:
Schema:
```graphql
[SCHEMA HIER EINFÜGEN]
```
Stack: [z.B. "Apollo Server, TypeScript, Prisma"]
Implementiere:
1. **Query Resolver**: Posts mit Filtering und Pagination
2. **Mutation Resolver**: CreatePost mit Validierung
3. **Field Resolver**: Post.author (lazy loaded)
4. **Nested Resolver**: Post.comments.author
5. **Context**: Auth User, DB Client, DataLoader
6. **Error Handling**: UserInputError, AuthenticationError
7. **Middleware**: Logging, Performance Tracking
8. **N+1 Lösung**: DataLoader für Batch-Loading
9. **File Upload**: Multipart Request Handling
10. **Resolver Composition**: Reusable Resolver-Logik
Best Practices:
- Thin Resolvers (Business Logic in Services)
- Resolver Map Typsicherheit (graphql-codegen)
- Context Type richtig tippen
Außerdem kannst du den Prompt für verschiedene Programmiersprachen anpassen.
Prompt 3: Queries & Mutations
Allerdings gibt es einige wichtige Unterschiede zu beachten.
Erstelle GraphQL Queries und Mutations für mein Frontend:
Schema:
```graphql
[SCHEMA HIER EINFÜGEN]
```
Erstelle:
1. **Einfache Query**: Posts mit ausgewählten Feldern
2. **Nested Query**: Post mit Author und Comments
3. **Query mit Argumenten**: posts(status: PUBLISHED, limit: 10)
4. **Query mit Variablen**: $id: ID! für dynamische Werte
5. **Fragments**: ...PostFields für wiederverwendbare Felder
6. **Mutation**: createPost mit Input Type und Response
7. **Optimistic Update**: UI sofort aktualisieren, Rollback bei Fehler
8. **Inline Fragments**: ... on User { email } ... on Admin { role }
9. **Aliases**: author: user(id: 1), editor: user(id: 2)
10. **Directives**: @include(if: $showComments), @skip
Generiere auch TypeScript Types aus den Queries (graphql-codegen).
Darüber hinaus lässt sich das Beispiel leicht erweitern.
Prompt 4: Auth & Autorisierung
Tatsächlich ist dieser Bereich besonders wichtig für Entwickler.
Implementiere Auth und Autorisierung in GraphQL:
Stack: [z.B. "Apollo Server, JWT, Prisma"]
Rollen: [z.B. "USER, ADMIN, MODERATOR"]
Implementiere:
1. **Login Mutation**: E-Mail + Passwort → JWT Token
2. **Register Mutation**: User erstellen, Passwort hashen
3. **Context Auth**: Token aus Header-lesen, User in Context
4. **@auth Directive**: Felder nur für eingeloggte User
5. **Role-based**: @auth(requires: ADMIN) auf Mutations
6. **Field-level Auth**: User.email nur für eigenes Profil
7. **Owner Check**: Post nur vom Autor editierbar
8. **Rate Limiting**: Max. Queries pro Minute
9. **Query Depth Limiting**: Schutz vor tiefen Queries
10. **Persisted Queries**: Nur bekannte Queries erlauben
Security Checklist:
- Introspection in Production deaktivieren
- Query Complexity Analyse
- CORS korrekt konfigurieren
- Input Sanitization
Prompt 5: Relationen & DataLoader
Natürlich gibt es dabei verschiedene Herangehensweisen.
Implementiere Relationen und löse das N+1 Problem:
Modelle:
- User hat viele Posts
- Post hat viele Comments
- Post hat viele Tags (M:N)
- Comment gehört zu User und Post
Implementiere:
1. **1:N Relation**: User → Posts (Field Resolver)
2. **N:1 Relation**: Post → Author (mit DataLoader!)
3. **M:N Relation**: Post ↔ Tags (Pivot Table)
4. **DataLoader Setup**: Batch-Loading für N+1 Vermeidung
5. **DataLoader per Request**: Neuer Loader pro Request (Caching)
6. **Nested Relations**: Post → Comments → Author (2 Ebenen)
7. **Circular References**: User → Posts → Author → Posts (Loop)
8. **Pagination in Relations**: Post.comments(first: 10, after: cursor)
9. **Count Fields**: User.postCount (ohne alle Posts zu laden)
10. **Eager vs Lazy Loading**: Wann welche Strategie?
Performance Monitoring:
- Apollo Tracing aktivieren
- SQL Query Logging (Prisma: log: ['query'])
- DataLoader Batch-Größe überwachen
Dabei zeigt dieses Beispiel den grundlegenden Ansatz.
Prompt 6: Subscriptions (Echtzeit)
Zusammenfassend lässt sich sagen, dass dies ein zentraler Aspekt ist.
Implementiere GraphQL Subscriptions:
Use Case: [z.B. "Live Chat", "Echtzeit-Notifications", "Live Dashboard"]
Stack: [z.B. "Apollo Server, WebSocket, Redis PubSub"]
Implementiere:
1. **Schema**: subscription { messageAdded(channelId: ID!): Message }
2. **PubSub Setup**: In-Memory für Dev, Redis für Production
3. **Subscription Resolver**: asyncIterator mit Filter
4. **WebSocket Server**: graphql-ws Setup
5. **Client Subscription**: useSubscription Hook (React)
6. **Authentication**: WebSocket Connection Auth (connectionParams)
7. **Filtering**: Nur Events für relevante Channels
8. **Unsubscribe**: Cleanup bei Client Disconnect
9. **Scaling**: Redis PubSub für Multi-Server Setup
10. **Fallback**: Polling wenn WebSocket nicht verfügbar
Alternativen bewerten:
- GraphQL Subscriptions vs. Server-Sent Events
- graphql-ws vs. subscriptions-transport-ws (deprecated)
- Pusher / Ably als Managed Alternative
Vor allem die detaillierten Anweisungen sorgen für präzisere Ergebnisse.
Prompt 7: Input Validation
Im Folgenden findest du alle wichtigen Details dazu.
Implementiere Input Validation in GraphQL:
Input Types:
```graphql
input CreatePostInput {
title: String!
content: String!
tags: [String!]
publishAt: DateTime
}
```
Implementiere:
1. **Schema-Level**: Non-null (!), Enums, Custom Scalars
2. **Resolver-Level**: Zod/Yup Validierung im Resolver
3. **Custom Scalar**: DateTime validiert ISO Format
4. **String Validation**: Min/Max Length, Pattern
5. **Number Validation**: Min/Max, Integer Check
6. **Array Validation**: Min/Max Items, Unique
7. **Business Rules**: Titel unique, User kann max. 10 Posts/Tag
8. **Error Format**: Standardisiertes Error Response Format
9. **Directive-based**: @constraint(minLength: 3, maxLength: 100)
10. **Frontend + Backend**: Validierung an beiden Stellen
Error Response Format:
```json
{
"errors": [{
"message": "Validation failed",
"extensions": {
"code": "VALIDATION_ERROR",
"fields": { "title": "Min. 3 Zeichen" }
}
}]
}
```
Tatsächlich lässt sich dieser Code direkt in dein Projekt übernehmen.
Prompt 8: Performance & N+1
Folglich profitierst du von einem besseren Verständnis dieser Konzepte.
Optimiere die Performance meiner GraphQL API:
Problem: [z.B. "Queries dauern > 2 Sekunden, zu viele DB Queries"]
Analysiere und optimiere:
1. **N+1 Problem identifizieren**: SQL Logging aktivieren, Queries zählen
2. **DataLoader implementieren**: Batch Loading für alle Relationen
3. **Query Complexity**: Score pro Feld, Max. Complexity Limit
4. **Query Depth**: Maximum Tiefe begrenzen (z.B. 5)
5. **Pagination erzwingen**: Keine unbegrenzten Listen
6. **Field Selection**: Nur angeforderte Felder aus DB laden
7. **Caching**: Response Cache, DataLoader Cache
8. **Persisted Queries**: APQ (Automatic Persisted Queries)
9. **@defer und @stream**: Inkrementelles Laden (experimentell)
10. **Monitoring**: Apollo Studio, Custom Tracing
Performance Checklist:
- DataLoader für JEDE 1:N und N:1 Relation
- Pagination (Connection Pattern) für alle Listen
- Query Complexity Analyse aktivieren
- CDN für öffentliche Queries
Prompt 9: Client-Integration
Dabei spielen mehrere Faktoren eine wichtige Rolle.
Integriere GraphQL in mein Frontend:
Framework: [React / Next.js / Vue / Svelte]
Client: [Apollo Client / urql / TanStack Query + graphql-request]
Implementiere:
1. **Client Setup**: Provider, Cache Config, Auth Link
2. **useQuery**: Daten laden mit Loading/Error States
3. **useMutation**: Daten ändern mit Optimistic Updates
4. **Cache Update**: Cache nach Mutation aktualisieren
5. **Pagination**: fetchMore mit Cursor-based Pagination
6. **Polling / Refetch**: Daten periodisch aktualisieren
7. **Error Handling**: Global Error Link, Retry Logic
8. **Code Generation**: graphql-codegen für TypeScript Types
9. **Fragment Colocation**: Fragments neben Komponenten
10. **SSR/SSG**: Server-Side GraphQL mit Next.js
Vergleich:
- Apollo Client: Mächtig, großer Cache, komplex
- urql: Leichtgewichtig, Plugin-System
- TanStack Query + graphql-request: Einfach, flexibel
Somit sparst du Zeit und erhältst qualitativ hochwertigeren Output.
Prompt 10: GraphQL Testing
Weiterhin ist es wichtig, die Grundlagen zu verstehen.
Erstelle Tests für meine GraphQL API:
Stack: [z.B. "Apollo Server, Jest, Prisma"]
Implementiere:
1. **Unit Tests**: Resolver isoliert testen (Mock Context)
2. **Integration Tests**: Echte Queries gegen Test-Server
3. **Schema Tests**: Schema Snapshots (Breaking Changes erkennen)
4. **Query Tests**: Alle Queries mit erwarteten Ergebnissen
5. **Mutation Tests**: Create, Update, Delete mit Assertions
6. **Auth Tests**: Unauthorized, Forbidden, Owner Check
7. **Validation Tests**: Ungültige Inputs → korrekte Errors
8. **E2E Tests**: Client → Server → DB komplett
9. **Performance Tests**: Query Duration, N+1 Detection
10. **Mock Server**: MSW (Mock Service Worker) für Frontend Tests
Test Setup:
- Test-Datenbank (Docker, SQLite in-memory)
- Seed Data für konsistente Tests
- supertest oder Apollo TestClient
- graphql-codegen für typisierte Test-Queries
Im Grunde funktioniert dieser Ansatz mit allen gängigen AI-Tools.
FAQ
GraphQL oder REST?
Dennoch solltest du einige Besonderheiten beachten.
GraphQL wenn: Multiple Clients (Web, Mobile, API), komplexe Relationen, Over-Fetching ein Problem. REST wenn: Einfache CRUD-APIs, Caching wichtig (HTTP Cache), Team kennt kein GraphQL. Beides hat seine Berechtigung – nicht alles muss GraphQL sein.
Wie löse ich das N+1 Problem?
Somit kannst du direkt mit der Umsetzung beginnen.
DataLoader ist die Standard-Lösung: Sammelt alle IDs in einem Tick und lädt sie in einem Batch-Query. Erstelle einen DataLoader pro Request (wichtig für Caching-Isolation). Für Prisma: findMany mit where: { id: { in: ids } }.
Kann AI ein komplettes GraphQL Backend generieren?
Ebenfalls relevant sind die praktischen Anwendungsbeispiele.
AI kann Schema, Resolver, DataLoader und Tests generieren. Am besten: Schema zuerst designen (mit AI), dann Resolver generieren lassen. graphql-codegen für TypeScript Types. AI kennt auch Hasura, Prisma und PostGraphile für Auto-Generated APIs.
Verwandte Artikel:
Zuletzt aktualisiert: März 2026