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

graphql-voyager

v2.1.0

Published

GraphQL introspection viewer

Downloads

132,075

Readme

GraphQL Voyager

graphql-voyager logo

Represent any GraphQL API as an interactive graph. It's time to finally see the graph behind GraphQL. You can also explore number of public GraphQL APIs from our list.

With graphql-voyager you can visually explore your GraphQL API as an interactive graph. This is a great tool when designing or discussing your data model. It includes multiple example GraphQL schemas and also allows you to connect it to your own GraphQL endpoint. What are you waiting for, explore your API!

GraphQL Weekly #42

Live Demo

voyager demo

Features

  • Quick navigation on graph
  • Left panel which provides more detailed information about every type
  • "Skip Relay" option that simplifies graph by removing Relay wrapper classes
  • Ability to choose any type to be a root of the graph

API

GraphQL Voyager exports Voyager React component and helper init function. If used without module system it is exported as GraphQLVoyager global variable.

Properties

Voyager component accepts the following properties:

  • introspection [object] - the server introspection response. If function is provided GraphQL Voyager will pass introspection query as a first function parameter. Function should return Promise which resolves to introspection response object.
  • displayOptions (optional)
    • displayOptions.skipRelay [boolean, default true] - skip relay-related entities
    • displayOptions.skipDeprecated [boolean, default true] - skip deprecated fields and entities that contain only deprecated fields.
    • displayOptions.rootType [string] - name of the type to be used as a root
    • displayOptions.sortByAlphabet [boolean, default false] - sort fields on graph by alphabet
    • displayOptions.showLeafFields [boolean, default true] - show all scalars and enums
    • displayOptions.hideRoot [boolean, default false] - hide the root type
  • allowToChangeSchema [boolean, default false] - allow users to change schema
  • hideDocs [boolean, default false] - hide the docs sidebar
  • hideSettings [boolean, default false] - hide settings panel
  • hideVoyagerLogo [boolean, default true] - hide voyager logo

Using pre-bundled version

You can get GraphQL Voyager bundle from the following places:

  • jsDelivr
    • some exact version - https://cdn.jsdelivr.net/npm/[email protected]/dist/voyager.standalone.js
    • latest version - https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.standalone.js
  • from dist folder of the npm package graphql-voyager

Note: voyager.standalone.js is bundled with react, so you just need to call renderVoyager function that's it.

HTML example

Using as a dependency

Build for the web with webpack, or any other bundle.

Webpack example

Middleware

GraphQL Voyager has middleware for the next frameworks:

Properties

Middleware supports the following properties:

  • endpointUrl [string] - the GraphQL endpoint url.
  • displayOptions [object] - same as here
  • headersJS [string, default "{}"] - object of headers serialized in string to be used on endpoint url Note: You can also use any JS expression which results in an object with header names as keys and strings as values e.g. { Authorization: localStorage['Meteor.loginToken'] }

Express

import express from 'express';
import { express as voyagerMiddleware } from 'graphql-voyager/middleware';

const app = express();

app.use('/voyager', voyagerMiddleware({ endpointUrl: '/graphql' }));

app.listen(3001);

Hapi

Version 20+

import Hapi from '@hapi/hapi';
import { hapi as voyagerMiddleware } from 'graphql-voyager/middleware';

const server = new Hapi.Server({
  port: 3001,
});

const init = async () => {
  await server.register({
    plugin: voyagerMiddleware,
    options: {
      path: '/voyager',
      endpointUrl: '/graphql',
    },
  });

  await server.start();
};

init();

Koa

import Koa from 'koa';
import KoaRouter from 'koa-router';
import { koa as voyagerMiddleware } from 'graphql-voyager/middleware';

const app = new Koa();
const router = new KoaRouter();

router.all(
  '/voyager',
  voyagerMiddleware({
    endpointUrl: '/graphql',
  }),
);

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3001);

Credits

This tool is inspired by graphql-visualizer project.