Come usare Apollo Client in Vue.js

  • Vue.js
  • Gabriele Romanato

Apollo Client è il più celebre client GraphQL attualmente disponibile nell'ecosistema JavaScript. In questo articolo vedremo come installarlo ed utilizzarlo in Vue.js.

Installazione e configurazione

L'installazione consiste nell'aggiunta dei due package NPM essenziali:

npm install @apollo/client graphql --save

Inseriamo a questo punto una variabile nel nostro file .envcontenente l'endpoint delle nostre API GraphQL:

VITE_API_URL=https://example.com/graphql

Creare il client

Ora possiamo creare un file contenente l'istanza del nostro client in modo da poterlo utilizzare per effettuare query e mutation.

// src/api/client.js

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

const client = new ApolloClient({
  link: new HttpLink({
    uri: import.meta.env.VITE_API_URL,
  }),
  cache: new InMemoryCache(),
});

export default client;

Se le nostre API sono protette da un token di autorizzazione, dobbiamo inserirlo negli header dell'istanza del nostro client.

// src/api/client.js

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

const client = new ApolloClient({
  link: new HttpLink({
    uri: import.meta.env.VITE_API_URL,
    headers: {
      authorization: localStorage.getItem('auth-token') || '',
    },
  }),
  cache: new InMemoryCache(),
});

export default client;

Query

Per effettuare una query sulle nostre API, possiamo utilizzare il metodo query() del client. Se la nostra query contiene variabili, queste vanno specificate come proprietà dell'oggetto variables all'interno del metodo. La proprietà query utilizzerà un'instanza del package gql per la conversione della stringa della query.

// src/api/posts.js

import client from './client';
import { gql } from '@apollo/client';

export const getPosts = async (page = 1) => {
    const results = await client.query({
    query: gql`
      query posts($page: Int) {
        posts(page: $page) {
            id
            title
            body
        }
      }
    `,
    variables: {
      page: page,
    },
  });
  return {
    posts: results.data.posts
  };
};

Mutation

Per effettuare una mutation possiamo utilizzare il metodo mutate() del client. La sintassi è simile a quella vista per le query, ad eccezione dell'uso della proprietà mutation in luogo di query.

export const deletePost = async (id) => {
   const results = await client.mutate({
    mutation: gql`
      mutation deletePost($id: ID!) {
        deletePost(id: $id) {
          id
        }
      }
    `,
    variables: {
      id: id,
    },
  });
  return results;
};

Conclusione

Apollo Client si rivela essere un'ottima soluzione per interagire con le API GraphQL in Node.js. La semplicità di configurazione e di utilizzo ne fanno una scelta consigliata per Vue.js.

Torna su