villus-plugins

A collection of plugins for the Vue GraphQL client Villus library.

Installation

pnpm:

pnpm add @digitalnatives/villus-plugins

yarn:

yarn add @digitalnatives/villus-plugins

Plugins

villus-bugsnag

Use the villus-bugsnag plugin to report any error from a GraphQL response to a configured Bugsnag instance. Errors detected in Vite dev mode (import.meta.env.DEV) will never be reported to bugsnag and instead will show up in the console.

All the examples below assume that you have already configured Bugsnag (and Bugsnag's Vue integration) as explained in the Bugsnag docs.

import { villusBugsnag } from '@digitalnatives/villus-plugins';
import { createClient, defaultPlugins } from 'villus';

const client = createClient({
    url: import.meta.env.VITE_GRAPHQL_ENDPOINT,
    use: [villusBugsnag(), ...defaultPlugins() ]
});

createApp(App)
    .use(client)

Customize reporting (optional)

You can choose to ignore certain errors by implementing the shouldReport function. Return false in this function to not report an error, return true for errors you do want to include.

const client = createClient({
    url: import.meta.env.VITE_GRAPHQL_ENDPOINT,
    use: [villusBugsnag({
        shouldReport(error) {
            // Ignore any error that contains a validation category error
            if (error.graphqlErrors[0].extensions.category === 'validation') {
                return false;
            }
            // Report all other errors by default
            return true;
        }
    }), defaultPlugins() ]
});


createApp(App)
    .use(client);