🚀 Nuova versione beta disponibile! Feedback o problemi? Contattaci

Integrazione di un'API GraphQL con React usando Apollo Client

Codegrind Team•Sep 03 2024

Integrare un’API GraphQL con React utilizzando Apollo Client ti permette di sfruttare la potenza di GraphQL per gestire i dati in modo efficiente all’interno di un’applicazione React. Apollo Client è la libreria più popolare per interfacciarsi con un’API GraphQL in un ambiente React, offrendo funzionalità avanzate come caching, gestione degli errori, aggiornamenti in tempo reale e molto altro.

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

Prerequisiti

Prima di iniziare, assicurati di avere:

  • Node.js e npm installati
  • Create React App installato (npx create-react-app)
  • Conoscenza di base di React e GraphQL
  • Un’API GraphQL giĂ  funzionante (puoi utilizzare un server GraphQL configurato con Apollo Server)

Step 1: Creazione di un Progetto React

Se non hai giĂ  un progetto React, puoi crearne uno nuovo utilizzando Create React App:

npx create-react-app my-react-app
cd my-react-app

Step 2: Installazione di Apollo Client

Per integrare Apollo Client in React, installa le seguenti dipendenze:

npm install @apollo/client graphql
  • @apollo/client: La libreria principale di Apollo Client per React.
  • graphql: La libreria necessaria per eseguire query e mutazioni GraphQL.

Step 3: Configurazione di Apollo Client in React

Configurazione di Apollo Provider

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

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

const client = new ApolloClient({
  uri: "http://localhost:4000/graphql", // Sostituisci con il tuo endpoint GraphQL
  cache: new InMemoryCache(),
});

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

export default ApolloProvider;

Integrazione di ApolloProvider nell’App

Importa e utilizza ApolloProvider nel file index.js per avvolgere l’intera applicazione React:

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ApolloProvider>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ApolloProvider>
);

Questo passaggio assicura che l’intera applicazione React 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 React.

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 React: Crea un nuovo componente Users.js:
import React from "react";
import { useQuery, gql } from "@apollo/client";

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

function Users() {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.users.map((user) => (
        <li key={user.id}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  );
}

export default Users;
  1. Utilizza il Componente nel Componente Principale (App.js):
import React from "react";
import Users from "./Users";

function App() {
  return (
    <div className="App">
      <h1>Users List</h1>
      <Users />
    </div>
  );
}

export default App;

Spiegazione del Codice

  • useQuery: Un hook fornito da Apollo Client 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 React: Crea un nuovo componente AddUser.js:
import React, { useState } from "react";
import { useMutation, gql } from "@apollo/client";

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

function AddUser() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [addUser, { data, loading, error }] = useMutation(ADD_USER);

  const handleSubmit = (e) => {
    e.preventDefault();
    addUser({ variables: { name, email } });
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Add User</button>
    </form>
  );
}

export default AddUser;
  1. Utilizza il Componente AddUser in App.js:
import React from "react";
import Users from "./Users";
import AddUser from "./AddUser";

function App() {
  return (
    <div className="App">
      <h1>Users List</h1>
      <Users />
      <h2>Add a new user</h2>
      <AddUser />
    </div>
  );
}

export default App;

Spiegazione del Codice

  • useMutation: Un hook fornito da Apollo Client 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 [addUser] = useMutation(ADD_USER, {
  update(cache, { data: { createUser } }) {
    const { users } = cache.readQuery({ query: GET_USERS });
    cache.writeQuery({
      query: GET_USERS,
      data: { users: users.concat([createUser]) },
    });
  },
});

Conclusione

In questa guida, hai imparato a integrare un’API GraphQL con un’applicazione React utilizzando Apollo Client. Hai visto come configurare Apollo Client, eseguire query e mutazioni, e gestire la cache e gli aggiornamenti in tempo reale. Questa configurazione ti permette di sfruttare appieno la potenza di GraphQL all’interno di React, creando applicazioni interattive, scalabili e facili da mantenere.

Utilizzando Apollo Client, puoi migliorare significativamente l’efficienza della tua applicazione React, riducendo il numero di richieste al server e migliorando la gestione dei dati. Con queste conoscenze, sei pronto per sviluppare applicazioni moderne e reattive con React e GraphQL.

PrecedenteUrqlSuccessivoIntegrazione con Vue.js