Como consumir uma API GraphQL utilizando Vue 3 e Vue Apollo

Eai galera, beleza? Fazendo um pequeno projeto, em que precisava consumir uma API GraphQL utilizando Vue 3, tive dificuldades em encontrar conteúdos em Português sobre. Então resolvi escrever esse pequeno artigo sobre as soluções que encontrei e que apliquei, espero que gostem. 🦾🤙

Vue Apollo é uma biblioteca que nos permite usar o Apollo Client com o Vue.js. O Apollo Client é uma biblioteca para consumir APIs GraphQL e é muito utilizado na comunidade de desenvolvimento web. Hoje, vamos aprender como usar o Vue Apollo com o Vue 3 para consumir APIs GraphQL.

Antes de começar, certifique-se de que o Vue.js e o Vue Apollo estão instalados em seu projeto. Se ainda não os instalou, execute os seguintes comandos no terminal:

npm install vue@next
npm install @vue/apollo-composable graphql apollo-boost

Em seguida, configure o Vue Apollo para que possa ser usado em toda a aplicação. Crie um arquivo vue-apollo.js em src/plugins/ e adicione o seguinte código:

import { provide } from '@vue/composition-api';
import VueApollo from '@vue/apollo-composable';
import { DefaultApolloClient } from '@vue/apollo-composable';
import { ApolloClient, InMemoryCache } from '@apollo/client';

const apolloClient = new ApolloClient({
  uri: '[URL da API GraphQL]',
  cache: new InMemoryCache(),
});

export default ({ app }) => {
  app.setup = () => {
    provide(VueApollo.ApolloSymbol, DefaultApolloClient);
  };
};

export const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
});

Aqui, estamos criando um cliente Apollo e fornecendo-o para o Vue Apollo. Lembre-se de substituir [URL da API GraphQL] pela URL da sua API GraphQL.

Em seguida, importe e use o apolloProvider no seu componente Vue. Por exemplo:

<script>
import { useQuery } from '@vue/apollo-composable';
import { gql } from 'graphql-tag';
import { apolloProvider } from '../plugins/vue-apollo';

const CHARACTER_QUERY = gql`
  query Character($id: ID!) {
    character(id: $id) {
      id
      name
    }
  }
`;

export default {
  setup() {
    const { result: { data }, loading } = 
     useQuery(CHARACTER_QUERY, { id: 1 }, apolloProvider);

    return {
      data,
      loading,
    };
  },
};
</script>

<template>
  <div>
    <h1>{{ data?.character?.name }}</h1>
  </div>
</template>

Aqui, estamos usando o useQuery do Vue Apollo para executar a consulta BOOK_QUERY e passando o apolloProvider como argumento. O resultado da consulta é desestruturado para acessar a propriedade data e loading.

Observe que usamos o setup() em vez de created() para inicializar a consulta. O setup() é uma nova maneira de inicializar componentes no Vue 3 usando Composition API.

Além disso, estamos usando a função gql do pacote graphql-tag para definir a consulta em vez de usar uma string simples. Isso ajuda a validar a consulta em tempo de compilação e fornecer destaque de sintaxe em editores de código.

Agora, você está pronto para consumir APIs GraphQL com o Vue Apollo e Vue 3. Lembre-se de que o Vue Apollo oferece muitas outras funcionalidades, como useMutation para executar mutações GraphQL e useSubscription para se inscrever em atualizações em tempo real. Consulte a documentação oficial do Vue Apollo.