Domina Apollo Client con el Editor Enriquecido
Queries, mutations, cache, Suspense, testing y rendimiento. Editor Monaco con TypeScript, ejemplos interactivos y verificación—aprende construyendo apps reales con GraphQL.
- Paso 1
Apollo 1: queries y useQuery
useQuery is the primary hook for fetching data in Apollo Client. It returns loading, error, and data...
Comenzar lección - Paso 2
Apollo 2: variables y queries dinámicas
GraphQL variables let you parameterize queries. Pass them via the variables option in useQuery to bu...
Comenzar lección - Paso 3
Apollo 3: fragments y composición
Fragments let you define reusable sets of fields that can be shared across multiple queries and muta...
Comenzar lección - Paso 4
Apollo 4: mutaciones y UI optimista
useMutation is how you send writes to your GraphQL server. Combine it with optimisticResponse to mak...
Comenzar lección - Paso 5
Apollo 5: fetch policies
Apollo's fetchPolicy controls where data comes from — cache, network, or both. The right choice depe...
Comenzar lección - Paso 6
Apollo 6: lectura y escritura en caché
Apollo's cache is not just automatic — you can read from and write to it directly using readQuery, w...
Comenzar lección - Paso 7
Apollo 7: type policies
Type policies let you customize how Apollo normalizes, stores, and reads specific types in the cache...
Comenzar lección - Paso 8
Apollo 8: variables reactivas
Reactive variables are Apollo's solution for local state — like React Context, but integrated with t...
Comenzar lección - Paso 9
Apollo 9: invalidación de caché
Cache invalidation is famously hard. Apollo gives you evict, gc, refetchQueries, and resetStore to k...
Comenzar lección - Paso 10
Apollo 10: paginación
fetchMore is Apollo's built-in pattern for pagination. Combined with type policy merge functions, it...
Comenzar lección - Paso 11
Apollo 11: manejo de errores y links
Apollo Links form a chain that processes each GraphQL operation. ErrorLink, RetryLink, and custom li...
Comenzar lección - Paso 12
Apollo 12: hooks con Suspense
Apollo 3.8+ introduces Suspense-compatible hooks: useSuspenseQuery, useBackgroundQuery, and useLoada...
Comenzar lección - Paso 13
Apollo 13: subscriptions y polling
For real-time data, Apollo offers subscriptions (WebSocket-based), subscribeToMore (add real-time up...
Comenzar lección - Paso 14
Apollo 14: testing en Apollo
MockedProvider lets you test Apollo components without a real server. Define mock responses for your...
Comenzar lección - Paso 15
Apollo 15: optimización de rendimiento
Apollo offers several performance tools: @defer for incremental delivery, BatchHttpLink for request ...
Comenzar lección - Paso 16
Apollo 16: custom hooks
Wrapping Apollo hooks in custom hooks lets you encapsulate query logic, add type safety, and create ...
Comenzar lección - Paso 17
Apollo 17: desarrollo guiado por schema
Schema-driven development means designing your GraphQL schema first, then generating TypeScript type...
Comenzar lección - Paso 18
Apollo 18: gestión de estado local
Apollo can manage local state alongside remote data using type extensions, local resolvers, and the ...
Comenzar lección - Paso 19
Apollo 19: patrones de autenticación
Authentication in Apollo is handled via the link chain. SetContextLink adds auth headers, token refr...
Comenzar lección - Paso 20
Apollo 20: subida de archivos
GraphQL file uploads use the multipart request spec. Apollo supports uploads via createUploadLink, w...
Comenzar lección - Paso 21
Apollo 21: DevTools y depuración
Apollo DevTools lets you inspect the cache, watch queries in flight, and debug GraphQL operations in...
Comenzar lección - Paso 22
Apollo 22: SSR con Next.js
Apollo Client integrates with Next.js App Router via server-side queries in RSC, ApolloNextAppProvid...
Comenzar lección - Paso 23
Apollo 23: soporte offline
Apollo can work offline using apollo-cache-persist for cache storage, optimistic mutations for offli...
Comenzar lección - Paso 24
Apollo 24: arquitectura en tiempo real
Real-time data is a spectrum from polling (simplest) to subscriptions (most real-time) to live queri...
Comenzar lección - Paso 25
Apollo 25: checklist de producción
Going to production with Apollo requires APQ for bandwidth, CDN caching for performance, error monit...
Comenzar lección