Naar hoofdinhoud gaan
urql is een GraphQL-client voor JavaScript-applicaties. Het pakket @appsignal/urql biedt een custom exchange 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:
yarn add @appsignal/javascript @appsignal/urql
npm install @appsignal/javascript @appsignal/urql

JSPM.io import maps

Met de JSPM.io import map generator 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:
./bin/importmap pin @appsignal/javascript @appsignal/urql

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