# 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` !

```bash
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 %}

```typescript
@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 :

```typescript
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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide-angular.wishtack.io/angular/graphql.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.