brbb / graphql-rover

:rocket: GraphQL + Vue.js + D3.js schema viewer, powered by introspection.

GraphQL Rover

Intro

GraphQL Rover is a GraphQL schema viewer.

Generate a navigable representation of the underlying schema through the introspection query, displaying nodes as Vue.js components using D3.js to build the graph.

Check the Demo based on the GraphQL Pokemon API, allow HTTP scripts execution or change the endpoint from the side panel.

Quick start

1. Setup the endpoint

2. Re-arrange nodes

3. Select to zoom and inspect a type or use the search bar

Run

Option 1:

git clone the repo anywhere, run locally path-to-graphql-rover/graphql-rover/index.html and follow the quickstart steps. There's no need to keep Rover in the same path of your database, or on a server.

Option 2:

Run as Electron app and follow the quickstart steps:

$ cd graphql-rover/
$ electron .

Option 3

Run the GraphQL Rover.app (OSX electron package only)

Features

• Endpoint selection and configuration
• Save configuration (locally/remotely)
• Drag nodes
• Pan & Zoom
• Zoom on selection
• Navigate clicking on Type-links inside the node or the documentation panel
• Type Documentation
• Type & field search
• Type & field filter for a cleaner graph
• Interface / Enumerable / Types easy identification
• Relationships edges with UML-like semantic
• Configure GraphQL endpoint
• No code to write (but a module/library could be interesting)
• Offline schema (paste introspection result + libraries included)
• Electron app

Tech Stack

Rover is built with pure javascript libraries to avoid mixed or language-to-javascript solutions:

• GraphQL: the introspection query is actually what is really used by Rover to get the schema topology. On further releases it could be possible to query the data of the selected type.
• Dagre-d3: basically the core of the graph schema building system, replaces graphviz and offers a pure javascript alternative.
• Vue.js + Vuex + Element: D3 nodes require a html label, and Vue can easily provide a template adaptable to any type retrieved. Vuex stores data and manages the state while Element provides a pleasant UI library.

Electron

An OS X electron app exists, but currently it's not complete. The bundle will be released as soon as possible with a Windows and Linux package.

To-Dos

• Single edge with double arrowhead to limit the number of lines and improve readability
• NPM module
• Live Demo
• Test Test Test Test
• CI

graphql-rover's Issues

Reverse-Proxy?

In a private fork I've upgraded graphql-rover to be hosted in an nginx via docker-compose.
Also it creates a reverse proxy for every entry in settings.json so you can access and visualize any API that sends no CORS headers.

Are you guys interested in that?

Rover hosting

Add content-type and endpoint to query string

It would be great if content-type and endpoint were stored in the query string so that URLs can be shared with people

Issues at startup

Hi,

I am testing rover which seems to be great, but when I start it, it says there're errors.
Cannot find any logfile - how to debug them?

Thanks
LM

Feature: use graphql-rover from SDL instead of an endpoint

cannot run it

your code is very good,but i cannot run it,because the server that you give had stop

Add window resize listener

Resizing the canvas and optionally recenter the graph on window resize would be a nice. I would also send you a pull request ;)

Properly support application/json

Whilst you can enter a content-type header, the request body is still sent as plain text and not json. Apollo server only supports json.

Also, I think this should be a dropdown (options applicaiton/graphql and applicaiton/json), rather than a text field since there are a limited number of valid content-types for graphql (are there more beyond those two?)

Filter doesn't work

I see there is a filter feature. When I start the application, it set by default on "DateTime" which I believe is a custom scalar.
Anyway, trying to filter on any scalar or typename seems to do nothing.

The feature description says

Type & field filter for a cleaner graph

but if I try to filter on a specific field name, I do not see any action/result on the graph.

How does it suppose to work then?

LM

Change default endpoint to one that supports https

Current endpoint is blocked because of mixed content warnings. You should use a default endpoint that supports https

Does it support dgraph?

Hi,
Thank for your project.
Does it support dgraph? (dgraph.io)
Thanks!

Endpoint CLI or URL parameter

add a way to parametrize the schema endpoint. This would allow integrations with graphql-cli and others.