Usare Apollo client in Angular

Mattepuffo's logo
Usare Apollo client in Angular

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!


Condividi su Facebook

Commentami!