0Pricing
TypeScript Academy · Lektion

Typisierter GraphQL-Client mit Apollo und urql

Verwenden Sie generierte Hooks und Operationen für typsichere Abfragen.

Typisierter GraphQL-Client mit Apollo und urql ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Problem der Client-Typisierung

GraphQL-Clients wie Apollo und urql liefern Daten standardmäßig mit dem Typ any. Codegen erzeugt typisierte Hooks und Operationen, die Abfragen vollständig typsicher machen.

// Without codegen: data is any
const { data } = useQuery(GET_USER);
data.user; // any — no safety

Operations-Plugin für Apollo

Fügen Sie @graphql-codegen/typescript-react-apollo hinzu, um typisierte React-Hooks für jede Operation in Ihren .graphql-Dateien zu generieren.

npm install --save-dev @graphql-codegen/typescript-operations
npm install --save-dev @graphql-codegen/typescript-react-apollo

codegen.yml für Apollo-Hooks

Verweisen Sie in codegen auf Ihre .graphql-Operationsdateien und das Schema, um typisierte Hooks zu generieren.

# codegen.yml
documents: "src/**/*.graphql"
generates:
  src/generated/operations.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo

Eine typisierte Abfrage schreiben

Schreiben Sie Ihre GraphQL-Operation in eine .graphql-Datei und verwenden Sie den generierten Hook in Ihrer Komponente.

# src/queries/GetUser.graphql
query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

Den generierten Hook verwenden

Importieren Sie den generierten Hook, der vollständig typisiert ist: Variablen, Daten, Ladezustand und Fehler sind in TypeScript alle typsicher.

import { useGetUserQuery } from "./generated/operations";

function UserCard({ id }: { id: string }) {
  const { data, loading } = useGetUserQuery({ variables: { id } });
  if (loading) return <p>Loading...</p>;
  return <p>{data?.user?.name}</p>; // data.user: User | null — typed
}

urql mit Codegen

Verwenden Sie für urql @graphql-codegen/typescript-urql, um typisierte Hook-Wrapper zu generieren.

npm install --save-dev @graphql-codegen/typescript-urql
# Similar codegen.yml configuration, generates useGetUserQuery for urql

TypedDocumentNode

Die grundlegendste Variante: Verwenden Sie TypedDocumentNode aus @graphql-typed-document-node/core, um Dokumentknoten typensicher zu versehen, ohne framework-spezifische Hooks zu verwenden.

import { TypedDocumentNode } from "@graphql-typed-document-node/core";
const GetUserDoc: TypedDocumentNode<GetUserQuery, GetUserQueryVariables> = gql`...`;
// Works with Apollo, urql, and any GraphQL client that supports it

Fragment-Typen

Codegen generiert auch Typen für GraphQL-Fragmente und ermöglicht so das typsichere Zusammensetzen von Fragmenten in Komponenten.

# UserFields.graphql
fragment UserFields on User {
  id
  name
}
# Generated: UserFieldsFragment type — use as prop type

Typisierte Mutationen

Codegen generiert außerdem typisierte Mutation-Hooks mit typisierten Variablen und Ergebnisdaten.

import { useCreateUserMutation } from "./generated/operations";

const [createUser, { loading }] = useCreateUserMutation();
// createUser({ variables: { input: { name, email } } })
// — variables are fully typed

Operationen synchron halten

Führen Sie codegen erneut aus, wenn sich das Schema ändert. Ein Schritt mit validate-queries erkennt Operationen, die auf entfernte oder umbenannte Felder verweisen.

npx graphql-codegen --check
# or with graphql-inspector:
npx graphql-inspector validate ./src/**/*.graphql ./api/schema.graphql

Zusammenfassung: Typisierte GraphQL-Clients

Codegen generiert aus Ihren .graphql-Operationsdateien typisierte Hooks für Apollo und urql. Dadurch sind Variablen, Abfragedaten und Fragmentstrukturen vollständig typsicher – eine manuelle Pflege von Typen ist nicht erforderlich.

Kurzer Check

Was stellt ein generierter typisierter GraphQL-Hook zusätzlich zur Verwendung eines unveränderten Dokuments bereit?

Das haben Sie gelernt

Typisierte GraphQL-Clients verwenden Codegen, um für Apollo und urql Hooks mit vollständig typisierten Variablen und Daten zu generieren. Schreiben Sie Operationen in .graphql-Dateien, führen Sie codegen aus und erhalten Sie durchgängige Typsicherheit vom Schema bis zur Komponente.

Häufig gestellte Fragen

Ist die Lektion „Typisierter GraphQL-Client mit Apollo und urql“ kostenlos?

Ja — der vollständige Text von „Typisierter GraphQL-Client mit Apollo und urql“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Typisierter GraphQL-Client mit Apollo und urql“?

Verwenden Sie generierte Hooks und Operationen für typsichere Abfragen. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Typisierter GraphQL-Client mit Apollo und urql“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. GraphQL-Schema zu TypeScript-Typen
  2. Typisierte Resolver mit GraphQL Code Generator
  3. Typisierter GraphQL-Client mit Apollo und urql
  4. Typsicherheit von Ende zu Ende: Schema-First-Workflow
← Zurück zu TypeScript Academy