Integrazione di un'API GraphQL con Angular: Guida Completa

L’integrazione di un’API GraphQL in un’applicazione Angular è un’operazione che consente di sfruttare la potenza di GraphQL per ottenere e gestire dati in modo efficiente. Utilizzando Apollo Client per Angular, è possibile interagire con un server GraphQL direttamente all’interno di un’applicazione Angular, beneficiando di funzionalità come caching, gestione degli errori e aggiornamenti in tempo reale.

In questa guida, ti mostrerò come configurare e integrare Apollo Client in un’applicazione Angular per consumare un’API GraphQL.

Prerequisiti

Prima di iniziare, assicurati di avere:

• Node.js e npm installati
• Angular CLI installato (npm install -g @angular/cli)
• Conoscenza di base di Angular e GraphQL
• Un’API GraphQL già funzionante

Step 1: Creazione di un Progetto Angular

Se non hai già un progetto Angular, puoi crearne uno nuovo utilizzando Angular CLI:

ng new my-angular-app
cd my-angular-app

Durante la creazione del progetto, scegli le opzioni predefinite o personalizzale in base alle tue esigenze.

Step 2: Installazione di Apollo Client per Angular

Per integrare Apollo Client in Angular, devi installare alcune librerie specifiche:

npm install @apollo/client apollo-angular graphql

• @apollo/client: La libreria principale di Apollo Client.
• apollo-angular: Il wrapper specifico per Angular che facilita l’integrazione di Apollo Client.
• graphql: La libreria GraphQL che serve per gestire le query e le mutazioni.

Step 3: Configurazione di Apollo Client in Angular

Una volta installate le dipendenze, è necessario configurare Apollo Client nel progetto Angular.

Creazione del Modulo Apollo

Inizia creando un modulo Angular dedicato alla configurazione di Apollo Client. Questo modulo gestirà la configurazione e sarà importato nel modulo principale dell’applicazione.

Crea un file graphql.module.ts nella cartella src/app:

import { NgModule } from "@angular/core";
import { HttpLink } from "apollo-angular/http";
import { ApolloModule, APOLLO_OPTIONS } from "apollo-angular";
import { InMemoryCache } from "@apollo/client/core";

@NgModule({
  imports: [ApolloModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: (httpLink: HttpLink) => {
        return {
          cache: new InMemoryCache(),
          link: httpLink.create({
            uri: "http://localhost:4000/graphql", // URL del tuo server GraphQL
          }),
        };
      },
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

Importazione del Modulo Apollo

Ora, importa il GraphQLModule nel modulo principale dell’applicazione (app.module.ts):

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { GraphQLModule } from "./graphql.module";
import { HttpClientModule } from "@angular/common/http";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule, // Necessario per HttpLink
    GraphQLModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

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 Angular.

Esempio di Query in un Componente Angular

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

1. Creazione della Query: Definisci la query in un componente Angular (app.component.ts):

import { Component, OnInit } from "@angular/core";
import { Apollo, gql } from "apollo-angular";

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  users: any[] = [];

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.apollo
      .watchQuery({
        query: GET_USERS,
      })
      .valueChanges.subscribe((result: any) => {
        this.users = result?.data?.users;
      });
  }
}

2. Visualizzazione dei Dati nel Template: Visualizza i dati ottenuti dalla query nel template del componente (app.component.html):

<div *ngIf="users.length > 0; else loading">
  <ul>
    <li *ngFor="let user of users">{{ user.name }} ({{ user.email }})</li>
  </ul>
</div>
<ng-template #loading>
  <p>Loading...</p>
</ng-template>

In questo esempio, GET_USERS è la query GraphQL che viene eseguita all’interno del metodo ngOnInit. I risultati vengono quindi visualizzati nel template.

Step 5: Gestione delle Mutazioni

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

Esempio di Mutazione in un Componente Angular

Aggiungiamo una mutazione per creare un nuovo utente.

1. Definizione della Mutazione: Definisci la mutazione in un componente Angular (app.component.ts):

import { Component } from "@angular/core";
import { Apollo, gql } from "apollo-angular";

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  name: string = "";
  email: string = "";

  constructor(private apollo: Apollo) {}

  createUser() {
    this.apollo
      .mutate({
        mutation: CREATE_USER,
        variables: {
          name: this.name,
          email: this.email,
        },
      })
      .subscribe((result: any) => {
        console.log("User created:", result.data.createUser);
        // Puoi aggiornare la lista degli utenti qui, se necessario
      });
  }
}

2. Form per la Creazione dell’Utente: Aggiungi un modulo nel template per inserire i dati dell’utente (app.component.html):

<form (ngSubmit)="createUser()">
  <input
    type="text"
    [(ngModel)]="name"
    name="name"
    placeholder="Name"
    required />
  <input
    type="email"
    [(ngModel)]="email"
    name="email"
    placeholder="Email"
    required />
  <button type="submit">Create User</button>
</form>

In questo esempio, la mutazione CREATE_USER viene inviata quando l’utente invia il modulo, e il nuovo utente viene creato nel backend GraphQL.

Step 6: Best Practices e Ottimizzazioni

1. Caching: Apollo Client utilizza un caching integrato che può essere configurato per ottimizzare le prestazioni dell’applicazione.
2. Gestione degli Errori: Implementa un’adeguata gestione degli errori per gestire problemi come errori di rete o risposte non valide dal server GraphQL.
3. Ottimizzazione delle Query: Utilizza tecniche come la paginazione e il lazy loading per migliorare l’efficienza delle query GraphQL.

Conclusione

L’integrazione di GraphQL in un’applicazione Angular utilizzando Apollo Client consente di sfruttare appieno la flessibilità e la potenza di GraphQL. Seguendo questa guida, sarai in grado di configurare Apollo Client, eseguire query e mutazioni e gestire i dati dell’applicazione in modo efficiente e scalabile. Con Apollo e Angular, puoi costruire applicazioni moderne e reattive, offrendo una migliore esperienza utente.