Skip to content

graphql.md

Latest commit

 

History

History
71 lines (47 loc) · 2.5 KB

graphql.md

File metadata and controls

71 lines (47 loc) · 2.5 KB

GraphQL

Apollo Angular

La solution la plus commune pour consommer des APIs GraphQL est le package Apollo Angular apollo-angular.

Configuration

Profitez des schematics d'apollo-angular !

yarn ng add apollo-angular

A défaut de disposer d'un mécanisme de configuration dynamique de votre application Angular, mettez en place l'URI de votre API GraphQL via les environnements Angular (fichiers environments/environment*.ts)

Plugin IntelliJ / WebStorm

Le plugin GraphQL d'IntelliJ / WebStorm facilite la consommation d'APIs GraphQL grâce à la découverte automatique du schéma puis l'autocomplétion.

https://plugins.jetbrains.com/plugin/8097-js-graphql

{% embed url="https://plugins.jetbrains.com/plugin/8097-js-graphql" %}

Services Query / Mutate

{% hint style="success" %} Bien qu'il soit possible d'utiliser directement les méthodes query, mutate et watchQuery du service Apollo pour exécuter des queries et mutations, depuis n'importe quel endroit de votre application, il est préférable d'utiliser des services dédiés à chaque query ou mutation qui héritent respectivement des classes Query et Mutation. {% endhint %}

@Injectable({
    providedIn: 'root'
})
export class UserListQuery extends Query<{ users: User[] }> {

    document = gql`query UserList {
        users {
            id
            firstName
            lastName
        }
    }`;

}

Ce service peut ensuite être utilisé ainsi :

this._userListQuery.fetch()
    .subscribe(({data}) => this.userList = data.users);

{% hint style="info" %} Le service dispose également d'une méthode watch qui vous permet d'observer les changements en cas d'activation du polling (option pollInterval) ou encore en cas de mise à jour du cache local par exemple. {% endhint %}

{% hint style="danger" %} Dans tous les cas, n'oubliez pas d'unsubscribe de l'Observable retourné ou d'utiliser RxScavenger.
https://github.com/wishtack/wishtack-steroids/tree/master/packages/rx-scavenger {% endhint %}

Factorisation des queries grâce au fragments

Pensez à utiliser les fragments pour factoriser vos queries.

https://www.apollographql.com/docs/angular/features/fragments.html

{% embed url="https://www.apollographql.com/docs/angular/features/fragments.html" %}