> ## 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/) é um cliente GraphQL para aplicações JavaScript. O pacote `@appsignal/urql` fornece um [exchange personalizado](https://urql.dev/docs/architecture/#the-exchanges) que, uma vez adicionado ao seu cliente `urql`, intercepta automaticamente todos os erros do GraphQL e os relata ao AppSignal.

## Instalação

### `npm` ou `yarn`

Adicione os pacotes `@appsignal/urql` e `@appsignal/javascript` ao seu `package.json`. Em seguida, execute `npm install`/`yarn install`.

Você também pode adicionar esses pacotes ao seu `package.json` pela linha de comando:

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

### Import maps do JSPM.io

Usando o [gerador de import maps do JSPM.io](https://generator.jspm.io/), você pode gerar um import map para as dependências da sua aplicação.

Adicione `@appsignal/javascript` e `@appsignal/urql` à lista de dependências no gerador, depois adicione o import map gerado e o ES module shims ao código da sua aplicação.

### `rails-importmap`

Use o comando a seguir para adicionar esses pacotes aos import maps da sua aplicação Rails:

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

## Uso

### Adicionando o exchange ao cliente

O pacote `@appsignal/urql` fornece um exchange urql personalizado que relata automaticamente os erros do GraphQL ao AppSignal. Esse exchange intercepta todos os resultados de query e mutation e relata quaisquer erros sem exigir alterações em chamadas individuais de `useQuery`.

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

O exchange irá automaticamente:

* Relatar todos os erros do GraphQL ao AppSignal
* Incluir o corpo da query GraphQL como parâmetro (visível nos detalhes do erro do AppSignal)
* Incluir a URL do endpoint como tag
* Incluir o nome e o tipo da operação como tags (quando disponíveis)

## Detalhes do erro

Quando um erro do GraphQL ocorre, o AppSignal receberá:

* **Mensagem de erro**: Uma concatenação de todas as mensagens de erro do GraphQL
* **Tags**:
  * `endpoint`: A URL do endpoint do GraphQL
  * `operationName`: O nome da operação GraphQL (se especificado)
  * `operationType`: O tipo de operação (query, mutation, subscription)
* **Parâmetros**:
  * `query`: O corpo completo da query GraphQL

Isso fornece contexto completo para depurar erros do GraphQL na sua aplicação.