Giter Club home page Giter Club logo

graphql-request-profiler's Introduction

graphql-request-profiler

Status Checks

Easy to use GraphQL performance analysis utility for profiling resolver execution time. Observe resolver execution time in your API with a visualization tool.

Example

graphql-request-profiler -s examples/operation.graphql -e http://localhost:4000/graphql

Sample Visualizer

Installation

For CLI usage with API that has the plugin installed:

npm i -g @econify/graphql-request-profiler

Within a project:

npm install --save @econify/graphql-request-profiler
yarn add @econify/graphql-request-profiler

CLI Usage

$ graphql-request-profiler --help
graphql-request-profiler: Visualize your GraphQL resolver execution time - Version 0.2.0

Usage:

  graphql-request-profiler --data <fileName>
  graphql-request-profiler --schema operation.graphql --endpoint=localhost:4000/graphql
  graphql-request-profiler --help

Arguments:

  --schema, -s (file path)        requesting schema file location
  --output, -o (file path)        output request data to file location
  --endpoint, -e (string)         the endpoint of the GraphQL server to request
  --variables, -v (file path)     variables to pass to the GraphQL server
  --operationName, -n (string)    optional, name of the operation to use in the schema
  --headerName, -h (string)       optional, the name of the header to activate

  --data, -d (string)             display an existing trace file
  --help (boolean)                displays this help text

graphql-http

import { createHandler } from 'graphql-http/lib/use/http';
import { createHttpHandlerProfilerPlugin } from '@econify/graphql-request-profiler';

const server = http.createServer((req, res) => {
  if (req.url?.startsWith('/graphql')) {
    createHandler(
      createHttpHandlerProfilerPlugin(req, {
        schema: buildSchema(),
      })
    )(req, res);
  } else {
    res.writeHead(404).end();
  }
});

server.listen(4000);
console.log('Listening to port 4000');

See full running example here See example of graphql-http with express

apollo-server

import { createApolloProfilerPlugin } from '@econify/graphql-request-profiler';

const server = new ApolloServer({
  schema: buildSchema(),
  plugins: [createApolloProfilerPlugin()],
});

server.listen().then(({ url }) => {
  console.log(`Listening on ${url}`);
});

See full running example here

Deprecated

express-graphql

import { createExpressProfilerPlugin } from '@econify/graphql-request-profiler';

const app = express();

app.use(
  '/graphql',
  graphqlHTTP((req) =>
    createExpressProfilerPlugin(req, {
      schema,
      graphiql: true,
    })
  )
);

See full running example here

Custom Activation Header

If the server requires a different HTTP header to activate the plugin besides x-trace, a custom header name can be specified in the configuration to the plugin.

createApolloProfilerPlugin({ headerName: 'x-custom-header' });
createExpressProfilerPlugin(req, options, { headerName: 'x-custom-header' });

A custom plugin activation HTTP header may be specified when using the CLI tool.

graphql-request-profiler --headerName x-custom-header [...]

Like this package?

Check out Econify's other GraphQL package, graphql-rest-router, that allows routing to and caching an internal GraphQL API as a self-documenting REST API without exposing the schema!

graphql-request-profiler's People

Contributors

gh-action-bump-version avatar regan-karlewicz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

graphql-request-profiler's Issues

Visualizer improvements

  • As suggested by @fiuky, investigate color coding based on the time duration of the resolvers to indicate which resolvers are taking the longest, shortest amounts of time
  • Filter options
  • Zoom options

SolidJS looks like it could be a interesting lightweight choice to re-implement the visualizer with to add filter and zoom options

Implement auto version bump

graphql-request-profiler should restrict our main branch. We want main to only accept commits from

  1. Merged PRs (contributions)
  2. Github action bot (updates package.json version)

The existing problem was that adding branch protections to main prevented the Github Actions bot from committing version updates to package.json. Github recently introduced a new feature called rulesets that promise to allow more granular configuration for branch protections. Investigate this ruleset feature to see if we can add the Github Actions bot to a special group that is allowed to push commits to main, but prevent everyone else from pushing commits to main.

Scale issue

On larger data sets, the scale for the time cursor is off in the visualizer UI.

See example:

execStartTime mismatches cursor value

Screenshot 2023-07-10 at 2 04 12 PM

Find and fix the issue.

Use Apollo tracing spec

We should use the Apollo tracing spec so that we can view the output of this plugin in the apollo playground UI

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.