0Pricing
Vue Academy · Aula

Configuração do Apollo Client no Vue 3

ApolloClient, InMemoryCache, provideApolloClient() e configuração de @vue/apollo-composable.

Configuração do Apollo Client no Vue 3 é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 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.

GraphQL com Vue

GraphQL permite que o cliente solicite exatamente os dados necessários em uma única requisição. O Apollo Client é o cliente GraphQL mais popular, e @vue/apollo-composable o integra à API de composição do Vue 3.

Instalando os pacotes

Você precisa do núcleo do Apollo, do analisador do GraphQL e da camada de composição do Vue.

npm install @apollo/client graphql @vue/apollo-composable

Criando o cliente

Um cliente Apollo precisa de uma uri de servidor e de um cache. InMemoryCache armazena os resultados das consultas para que leituras repetidas sejam instantâneas.

import { ApolloClient, InMemoryCache } from '@apollo/client/core'

const apolloClient = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
})

O que o armazenamento em cache faz

O InMemoryCache normaliza as respostas pelo identificador da entidade. Quando duas consultas retornam o mesmo objeto, o armazenamento o mantém uma única vez, e atualizá-lo atualiza todas as visualizações que o utilizam.

Disponibilizando o cliente

Registre o cliente em todo o aplicativo para que cada componente possa executar consultas. A chave de injeção DefaultApolloClient o conecta à API de composição.

import { DefaultApolloClient } from '@vue/apollo-composable'
import { createApp, provide, h } from 'vue'

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
    return () => h(App)
  }
})

Vários clientes

Para vários pontos de acesso GraphQL, forneça um mapa de ApolloClients e atribua um nome a cada cliente. Os componentes escolhem um deles por meio da opção clientId.

import { ApolloClients } from '@vue/apollo-composable'

provide(ApolloClients, {
  default: apolloClient,
  analytics: analyticsClient
})

provideApolloClient

Fora do setup de um componente — por exemplo, dentro de uma função de composição — use provideApolloClient para disponibilizar o cliente às chamadas de useQuery.

import { provideApolloClient } from '@vue/apollo-composable'

provideApolloClient(apolloClient)
// now useQuery works in this composable

Adicionando cabeçalhos de autenticação

As APIs reais precisam de um token de autenticação. Configure headers nas opções do cliente ou use um link do Apollo para anexar o token a cada requisição.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  headers: {
    Authorization: 'Bearer ' + token
  }
})

Configurando opções padrão

O campo defaultOptions ajusta comportamentos como a política de busca padrão — por exemplo, sempre ler primeiro do armazenamento em cache.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: { fetchPolicy: 'cache-and-network' }
  }
})

Escrevendo sua primeira consulta

Defina uma consulta com a tag de modelo gql de @apollo/client/core. Ela analisa a sequência GraphQL e a transforma em um documento que o Apollo entende.

import { gql } from '@apollo/client/core'

const GET_POSTS = gql(
  'query { posts { id title } }'
)

Verificando a configuração

Depois que o cliente for disponibilizado, qualquer componente poderá chamar useQuery com esse documento. Se os dados retornarem, o cliente e o provedor estarão conectados corretamente.

Verificação rápida

Teste seus conhecimentos sobre a configuração do Apollo.

Recapitulação

Você configurou o Apollo no Vue 3:

  • Crie um ApolloClient com uma uri e um InMemoryCache.
  • O cache normaliza os resultados pelo identificador da entidade.
  • Disponibilize-o com DefaultApolloClient (ou ApolloClients para vários clientes).
  • Use provideApolloClient dentro de funções de composição; defina consultas com gql.

Perguntas Frequentes

A aula “Configuração do Apollo Client no Vue 3” é grátis?

Sim — o texto completo de “Configuração do Apollo Client no Vue 3” é 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 “Configuração do Apollo Client no Vue 3”?

ApolloClient, InMemoryCache, provideApolloClient() e configuração de @vue/apollo-composable. 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 1 de 4.

Quanto tempo leva a aula “Configuração do Apollo Client no Vue 3”?

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