Graphql-birdseye NPM

Description

Birdseye is an interactive tool that dynamically displays GraphQL schemas. It helps teams visualize and understand the nodes and connections within their schema. Birdseye was built using jointJS and makes for a lightweight addition to any web project.

Features

Graphical view of any GraphQL schema
Ability to click on a field or type to view its connections
Dynamic zooming to focus on small portions of the schema at a time
Add to any web project
Customizable styling and theming

React Package Documentation

This is the documentation to use Birdseye as a React package. To learn how to use Birdseye as a Javascript library, please refer to the core repository README.

Installation

Install using NPM or yarn

NPM

npm install --save graphql-birdseye

Yarn

yarn add graphql-birdseye

Usage

Here’s an example of how to use Birdseye in a React project. See the API Reference for how to pass your schema to the component.

import * as React from "react";

import GraphqlBirdseye from "graphql-birdseye";

class Example extends React.Component {
  render() {
    return (
      <GraphqlBirdseye
        introspectionQuery={dummySchema.data}
        style={{ height: "100vh" }}
      />
    );
  }
}

Try this example in code sandbox:

We used Birdseye as React package in our demo site. You can download and test that code in the example folder in the main repository.

API

Name	Type	Description
introspectionQuery	JSON object	Pass your schema as a JSON of an introspection query response. Use this introspection query to return your schema as a GraphQL schema object.
schema	GraphQL schema object	Pass your schema as a GraphQL schema object. Return using makeExecutableSchema from GraphQL tools.
style	object	Pass in an object to style the container. Example `style={{ height: "100vh" }}`
theme	object	An object defining the theme of the components. Theme objects should follow the type defined here. Here's a full example.

Roadmap

We have plans to keep improving Birdseye. Here's what is next: 1. Improve performance for larger schemas 2. Option to toggle zoom navigation style 3. Smoother UI transitions and interactions