Configuración de Apollo Client en Vue 3
ApolloClient, InMemoryCache, provideApolloClient() y configuración de @vue/apollo-composable
Configuración de Apollo Client en Vue 3 es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
GraphQL con Vue
GraphQL permite al cliente solicitar exactamente los datos que necesita en una sola solicitud. Apollo Client es el cliente de GraphQL más popular, y @vue/apollo-composable lo integra con la Composition API de Vue 3.
Instalar los paquetes
Necesita el núcleo de Apollo, el analizador de GraphQL y la capa de composables para Vue.
npm install @apollo/client graphql @vue/apollo-composableCrear el cliente
Un cliente de Apollo necesita un uri de servidor y una caché. InMemoryCache almacena los resultados de las consultas para que las lecturas repetidas sean instantáneas.
import { ApolloClient, InMemoryCache } from '@apollo/client/core'
const apolloClient = new ApolloClient({
uri: 'https://api.example.com/graphql',
cache: new InMemoryCache()
})Qué hace la caché
InMemoryCache normaliza las respuestas según el id de la entidad. Cuando dos consultas devuelven el mismo objeto, la caché lo almacena una sola vez y, al actualizarlo, actualiza todas las vistas que lo utilizan.
Proporcionar el cliente
Registre el cliente para toda la aplicación, de modo que cualquier componente pueda ejecutar consultas. La clave de inyección DefaultApolloClient lo integra con la Composition API.
import { DefaultApolloClient } from '@vue/apollo-composable'
import { createApp, provide, h } from 'vue'
const app = createApp({
setup() {
provide(DefaultApolloClient, apolloClient)
return () => h(App)
}
})Varios clientes
Para usar varios endpoints de GraphQL, proporcione un mapa ApolloClients y asigne un nombre a cada cliente. Los componentes eligen uno mediante la opción clientId.
import { ApolloClients } from '@vue/apollo-composable'
provide(ApolloClients, {
default: apolloClient,
analytics: analyticsClient
})provideApolloClient
Fuera del setup de un componente, por ejemplo dentro de un composable, use provideApolloClient para poner el cliente a disposición de las llamadas a useQuery.
import { provideApolloClient } from '@vue/apollo-composable'
provideApolloClient(apolloClient)
// now useQuery works in this composableAñadir cabeceras de autenticación
Las API reales necesitan un token de autenticación. Configure headers en las opciones del cliente o use un enlace de Apollo para adjuntar el token a cada solicitud.
const apolloClient = new ApolloClient({
uri: '/graphql',
cache: new InMemoryCache(),
headers: {
Authorization: 'Bearer ' + token
}
})Configurar opciones predeterminadas
El campo defaultOptions ajusta comportamientos como la política de fetch predeterminada; por ejemplo, leer siempre primero desde la caché.
const apolloClient = new ApolloClient({
uri: '/graphql',
cache: new InMemoryCache(),
defaultOptions: {
watchQuery: { fetchPolicy: 'cache-and-network' }
}
})Escribir su primera consulta
Defina una consulta con la etiqueta de plantilla gql de @apollo/client/core. Esta analiza la cadena de GraphQL y la convierte en un documento que Apollo entiende.
import { gql } from '@apollo/client/core'
const GET_POSTS = gql(
'query { posts { id title } }'
)Verificar la configuración
Una vez proporcionado el cliente, cualquier componente puede llamar a useQuery con ese documento. Si los datos regresan, el cliente y el proveedor están conectados correctamente.
Comprobación rápida
Compruebe sus conocimientos sobre la configuración de Apollo.
Resumen
Ha configurado Apollo en Vue 3:
- Cree un ApolloClient con un uri y una InMemoryCache.
- La caché normaliza los resultados según el id de la entidad.
- Proporciónelo con DefaultApolloClient (o ApolloClients si hay varios).
- Use provideApolloClient dentro de los composables y defina las consultas con gql.
Preguntas frecuentes
¿La lección «Configuración de Apollo Client en Vue 3» es gratis?
Sí — el texto completo de «Configuración de Apollo Client en Vue 3» 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Configuración de Apollo Client en Vue 3»?
ApolloClient, InMemoryCache, provideApolloClient() y configuración de @vue/apollo-composable Practicas Vue 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 Vue Academy?
No se requiere experiencia previa. Vue 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 1 de 4.
¿Cuánto tiempo toma la lección «Configuración de Apollo Client en Vue 3»?
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 Vue Academy?
Sí. Cada lección de Vue 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
- Configuración de Apollo Client en Vue 3
- useQuery para obtener datos
- useMutation para modificar datos
- Suscripciones en tiempo real con useSubscription