Como configurar o Nuxt 3 + Nuxt Apollo

Por que usar o Nuxt Apollo?

É oficial, diretamente do nuxt-modules e é bem simples de configurar.

TL;DR

Instale o @nuxtjs/apollo@next + graphql no seu projeto. Depois insira a seguinte configuração no arquivo nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@nuxtjs/apollo"],
  apollo: {
    autoImports: true,
    proxyCookies: true,
    clients: {
      default: {
        connectToDevTools: true,
        httpEndpoint: SEU_ENDPOINT_AQUI_OU_ENV_VAR,
      },
    },
  },
});

Caso necessário adicione hooks para auth e error policy

Como configurar?

Depois de ter criado seu projeto Nuxt (se ainda não configurou siga esses passos) você deve installar o pacote @nuxtjs/apollo@next para poder ter acesso a ele no seu projeto e, além disso, deve instalar o graphql pra poder fazer suas queries.

yarn add @nuxtjs/apollo@next graphql

Obs.: não use graphql-tag vai disparar um erro na execucao da sua query

Depois vá no seu arquivo nuxt.config.ts e adicione o seguinte trecho

export default defineNuxtConfig({
  devtools: {
    enabled: true,
  },
  modules: ["@element-plus/nuxt", "@nuxtjs/apollo", "@nuxt/devtools"],
  apollo: {
    autoImports: true,
    proxyCookies: true,
    clients: {
      default: {
        connectToDevTools: true,
        httpEndpoint: SEU_ENDPOINT_AQUI_OU_ENV_VAR,
      },
    },
  },
});

Obs.: Existem mais configurações que podem ser inseridas. Veja mais aqui

Como usar?

Existem diversas estratégias de como consumir uma query. Então vou explicar algumas formas

1. Para pegar os dados no ssr e montar a página sem aquele "loading" ou "skeleton" podemos fazer uso do useAsyncQuery. Ele nada mais é do que um wrapper do useAsyncData do Nuxt.

2. Para pegar os dados no client side. Normalmente para components filhos que são injetados na tela sob demanda ou algo do tipo, usamos o useQuery.

   Ele pode ser usado no ssr, mas o melhor pra esse tipo de cenário é o useAsyncQuery

3. Para executar mudanças nos seus dados através de chamadas de mutations usamos o useMutation.

   Obs.: Você pode passar as variables na chamada do useMutation ou na chamada do mutate.

4. Para ficar observando as mudanças dos dados e ter atualização em tempo real via websocket, podemos usar useSubscription.