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 !1
yarn ng add apollo-angular
Copied!
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.
GraphQL - IntelliJ IDEs Plugin | Marketplace
JetBrains Marketplace
Services Query / Mutate
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.1
@Injectable({
2
providedIn: 'root'
3
})
4
export class UserListQuery extends Query<{ users: User[] }> {
5
6
document = gql`query UserList {
7
users {
8
id
9
firstName
10
lastName
11
}
12
}`;
13
14
}
Copied!
Ce service peut ensuite être utilisé ainsi :
1
this._userListQuery.fetch()
2
.subscribe(({data}) => this.userList = data.users);
Copied!
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.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-scavengerFactorisation des queries grâce au fragments
Pensez à utiliser les fragments pour factoriser vos queries.
https://www.apollographql.com/docs/angular/features/fragments.html
www.apollographql.com
Dernière mise à jour 3yr ago