Explorando o Potencial do Vue 3 com Composition API, TypeScript e GraphQL: Um Guia para Iniciantes

Introdução

Se você é novo em desenvolvimento web moderno ou está procurando atualizar seus conhecimentos com as últimas tecnologias, este guia é para você. Aqui, exploraremos o Vue 3, uma framework JavaScript progressiva; a Composition API, que permite uma melhor organização do código; TypeScript, um superset de JavaScript que adiciona tipos estáticos; e GraphQL, uma linguagem de consulta para APIs que representa uma alternativa eficiente ao REST.

O Que Você Precisa Saber

Antes de mergulharmos, é essencial ter uma compreensão básica de HTML, CSS e JavaScript. Estaremos utilizando o PNPM como gerenciador de pacotes para uma instalação mais eficiente das dependências.

Documentação Oficial e Recursos Úteis

• Vue 3: Guia Oficial do Vue 3
• Composition API: Documentação da Composition API
• TypeScript: Documentação Oficial do TypeScript
• GraphQL: Documentação Oficial do GraphQL
• PNPM: Documentação do PNPM

Configurando o Ambiente com PNPM

pnpm add @apollo/client graphql

Esta linha de comando instala o Apollo Client, uma implementação do GraphQL, e a biblioteca graphql, necessária para definir schemas e realizar consultas.

Estrutura de Pastas Avançada para Projetos Escaláveis

Detalhamos uma estrutura de pastas projetada para promover a organização e escalabilidade:

/src
    /composables
        useUserData.ts
    /graphql
        /mutations
        /queries
            getUser.gql
    /types
        index.ts
    /components
        UserProfile.vue
    /views
        Home.vue

• Composables: Funções reutilizáveis que encapsulam lógica reativa.
• GraphQL: Separação de consultas (queries) e alterações de dados (mutations).
• Types: Definições de tipos TypeScript para garantir a segurança de tipos no projeto.
• Components e Views: Organização dos componentes Vue e páginas da aplicação.

Iniciando com Composition API e TypeScript

A Composition API permite organizar o código relacionado de uma forma mais lógica, enquanto o TypeScript adiciona tipagem estática, aumentando a segurança e previsibilidade do desenvolvimento.

1. Composable useUserData:

/src/composables/useUserData.ts:

import { reactive, toRefs } from "vue";
import { useQuery } from "@apollo/client";
import GET_USER from "../graphql/queries/getUser.gql";

interface User {
  id: string;
  name: string;
  email: string;
}

export function useUserData(userId: string) {
  const state = reactive({
    user: null as User | null,
    loading: true,
  });

  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId },
  });

  if (data) {
    state.user = data.user;
    state.loading = false;
  }

  return {
    ...toRefs(state),
    error,
  };
}

GraphQL: Consultas e Mutations

GraphQL nos permite especificar exatamente quais dados queremos de uma API, reduzindo o over-fetching e under-fetching. Utilizamos o Apollo Client para integrar essas consultas dentro dos componentes Vue.

2. GraphQL Query getUser:

/src/graphql/queries/getUser.gql:

query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

3. Componente UserProfile:

/src/components/UserProfile.vue:

<template>
  <div v-if="user">
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useUserData } from "../composables/useUserData";

export default defineComponent({
  setup() {
    const userId = "1"; // Este valor geralmente vem de alguma fonte dinâmica
    const { user, loading, error } = useUserData(userId);

    return {
      user,
      loading,
      error,
    };
  },
});
</script>

Conclusão

Este guia ofereceu uma introdução ao desenvolvimento de aplicações modernas com Vue 3, Composition API, TypeScript e GraphQL. Encorajamos você a explorar mais a fundo cada tecnologia através de seus recursos oficiais para aprimorar seus projetos web.