🚀 Nuova versione beta disponibile! Feedback o problemi? Contattaci

Introduzione ad Apollo Client: Guida Completa per l'Utilizzo di GraphQL nel Frontend

Codegrind Team•Aug 28 2024

Apollo Client è una libreria potente e flessibile che consente di integrare facilmente GraphQL nelle applicazioni frontend. Con Apollo Client, puoi eseguire query e mutazioni, gestire lo stato globale dell’applicazione e interagire con un server GraphQL con un’esperienza fluida e ottimizzata.

In questa guida, esploreremo come configurare e utilizzare Apollo Client nelle tue applicazioni frontend, come eseguire query e mutazioni, e come sfruttare appieno le funzionalità avanzate di Apollo Client.

Cos’è Apollo Client?

Apollo Client è una libreria che consente di utilizzare GraphQL nel frontend delle applicazioni, gestendo le richieste al server, la cache, e lo stato dell’applicazione. È compatibile con diverse librerie di frontend, come React, Angular e Vue.js, ma è più comunemente utilizzato con React.

Caratteristiche Principali di Apollo Client

  • Esecuzione di Query e Mutazioni: Invio di richieste GraphQL al server e gestione delle risposte.
  • Gestione della Cache: Apollo Client memorizza i dati delle query nella cache, ottimizzando le prestazioni e riducendo le richieste al server.
  • Gestione dello Stato Locale: Utilizzo della cache di Apollo per gestire lo stato dell’applicazione, riducendo la necessità di altre librerie di gestione dello stato come Redux.
  • Sottoscrizioni: Supporto per aggiornamenti in tempo reale tramite GraphQL subscriptions.

Configurazione di Apollo Client

1. Installare Apollo Client

Per iniziare, devi installare @apollo/client insieme a GraphQL:

npm install @apollo/client graphql

2. Configurare Apollo Client in un Progetto React

Supponiamo di avere un progetto React. Ecco come configurare Apollo Client:

Configurazione di Base

Crea un file chiamato ApolloProvider.js per configurare Apollo Client:

import React from "react";
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider as Provider,
} from "@apollo/client";

const client = new ApolloClient({
  uri: "https://your-graphql-endpoint.com/graphql",
  cache: new InMemoryCache(),
});

const ApolloProvider = ({ children }) => {
  return <Provider client={client}>{children}</Provider>;
};

export default ApolloProvider;

Poi, usa ApolloProvider per avvolgere la tua applicazione nel file principale (index.js o App.js):

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import ApolloProvider from "./ApolloProvider";

ReactDOM.render(
  <ApolloProvider>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

Esecuzione di Query con Apollo Client

1. Scrivere una Query GraphQL

Crea una query GraphQL per ottenere dati. Supponiamo di voler ottenere un elenco di post con titolo e autore.

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

export const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      author {
        name
      }
    }
  }
`;

2. Utilizzare useQuery per Eseguire la Query

Nel componente React, utilizza l’hook useQuery per eseguire la query e gestire i risultati.

import React from "react";
import { useQuery } from "@apollo/client";
import { GET_POSTS } from "./queries";

const Posts = () => {
  const { loading, error, data } = useQuery(GET_POSTS);

  if (loading) return <p>Caricamento in corso...</p>;
  if (error) return <p>Errore: {error.message}</p>;

  return (
    <div>
      <h2>Elenco dei Post</h2>
      <ul>
        {data.posts.map((post) => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>Autore: {post.author.name}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Posts;

Quando il componente Posts viene montato, la query viene eseguita, e i dati vengono visualizzati una volta che la risposta è ricevuta.

Esecuzione di Mutazioni con Apollo Client

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

1. Scrivere una Mutazione GraphQL

Crea una mutazione GraphQL per aggiungere un nuovo post:

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

export const ADD_POST = gql`
  mutation AddPost($title: String!, $author: String!) {
    addPost(title: $title, author: $author) {
      id
      title
      author {
        name
      }
    }
  }
`;

2. Utilizzare useMutation per Eseguire la Mutazione

Nel componente React, utilizza l’hook useMutation per eseguire la mutazione:

import React, { useState } from "react";
import { useMutation } from "@apollo/client";
import { ADD_POST, GET_POSTS } from "./queries";

const AddPost = () => {
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");

  const [addPost, { data, loading, error }] = useMutation(ADD_POST, {
    refetchQueries: [{ query: GET_POSTS }],
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    addPost({ variables: { title, author } });
    setTitle("");
    setAuthor("");
  };

  if (loading) return <p>Caricamento in corso...</p>;
  if (error) return <p>Errore: {error.message}</p>;

  return (
    <div>
      <h2>Aggiungi un Nuovo Post</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Titolo"
        />
        <input
          type="text"
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
          placeholder="Autore"
        />
        <button type="submit">Aggiungi Post</button>
      </form>
    </div>
  );
};

export default AddPost;

In questo esempio, useMutation viene utilizzato per eseguire la mutazione ADD_POST, e refetchQueries viene utilizzato per aggiornare l’elenco dei post dopo che un nuovo post è stato aggiunto.

Gestione della Cache con Apollo Client

Apollo Client gestisce automaticamente la cache dei dati ricevuti dalle query GraphQL, il che riduce il numero di richieste al server e migliora le prestazioni dell’applicazione.

Accesso Diretto alla Cache

Puoi accedere direttamente alla cache per leggere o scrivere dati senza dover eseguire una query al server:

const { cache } = useApolloClient();

const posts = cache.readQuery({ query: GET_POSTS });
console.log(posts);

Aggiornamento Manuale della Cache

Quando esegui una mutazione, puoi aggiornare manualmente la cache per riflettere i cambiamenti senza dover rifare una query completa:

const [addPost] = useMutation(ADD_POST, {
  update(cache, { data: { addPost } }) {
    const { posts } = cache.readQuery({ query: GET_POSTS });
    cache.writeQuery({
      query: GET_POSTS,
      data: { posts: posts.concat([addPost]) },
    });
  },
});

Sottoscrizioni in Tempo Reale

Apollo Client supporta le subscriptions per aggiornamenti in tempo reale:

Configurare Sottoscrizioni

Per utilizzare le subscriptions, è necessario configurare un client WebSocket:

import { split, HttpLink } from "@apollo/client";
import { WebSocketLink } from "@apollo/client/link/ws";
import { getMainDefinition } from "@apollo/client/utilities";

const httpLink = new HttpLink({
  uri: "https://your-graphql-endpoint.com/graphql",
});

const wsLink = new WebSocketLink({
  uri: "ws://your-graphql-endpoint.com/graphql",
  options: {
    reconnect: true,
  },
});

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  },
  wsLink,
  httpLink
);

const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache(),
});

Utilizzare useSubscription

import { useSubscription, gql } from '@apollo/client

';

const POST_ADDED = gql`
  subscription {
    postAdded {
      id
      title
      author {
        name
      }
    }
  }
`;

const PostList = () => {
  const { data, loading } = useSubscription(POST_ADDED);

  if (loading) return <p>Caricamento in corso...</p>;

  return (
    <div>
      <h2>Nuovo Post Aggiunto:</h2>
      <p>{data.postAdded.title} di {data.postAdded.author.name}</p>
    </div>
  );
};

In questo esempio, useSubscription ascolta il server per nuovi post aggiunti e aggiorna il frontend in tempo reale.

Best Practices per l’Uso di Apollo Client

  1. Organizza le Query e le Mutazioni: Mantieni le query, le mutazioni e le subscriptions organizzate in file separati per una migliore manutenibilità.

  2. Gestione Efficiente della Cache: Sfrutta la cache di Apollo per ridurre il numero di richieste al server e migliorare le performance.

  3. Sfrutta le Sottoscrizioni: Usa le subscriptions per aggiornamenti in tempo reale dove necessario, come per chat, notifiche o dati live.

  4. Gestisci gli Errori: Implementa una gestione degli errori robusta per gestire le varie situazioni che possono verificarsi durante le richieste al server GraphQL.

  5. Lazy Query: Utilizza query lazy (useLazyQuery) per eseguire query on-demand invece che al montaggio del componente.

Conclusione

Apollo Client è uno strumento potente per integrare GraphQL nel frontend delle applicazioni. Con la sua gestione della cache, le subscriptions in tempo reale e la facilità d’uso con React, Apollo Client ti permette di creare applicazioni più interattive e reattive. Seguendo le best practices e le tecniche mostrate in questa guida, sarai in grado di sfruttare al meglio Apollo Client per creare applicazioni frontend moderne e performanti.

PrecedenteIntroduzione ai Client GraphQLSuccessivoRelay Modern