useQuery para obtener datos
useQuery(QUERY), result, loading, error, variables y opciones de fetchPolicy
useQuery para obtener datos es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 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.
Consultar con useQuery
El composable useQuery ejecuta una consulta de GraphQL y devuelve un estado reactivo. Vuelve a hacer fetch automáticamente cuando cambian las variables y se actualiza cuando cambia la caché.
Uso básico
Pase un documento gql. useQuery devuelve refs result, loading y error.
import { useQuery } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { result, loading, error } = useQuery(gql(
'query { posts { id title } }'
))Leer el resultado
result es un ref. Acceda a los datos mediante result.value; contiene la respuesta de la consulta con exactamente la misma estructura que la consulta.
const posts = computed(() => result.value?.posts ?? [])Estados de carga y error
Use loading para mostrar un indicador de carga y error para mostrar un mensaje. Ambos son refs reactivos que se actualizan a medida que avanza la solicitud.
<template>
<p v-if="loading">Loading...</p>
<p v-else-if="error">{{ error.message }}</p>
<ul v-else>
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
</template>Variables de consulta
Pase las variables como segundo argumento. La consulta se vuelve a ejecutar cada vez que cambia el valor de una variable.
const { result } = useQuery(
gql('query($id: ID!) { post(id: $id) { title } }'),
{ id: 1 }
)Variables reactivas
Para usar variables dinámicas, pase una función que devuelva el objeto de variables o un ref reactivo. Cuando cambia un ref referenciado, la consulta vuelve a hacer fetch automáticamente.
const id = ref(1)
const { result } = useQuery(
gql('query($id: ID!) { post(id: $id) { title } }'),
() => ({ id: id.value })
)El hook onResult
onResult se ejecuta cada vez que llegan datos nuevos; resulta útil para efectos secundarios, como analíticas o sincronización con otro store.
const { onResult } = useQuery(QUERY)
onResult((res) => {
console.log('Got', res.data)
})Volver a hacer fetch manualmente
useQuery devuelve una función refetch para volver a ejecutar la consulta bajo demanda, después de un cambio externo o al pulsar un botón de actualización.
const { result, refetch } = useQuery(QUERY)
function reload() { refetch() }Paginación con fetchMore
fetchMore carga páginas adicionales y las combina con el resultado existente mediante updateQuery; es la base del desplazamiento infinito.
const { result, fetchMore } = useQuery(QUERY, { offset: 0 })
function loadMore() {
fetchMore({
variables: { offset: result.value.posts.length },
updateQuery: (prev, { fetchMoreResult }) => ({
posts: [...prev.posts, ...fetchMoreResult.posts]
})
})
}Políticas de fetch
La opción fetchPolicy controla el uso de la caché: cache-first (predeterminada) consulta la caché antes que la red, network-only siempre accede al servidor y cache-and-network muestra la caché y después actualiza los datos.
useQuery(QUERY, null, {
fetchPolicy: 'cache-and-network'
})Consultas condicionales
Use la opción enabled para retrasar una consulta hasta que se cumpla una condición; por ejemplo, no hacer fetch hasta que se seleccione un id.
const id = ref(null)
useQuery(QUERY, () => ({ id: id.value }), {
enabled: computed(() => id.value !== null)
})Comprobación rápida
Compruebe sus conocimientos sobre useQuery.
Resumen
Ha aprendido a usar useQuery:
- Devuelve result, loading y error reactivos.
- Lea los datos mediante result.value.
- Pase las variables como un objeto o una función para obtener reactividad.
- refetch() vuelve a ejecutar la consulta, fetchMore() pagina los resultados y fetchPolicy controla el uso de la caché.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «useQuery para obtener datos» es gratis?
Sí — el texto completo de «useQuery para obtener datos» 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 «useQuery para obtener datos»?
useQuery(QUERY), result, loading, error, variables y opciones de fetchPolicy 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 2 de 4.
¿Cuánto tiempo toma la lección «useQuery para obtener datos»?
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