0Pricing
TypeScript Academy · Lezione

Client GraphQL tipizzato con Apollo e urql

Utilizzi hook e operazioni generati per query type-safe.

Client GraphQL tipizzato con Apollo e urql è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Il problema della tipizzazione del client

I client GraphQL come Apollo e urql restituiscono per impostazione predefinita dati tipizzati come any. Codegen genera hook e operazioni tipizzati che rendono le query completamente sicure dal punto di vista dei tipi.

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

Plugin per le operazioni di Apollo

Aggiunga @graphql-codegen/typescript-react-apollo per generare hook React tipizzati per ogni operazione nei suoi file .graphql.

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

codegen.yml per gli hook Apollo

Indichi a codegen i file delle operazioni .graphql e lo schema per generare hook tipizzati.

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

Scrivere una query tipizzata

Scriva l'operazione GraphQL in un file .graphql e utilizzi l'hook generato nel suo componente.

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

Utilizzare l'hook generato

Importi l'hook generato, completamente tipizzato: variabili, dati, stato di caricamento ed errori sono tutti verificati in modo sicuro da TypeScript.

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 con codegen

Con urql, utilizzi @graphql-codegen/typescript-urql per generare wrapper tipizzati per gli hook.

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

TypedDocumentNode

L'approccio di livello più basso: utilizzi TypedDocumentNode da @graphql-typed-document-node/core per associare i tipi ai nodi dei documenti senza hook specifici di un framework.

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

Tipi dei frammenti

Codegen genera tipi anche per i frammenti GraphQL, consentendo di comporre i frammenti nei componenti con sicurezza dei tipi.

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

Mutation tipizzate

Codegen genera anche hook tipizzati per le mutation, con variabili e dati del risultato tipizzati.

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

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

Mantenere sincronizzate le operazioni

Quando lo schema cambia, esegua nuovamente codegen. L'aggiunta di un passaggio validate-queries individua le operazioni che fanno riferimento a campi rimossi o rinominati.

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

Riepilogo: client GraphQL tipizzati

Codegen genera hook tipizzati per Apollo e urql a partire dai file delle operazioni .graphql. Questo garantisce la sicurezza completa dei tipi per variabili, dati delle query e strutture dei frammenti, senza bisogno di mantenere manualmente i tipi.

Verifica rapida

Che cosa offre un hook GraphQL tipizzato generato rispetto all'utilizzo di un documento grezzo?

Cosa ha imparato

I client GraphQL tipizzati utilizzano codegen per generare hook con variabili e dati completamente tipizzati per Apollo e urql. Scriva le operazioni nei file .graphql, esegua codegen e ottenga la sicurezza dei tipi dall'inizio alla fine, dallo schema al componente.

Domande Frequenti

La lezione «Client GraphQL tipizzato con Apollo e urql» è gratuita?

Sì — il testo completo di «Client GraphQL tipizzato con Apollo e urql» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Client GraphQL tipizzato con Apollo e urql»?

Utilizzi hook e operazioni generati per query type-safe. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Client GraphQL tipizzato con Apollo e urql»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Dallo schema GraphQL ai tipi TypeScript
  2. Resolver tipizzati con GraphQL Code Generator
  3. Client GraphQL tipizzato con Apollo e urql
  4. Sicurezza dei tipi end-to-end: workflow schema first
← Torna a TypeScript Academy