⚡Backend

GraphQL Basics

Hole genau die Daten die du brauchst

Mit REST bekommst du entweder zu viele oder zu wenige Daten. GraphQL loest das: der Client fragt exakt die Felder an die er braucht. Ein Endpunkt, flexible Queries, kein Over- oder Under-Fetching.

Pro-Tip — Der schnelle Weg
Starte nicht mit GraphQL wenn REST ausreicht. GraphQL glaenzt bei komplexen Datenmodellen mit vielen Relationen. Fuer einfache CRUD-Apps ist REST schneller aufgesetzt.
Seite 1
1

GraphQL Yoga installieren

GraphQL Yoga ist der einfachste GraphQL-Server fuer Next.js. Leichtgewichtig, TypeScript-first und kompatibel mit App Router Route Handlers.

npm install graphql-yoga graphql
2

Schema definieren

Definiere deine Typen und Queries in einem Schema. Das Schema ist der Vertrag zwischen Frontend und Backend.

const schema = `
 type User {
 id: ID!
 name: String!
 email: String!
 posts: [Post!]!
 }


 type Post {
 id: ID!
 title: String!
 author: User!
 }


 type Query {
 users: [User!]!
 user(id: ID!): User
 }
`;
3

Route Handler einrichten

Erstelle einen Route Handler der GraphQL Yoga als Endpunkt bereitstellt. Ein einziger Endpunkt fuer alle Queries.

// app/api/graphql/route.ts
import { createSchema, createYoga } from 'graphql-yoga';


const yoga = createYoga({
 schema: createSchema({
 typeDefs: schema,
 resolvers: {
 Query: {
 users: () => db.user.findMany(),
 user: (_, { id }) => db.user.findUnique({ where: { id } }),
 },
 User: {
 posts: (parent) => db.post.findMany({ where: { authorId: parent.id } }),
 },
 },
 }),
 graphqlEndpoint: '/api/graphql',
});


export { yoga as GET, yoga as POST };
4

Client-Query senden

Im Frontend sendest du Queries als POST-Request. Der Server gibt exakt die angefragten Felder zurueck, nichts mehr und nichts weniger.

const query = `
 query {
 user(id: "123") {
 name
 posts {
 title
 }
 }
 }
`;


const res = await fetch('/api/graphql', {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify({ query }),
});
const { data } = await res.json();
Seite 2
Warum das funktioniert
  • Kein Over-Fetching weil der Client exakt die Felder anfragt die er braucht
  • Ein Endpunkt statt dutzende REST-Routes vereinfacht die Architektur
  • Starke Typisierung durch das Schema verhindert Fehler zur Compile-Zeit
  • Relationen in einer Query statt mehrere REST-Calls spart Roundtrips
Tipps
  • Nutze GraphQL Playground unter /api/graphql im Browser zum Testen
  • Implementiere DataLoader um das N+1 Query Problem bei Relationen zu loesen
  • Fuer TypeScript-Typen aus dem Schema nutze graphql-codegen
  • Limitiere die Query-Tiefe um Denial-of-Service durch verschachtelte Queries zu verhindern
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen