🚀 Nuova versione beta disponibile! Feedback o problemi? Contattaci

Integrazione di un'API GraphQL con Vue.js usando Apollo Client

Codegrind Team•Sep 03 2024

Integrare un’API GraphQL con Vue.js utilizzando Apollo Client è un ottimo modo per sfruttare la potenza di GraphQL per gestire i dati in modo efficiente all’interno di un’applicazione Vue. Apollo Client è una delle librerie più popolari per interfacciarsi con un’API GraphQL in un ambiente JavaScript, e offre una serie di funzionalità avanzate come caching, gestione degli errori, e aggiornamenti in tempo reale.

In questa guida, ti mostrerò come configurare Apollo Client in un’applicazione Vue.js e come utilizzare GraphQL per eseguire query e mutazioni.

Prerequisiti

Prima di iniziare, assicurati di avere:

  • Node.js e npm installati
  • Vue CLI installato (npm install -g @vue/cli)
  • Conoscenza di base di Vue.js e GraphQL
  • Un’API GraphQL giĂ  funzionante (puoi utilizzare un server GraphQL configurato con Apollo Server)

Step 1: Creazione di un Progetto Vue.js

Se non hai giĂ  un progetto Vue.js, puoi crearne uno nuovo utilizzando Vue CLI:

vue create my-vue-app
cd my-vue-app

Durante la creazione del progetto, puoi scegliere le opzioni predefinite o personalizzarle in base alle tue esigenze.

Step 2: Installazione di Apollo Client

Per integrare Apollo Client in Vue.js, devi installare le seguenti dipendenze:

npm install @apollo/client graphql @vue/apollo-composable
  • @apollo/client: La libreria principale di Apollo Client per Vue.js.
  • graphql: La libreria necessaria per eseguire query e mutazioni GraphQL.
  • @vue/apollo-composable: Fornisce composables Vue per utilizzare Apollo Client con la Composition API di Vue 3.

Step 3: Configurazione di Apollo Client in Vue.js

Configurazione di Apollo Client

Crea un file apollo.js nella cartella src per configurare Apollo Client:

import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client/core";
import { provideApolloClient } from "@vue/apollo-composable";

const httpLink = new HttpLink({
  uri: "http://localhost:4000/graphql", // Sostituisci con il tuo endpoint GraphQL
});

const cache = new InMemoryCache();

const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
});

provideApolloClient(apolloClient);

export default apolloClient;

Integrazione di Apollo Client nell’App

Modifica il file main.js per integrare Apollo Client nell’applicazione Vue.js:

import { createApp } from "vue";
import App from "./App.vue";
import apolloClient from "./apollo";

const app = createApp(App);

// Utilizza Apollo Client nel contesto dell'applicazione
app.provide("$apollo", apolloClient);

app.mount("#app");

Questo passaggio assicura che l’intera applicazione Vue.js abbia accesso ad Apollo Client per eseguire query e mutazioni.

Step 4: Creazione e Utilizzo delle Query GraphQL

Ora che Apollo Client è configurato, puoi iniziare a creare e utilizzare query GraphQL all’interno dei componenti Vue.

Esempio di Query per Ottenere Dati

Supponiamo di voler eseguire una query per ottenere una lista di utenti dal server GraphQL.

  1. Definisci la Query in un Componente Vue: Crea un nuovo componente Users.vue:
<template>
  <div>
    <h1>Users List</h1>
    <ul v-if="!loading">
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-if="error">Error: {{ error.message }}</p>
  </div>
</template>

<script>
import { gql, useQuery } from "@vue/apollo-composable";

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

export default {
  setup() {
    const { result, loading, error } = useQuery(GET_USERS);

    return {
      users: result,
      loading,
      error,
    };
  },
};
</script>
  1. Utilizza il Componente nel Componente Principale (App.vue):
<template>
  <div id="app">
    <Users />
  </div>
</template>

<script>
import Users from "./components/Users.vue";

export default {
  components: {
    Users,
  },
};
</script>

Spiegazione del Codice

  • useQuery: Un composable fornito da @vue/apollo-composable per eseguire query GraphQL e gestire lo stato di caricamento, errori e dati.
  • gql: Una funzione per scrivere query GraphQL in modo leggibile all’interno del codice JavaScript.

Step 5: Gestione delle Mutazioni

Le mutazioni GraphQL sono utilizzate per modificare i dati sul server, come aggiungere, aggiornare o eliminare record.

Esempio di Mutazione per Aggiungere un Utente

  1. Definisci la Mutazione in un Componente Vue: Crea un nuovo componente AddUser.vue:
<template>
  <form @submit.prevent="addUser">
    <input v-model="name" type="text" placeholder="Name" required />
    <input v-model="email" type="email" placeholder="Email" required />
    <button type="submit">Add User</button>
  </form>
</template>

<script>
import { gql, useMutation } from "@vue/apollo-composable";

const ADD_USER = gql`
  mutation AddUser($name: String!, $email: String!) {
    createUser(name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

export default {
  setup() {
    const name = ref("");
    const email = ref("");
    const { mutate, loading, error } = useMutation(ADD_USER, {
      variables: { name, email },
    });

    const addUser = () => {
      mutate();
    };

    return {
      name,
      email,
      addUser,
      loading,
      error,
    };
  },
};
</script>
  1. Utilizza il Componente AddUser in App.vue:
<template>
  <div id="app">
    <Users />
    <h2>Add a new user</h2>
    <AddUser />
  </div>
</template>

<script>
import Users from "./components/Users.vue";
import AddUser from "./components/AddUser.vue";

export default {
  components: {
    Users,
    AddUser,
  },
};
</script>

Spiegazione del Codice

  • useMutation: Un composable fornito da @vue/apollo-composable per eseguire mutazioni GraphQL. Funziona in modo simile a useQuery, ma permette di inviare dati al server.
  • gql: Viene utilizzato per definire la mutazione GraphQL.

Step 6: Caching e Aggiornamenti in Tempo Reale

Caching Automatica

Apollo Client include un sistema di caching automatico che riduce il numero di richieste HTTP eseguite e migliora le prestazioni dell’applicazione.

Quando esegui una mutazione che modifica i dati memorizzati nella cache, Apollo Client aggiornerĂ  automaticamente la cache se la mutazione restituisce i dati rilevanti.

Aggiornamento Manuale della Cache

In alcuni casi, potresti voler aggiornare manualmente la cache dopo una mutazione. Puoi farlo utilizzando la funzione update di useMutation:

const { mutate } = useMutation(ADD_USER, {
  update(cache, { data: { createUser } }) {
    const { users } = cache.readQuery({ query: GET_USERS });
    cache.writeQuery({
      query: GET_USERS,
      data: { users: users.concat([createUser]) },
    });
  },
});
PrecedenteIntegrazione con ReactSuccessivoIntegrazione con Angular