Usare Apollo client in Angular

Apollo, una delle più usate librerie per GraphQL, ha un modulo specifico per Angular.

Oggi vediamo usarlo; ovviamente la parte server deve essere già attiva e funzionante.

Io sto usando FaunaDB come server.

Partiamo dall'installazione:

ng add apollo-angular

La procedura vi chiederà delle cose, tra le quali l'url del server; potete comunque modificarlo in seguito.

Alla fine dell'installazione verrà creato il file graphql.module.ts, che conterrà le varie impostazioni di Apollo.

Questo il mio:

import {NgModule} from '@angular/core';
import {APOLLO_OPTIONS} from 'apollo-angular';
import {ApolloClientOptions, ApolloLink, InMemoryCache} from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
import {setContext} from '@apollo/client/link/context';

const uri = 'https://graphql.fauna.com/graphql';
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {

    const auth = setContext((operation, context) => {
        return {
            headers: {
                Authorization: `Bearer TOKEN`
            }
        };
    });

    const link = ApolloLink.from([auth, httpLink.create({uri})]);
    const cache = new InMemoryCache();

    return {
        link,
        cache
    };
}

@NgModule({
    providers: [
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApollo,
            deps: [HttpLink],
        },
    ],
})

export class GraphQLModule {
}

In sostanza ho aggiunto la parte che riguarda il token, in quanto è richiesto da FaunaDB.

Nel nostro componente abbiamo una cosa del genere:

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

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {

    private querySubscription: Subscription;

    constructor(
        private apollo: Apollo,
    ) { }

    ngOnInit(): void {
        const allMusica = gql`
            query SelectAll {
                allMusica {
                    data {
                       _id
                       titolo
                       autore
                    }
                }
            }
        `;

        this.querySubscription = this.apollo.watchQuery<any>({
            query: allMusica
        }).valueChanges.subscribe((res) => {
            console.log(res);
        });
    }

}

Enjoy!