Passer au contenu principal
urql est un client GraphQL pour les applications JavaScript. Le package @appsignal/urql fournit un exchange personnalisé 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 : 
yarn add @appsignal/javascript @appsignal/urql
npm install @appsignal/javascript @appsignal/urql

​
Import maps JSPM.io

Avec le générateur d’import maps 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 : 
./bin/importmap pin @appsignal/javascript @appsignal/urql

​
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. 
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],
});
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.