> ## 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/) is een GraphQL-client voor JavaScript-applicaties. Het pakket `@appsignal/urql` biedt een [custom exchange](https://urql.dev/docs/architecture/#the-exchanges) die, zodra deze aan uw `urql`-client wordt toegevoegd, automatisch alle GraphQL-fouten onderschept en naar AppSignal rapporteert.

## Installatie

### `npm` of `yarn`

Voeg de pakketten `@appsignal/urql` en `@appsignal/javascript` toe aan uw `package.json`. Voer vervolgens `npm install`/`yarn install` uit.

U kunt deze pakketten ook via de command line aan uw `package.json` toevoegen:

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

### JSPM.io import maps

Met de [JSPM.io import map generator](https://generator.jspm.io/) kunt u een import map genereren voor de afhankelijkheden van uw applicatie.

Voeg `@appsignal/javascript` en `@appsignal/urql` toe aan de lijst met dependencies in de generator, en voeg vervolgens de gegenereerde import map en ES module shims toe aan de code van uw applicatie.

### `rails-importmap`

Gebruik het volgende commando om deze pakketten toe te voegen aan de import maps van uw Rails-applicatie:

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

## Gebruik

### Een exchange aan de client toevoegen

Het pakket `@appsignal/urql` biedt een custom urql-exchange die GraphQL-fouten automatisch naar AppSignal rapporteert. Deze exchange onderschept alle query- en mutation-resultaten en rapporteert eventuele fouten zonder dat afzonderlijke `useQuery`-aanroepen aangepast hoeven te worden.

<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>

De exchange zal automatisch:

* Alle GraphQL-fouten naar AppSignal rapporteren
* De GraphQL-querybody als parameter opnemen (zichtbaar in de foutdetails van AppSignal)
* De endpoint-URL als tag opnemen
* De operatienaam en het operatietype als tags opnemen (indien beschikbaar)

## Foutdetails

Wanneer er een GraphQL-fout optreedt, ontvangt AppSignal:

* **Foutmelding**: een samenvoeging van alle GraphQL-foutmeldingen
* **Tags**:
  * `endpoint`: de URL van de GraphQL-endpoint
  * `operationName`: de naam van de GraphQL-operatie (indien gespecificeerd)
  * `operationType`: het type operatie (query, mutation, subscription)
* **Parameters**:
  * `query`: de volledige GraphQL-querybody

Dit biedt volledige context voor het debuggen van GraphQL-fouten in uw applicatie.