0Pricing
TypeScript Academy · Lección

Cliente GraphQL tipado con Apollo y urql

Utilice hooks y operaciones generados para realizar consultas seguras respecto a los tipos.

Cliente GraphQL tipado con Apollo y urql es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

El problema del tipado del cliente

Los clientes de GraphQL como Apollo y urql devuelven datos tipados como any de forma predeterminada. Codegen genera hooks y operaciones tipados que hacen que las consultas sean completamente seguras en cuanto a tipos.

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

Plugin de operaciones para Apollo

Añada @graphql-codegen/typescript-react-apollo para generar hooks de React tipados para cada operación de sus archivos .graphql.

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

codegen.yml para hooks de Apollo

Indique en codegen sus archivos de operaciones .graphql y el esquema para generar hooks tipados.

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

Escribir una consulta tipada

Escriba su operación de GraphQL en un archivo .graphql y use el hook generado en su componente.

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

Usar el hook generado

Importe el hook generado, que está completamente tipado: las variables, los datos, el estado de carga y los errores son seguros para 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

Para urql, use @graphql-codegen/typescript-urql para generar wrappers de hooks tipados.

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

TypedDocumentNode

El enfoque de nivel más bajo: use TypedDocumentNode de @graphql-typed-document-node/core para asociar tipos a los nodos de documento sin hooks específicos de ningún 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

Tipos de fragmentos

Codegen también genera tipos para los fragmentos de GraphQL, lo que permite componer fragmentos con seguridad de tipos en los componentes.

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

Mutaciones tipadas

Codegen también genera hooks de mutación tipados, con variables y datos de resultado tipados.

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

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

Mantener las operaciones sincronizadas

Cuando cambie el esquema, vuelva a ejecutar codegen. Añadir un paso de validate-queries detecta las operaciones que hacen referencia a campos eliminados o renombrados.

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

Recapitulación: clientes de GraphQL tipados

Codegen genera hooks tipados para Apollo y urql a partir de sus archivos de operaciones .graphql. Esto proporciona seguridad de tipos completa para las variables, los datos de las consultas y las estructuras de los fragmentos, sin necesidad de mantener tipos manualmente.

Comprobación rápida

¿Qué proporciona un hook de GraphQL tipado generado frente al uso de un documento sin procesar?

Lo que ha aprendido

Los clientes de GraphQL tipados usan codegen para generar hooks con variables y datos completamente tipados para Apollo y urql. Escriba las operaciones en archivos .graphql, ejecute codegen y obtenga seguridad de tipos de extremo a extremo, desde el esquema hasta el componente.

Preguntas frecuentes

¿La lección «Cliente GraphQL tipado con Apollo y urql» es gratis?

Sí — el texto completo de «Cliente GraphQL tipado con Apollo y urql» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Cliente GraphQL tipado con Apollo y urql»?

Utilice hooks y operaciones generados para realizar consultas seguras respecto a los tipos. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Cliente GraphQL tipado con Apollo y urql»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Del esquema GraphQL a tipos de TypeScript
  2. Resolvers tipados con GraphQL Code Generator
  3. Cliente GraphQL tipado con Apollo y urql
  4. Seguridad de tipos de extremo a extremo: flujo schema first
← Volver a TypeScript Academy