> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# @appsignal/urql

[`urql`](https://urql.dev/) est un client GraphQL pour les applications JavaScript. Le package `@appsignal/urql` fournit un [exchange personnalisé](https://urql.dev/docs/architecture/#the-exchanges) qui, une fois ajouté à votre client `urql`, intercepte automatiquement toutes les erreurs GraphQL et les signale à AppSignal.

## Installation

### `npm` ou `yarn`

Ajoutez les packages `@appsignal/urql` et `@appsignal/javascript` à votre `package.json`. Ensuite, exécutez `npm install`/`yarn install`.

Vous pouvez également ajouter ces packages à votre `package.json` en ligne de commande :

<CodeGroup>
  ```sh Shell theme={null}
  yarn add @appsignal/javascript @appsignal/urql
  npm install @appsignal/javascript @appsignal/urql
  ```
</CodeGroup>

### Import maps JSPM.io

Avec le [générateur d'import maps JSPM.io](https://generator.jspm.io/), vous pouvez générer une import map pour les dépendances de votre application.

Ajoutez `@appsignal/javascript` et `@appsignal/urql` à la liste des dépendances dans le générateur, puis ajoutez l'import map générée et les shims des modules ES au code de votre application.

### `rails-importmap`

Utilisez la commande suivante pour ajouter ces packages aux import maps de votre application Rails :

<CodeGroup>
  ```sh Shell theme={null}
  ./bin/importmap pin @appsignal/javascript @appsignal/urql
  ```
</CodeGroup>

## Utilisation

### Ajouter l'exchange au client

Le package `@appsignal/urql` fournit un exchange urql personnalisé qui signale automatiquement les erreurs GraphQL à AppSignal. Cet exchange intercepte tous les résultats de requêtes et mutations et signale toutes les erreurs sans nécessiter de modifications des appels `useQuery` individuels.

<CodeGroup>
  ```typescript TypeScript theme={null}
  import { createClient, fetchExchange } from "urql";
  import Appsignal from "@appsignal/javascript";
  import { createAppsignalExchange } from "@appsignal/urql";

  const appsignal = new Appsignal({
    key: "YOUR FRONTEND API KEY",
  });

  const client = createClient({
    url: "https://api.example.com/graphql",
    exchanges: [createAppsignalExchange(appsignal), fetchExchange],
  });
  ```
</CodeGroup>

L'exchange va automatiquement :

* Signaler toutes les erreurs GraphQL à AppSignal
* Inclure le corps de la requête GraphQL comme paramètre (visible dans les détails d'erreur d'AppSignal)
* Inclure l'URL du point d'accès comme tag
* Inclure le nom et le type de l'opération comme tags (lorsqu'ils sont disponibles)

## Détails de l'erreur

Lorsqu'une erreur GraphQL se produit, AppSignal recevra :

* **Message d'erreur** : Une concaténation de tous les messages d'erreur GraphQL
* **Tags** :
  * `endpoint` : L'URL du point d'accès GraphQL
  * `operationName` : Le nom de l'opération GraphQL (si spécifié)
  * `operationType` : Le type d'opération (query, mutation, subscription)
* **Paramètres** :
  * `query` : Le corps complet de la requête GraphQL

Cela fournit un contexte complet pour déboguer les erreurs GraphQL dans votre application.