> ## 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/) ist ein GraphQL-Client für JavaScript-Anwendungen. Das Paket `@appsignal/urql` stellt einen [Custom Exchange](https://urql.dev/docs/architecture/#the-exchanges) bereit, der, sobald er zu Ihrem `urql`-Client hinzugefügt wurde, automatisch alle GraphQL-Fehler abfängt und an AppSignal meldet.

## Installation

### `npm` oder `yarn`

Fügen Sie die Pakete `@appsignal/urql` und `@appsignal/javascript` zu Ihrer `package.json` hinzu. Führen Sie dann `npm install`/`yarn install` aus.

Sie können diese Pakete auch auf der Kommandozeile zu Ihrer `package.json` hinzufügen:

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

### JSPM.io Import Maps

Mit dem [JSPM.io Import Map Generator](https://generator.jspm.io/) können Sie eine Import Map für die Abhängigkeiten Ihrer Anwendung generieren.

Fügen Sie `@appsignal/javascript` und `@appsignal/urql` zur Liste der Abhängigkeiten im Generator hinzu, und integrieren Sie dann die generierte Import Map sowie ES-Module-Shims in den Code Ihrer Anwendung.

### `rails-importmap`

Verwenden Sie den folgenden Befehl, um diese Pakete zu den Import Maps Ihrer Rails-Anwendung hinzuzufügen:

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

## Verwendung

### Exchange zum Client hinzufügen

Das Paket `@appsignal/urql` stellt einen Custom-urql-Exchange bereit, der GraphQL-Fehler automatisch an AppSignal meldet. Dieser Exchange fängt alle Query- und Mutation-Ergebnisse ab und meldet alle Fehler, ohne dass Änderungen an einzelnen `useQuery`-Aufrufen erforderlich sind.

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

Der Exchange wird automatisch:

* Alle GraphQL-Fehler an AppSignal melden
* Den GraphQL-Query-Body als Parameter einschließen (sichtbar in den AppSignal-Fehlerdetails)
* Die Endpunkt-URL als Tag einschließen
* Operation-Name und -Typ als Tags einschließen (sofern verfügbar)

## Fehlerdetails

Wenn ein GraphQL-Fehler auftritt, erhält AppSignal:

* **Fehlermeldung**: Eine Verkettung aller GraphQL-Fehlermeldungen
* **Tags**:
  * `endpoint`: Die URL des GraphQL-Endpunkts
  * `operationName`: Der Name der GraphQL-Operation (sofern angegeben)
  * `operationType`: Der Typ der Operation (Query, Mutation, Subscription)
* **Parameter**:
  * `query`: Der vollständige GraphQL-Query-Body

Dies bietet vollständigen Kontext zum Debuggen von GraphQL-Fehlern in Ihrer Anwendung.