0Pricing
Vue Academy · Aula

useQuery para busca de dados

useQuery(QUERY), resultado, carregamento, erro, variáveis e opções de fetchPolicy.

useQuery para busca de dados é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Consultando com useQuery

O composable useQuery executa uma consulta GraphQL e retorna um estado reativo. Ele refaz a busca automaticamente quando as variáveis mudam e é atualizado quando o cache muda.

Uso básico

Passe um documento gql. useQuery retorna referências result, loading e error.

import { useQuery } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

const { result, loading, error } = useQuery(gql(
  'query { posts { id title } }'
))

Lendo o resultado

result é uma referência. Acesse os dados por meio de result.value — ele contém a resposta da consulta com exatamente o formato definido pela consulta.

const posts = computed(() => result.value?.posts ?? [])

Estados de carregamento e erro

Use loading para exibir um indicador de carregamento e error para exibir uma mensagem. Ambas são referências reativas que se atualizam conforme a requisição avança.

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

Variáveis da consulta

Passe as variáveis como segundo argumento. A consulta será executada novamente sempre que o valor de uma variável mudar.

const { result } = useQuery(
  gql('query($id: ID!) { post(id: $id) { title } }'),
  { id: 1 }
)

Variáveis reativas

Para variáveis dinâmicas, passe uma função que retorne o objeto de variáveis ou uma referência reativa. Quando uma referência utilizada mudar, a consulta fará uma nova busca automaticamente.

const id = ref(1)
const { result } = useQuery(
  gql('query($id: ID!) { post(id: $id) { title } }'),
  () => ({ id: id.value })
)

O gancho onResult

onResult é executado sempre que novos dados chegam — isso é útil para efeitos colaterais, como análises ou sincronização com outro armazenamento.

const { onResult } = useQuery(QUERY)
onResult((res) => {
  console.log('Got', res.data)
})

Nova busca manual

useQuery retorna uma função refetch para executar a consulta novamente sob demanda — após uma alteração externa ou um clique no botão de atualização.

const { result, refetch } = useQuery(QUERY)
function reload() { refetch() }

Paginação com fetchMore

fetchMore carrega páginas adicionais e as combina com o resultado existente usando updateQuery — essa é a base da rolagem infinita.

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 busca

A opção fetchPolicy controla o uso do cache: cache-first (padrão) lê o cache antes da rede, network-only sempre acessa o servidor, e cache-and-network exibe o cache e depois o atualiza.

useQuery(QUERY, null, {
  fetchPolicy: 'cache-and-network'
})

Consultas condicionais

Use a opção enabled para adiar uma consulta até que uma condição seja atendida — por exemplo, não faça a busca até que um id seja selecionado.

const id = ref(null)
useQuery(QUERY, () => ({ id: id.value }), {
  enabled: computed(() => id.value !== null)
})

Verificação rápida

Teste seus conhecimentos sobre useQuery.

Recapitulação

Você aprendeu a usar useQuery:

  • Retorna resultado reativo, carregamento e erro.
  • Leia os dados por meio de result.value.
  • Passe as variáveis como um objeto ou uma função para obter reatividade.
  • refetch() executa novamente, fetchMore() faz a paginação e fetchPolicy controla o uso do cache.

Perguntas Frequentes

A aula “useQuery para busca de dados” é grátis?

Sim — o texto completo de “useQuery para busca de dados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “useQuery para busca de dados”?

useQuery(QUERY), resultado, carregamento, erro, variáveis e opções de fetchPolicy. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “useQuery para busca de dados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração do Apollo Client no Vue 3
  2. useQuery para busca de dados
  3. useMutation para alterações de dados
  4. Assinaturas em tempo real com useSubscription
← Voltar para Vue Academy