npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mercurius-explain

v2.0.9

Published

A plugin for mercurius

Downloads

3,143

Readme

Mercurius Explain

A Mercurius plugin that exports some execution info in a query.

The additional information currently exported by the plugin are:

  • profiling of resolvers execution time
  • number of call per resolver

The information is added to the extensions.explain attribute in the GQL response.

{
  extensions: {
    explain: {
      version: '1.1.1', // The version in package.json
      profiler: {
        ...
      },
      resolverCalls: {
        ...
      }
    }
  }
}

Profiler

The profiler contains the execution time of each resolver called.

  • data is an array with the definition of the profiler entry:
    • path is a string that represents the subpath of the resolver
    • begin is number that represents the start time in NANOSECONDS
    • end is number that represents the end time in NANOSECONDS
    • time is number that represents the time between begin and end in NANOSECONDS

Example:

{
  extensions: {
    explain: {
      profiler: {
        data: [
          {
            path: 'user',
            begin: 100, // time in nanoseconds,
            end: 300, // time in nanoseconds,
            time: 200, // time in nanoseconds,
          },
          {
            path: 'user.address',
            begin: 301, // time in nanoseconds,
            end: 400, // time in nanoseconds,
            time: 99, // time in nanoseconds,
          },
          {
            path: 'user.status',
            begin: 301, // time in nanoseconds,
            end: 350, // time in nanoseconds,
            time: 49, // time in nanoseconds,
          },
          ...
        ]
      }
      ...
    }
  }
}

Resolver Calls

Every time a resolver is invoked, a counter keeps track of the call and returns a report with resolverCalls object:

  • data is an array that contains an object for each resolver that has been called:
    • key is a string that define the resolver.
    • count is a number that define the number of calls for a resolver.

example

{
  extensions: {
    explain: {
      resolverCalls: {
        data:data: [
          { key: "Query.users", count: 1 },
          { key: "User.status", count: 2 },
          { key: "User.contacts", count: 2 },
          { key: "Contact.emails", count: 2 }
        ]
      },
      ...
    }
  }
}

Install

npm i fastify mercurius mercurius-explain

Quickstart

import Fastify from 'fastify'
import mercurius from 'mercurius'
import explain, { explainGraphiQLPlugin } from 'mercurius-explain'

const app = Fastify({ logger: true })

const schema = `
  type Query {
    add(x: Int, y: Int): Int
  }
`

const resolvers = {
  Query: {
    async add(_, { x, y }, { reply }) {
      return x + y
    }
  }
}

app.register(mercurius, {
  schema,
  resolvers,
  graphiql: {
    enabled: true,
    plugins: [explainGraphiQLPlugin()]
  }
})

app.register(explain, {})

app.listen({ port: 3000 })

Test:

curl -X POST -H 'content-type: application/json' -d '{ "query": "{ add(x: 2, y: 2) }" }' localhost:3000/graphql

Options

  • enabled: boolean | function (schema, source, context) => boolean. Enables or disables the data collection and the enrichment of the response. By default the action is enabled.

If federated: true, this field will be ignored and be enabled by default.

Examples:

// Data enrichment disabled
app.register(explain, {
   enabled: false
}
// Data are collected and returned only if the request has 'x-mercurius-explain' header
app.register(explain, {
  enabled: ({ schema, source, context }) =>
    context.reply.request.headers['x-mercurius-explain']
})
  • gateway: boolean. If the application is a Mercurius Gateway enables or disables the collection of extensions.explain from the services that are part of the gateway that use mercurius-explain. Use the helper function getExplainFederatedHeader in service.rewriteHead in the service definition to enabled federation mode like in the example.

    It is required to enable extensions collector in the gateway definition. If the federated services are in federation mode it is required to use rewriteHeaders to forward the getExplainFederatedHeader

Examples:

const gateway = Fastify()

await gateway.register(mercuriusGateway, {
  gateway: {
    services: [
      {
        name: 'foo',
        url: `http://localhost:3000/graphql`,
        collectors: {
          collectExtensions: true // enabled extensions collector required
        },
        rewriteHeaders: (headers, context) => {
          return { ...getExplainFederatedHeader(context) } // this will forward the federation header to service
        }
      },
      {
        name: 'bar',
        url: `http://localhost:3001/graphql`,
        collectors: {
          collectExtensions: true // enabled extensions collector required
        },
        rewriteHeaders: (headers, context) => {
          return { ...getExplainFederatedHeader(context) } // this will forward the federation header to service
        }
      }
    ]
  },
  ...opts
})

gateway.register(mercuriusExplain, {
  enabled: true,
  gateway: true // gateway enabled
})
  • federated: boolean. If the application is a federated service enables or disables federation mode. Federation mode allows the service to trust any request from the gateway. The application will check the presence of a specific header in the request from the gateway and will ignore the enabled field.

Example:

  • Federated service
fastify.register(mercuriusExplain, {
  enabled: explainEnabled,
  federated: true // enabled federation
})

getExplainFederatedHeader helper

This function returns the headers required for federation mode.

getExplainFederatedHeader: function(context)

await gateway.register(mercuriusGateway, {
  gateway: {
    services: [
      {
        name: 'foo',
        url: `http://localhost:3000/graphql`,
        rewriteHeaders: (headers, context) => {
          return { ...getExplainFederatedHeader(context) } // this will forward the header to federated service
        }
      }
    ]
  }
})

Add the viewer plugin to mercurius GraphiQL (mercurius-explain-graphiql-plugin)

In mercurius it is possibile to add to the self hosted GraphiQL app the plugin mercurius-explain-graphiql-plugin to show the data returned by mercurius explain.

explainGraphiQLPlugin helper

This function return the required structure to initialize the plugin.

explainGraphiQLPlugin: function(options)

  • options: null | object
    • options.version: string. The version of the GraphiQL plugin to be loaded. Default: the same major version of the backend plugin

Example:

import { explainGraphiQLPlugin } from 'mercurius-explain'

app.register(mercurius, {
  schema,
  resolvers,
  graphiql: {
    enabled: true,
    plugins: [explainGraphiQLPlugin()]
  }
})

The explainGraphiQLPlugin function initializes by default the plugin with the same major version in the package.json (eg. if the package is 3.4.5 it will load the version ^3 of the GraphiQL plugin).

It's possible to override the version by passing a parameter.

...
plugins: [explainGraphiQLPlugin({version: '3.4.5')]

// or

plugins: [explainGraphiQLPlugin({version: '^4')]
...