
Show HN: GraphQL Voyager – Represent Any GraphQL API as an Interactive Graph - IvanGoncharov
https://github.com/APIs-guru/graphql-voyager
======
vning93
Awesome project! Our customers building GraphQL apps on
[https://scaphold.io](https://scaphold.io) would really appreciate something
like this.

We currently have a Schema Designer that's fairly intuitive for the most part,
and by "most part" I mean developers. Incorporating this tool to graphically
show how your data relates would help the less tech-savvy domain experts on
Scaphold.io tremendously. Thanks for your awesome work with this and GraphQL
APIs ([https://github.com/APIs-guru/graphql-apis](https://github.com/APIs-
guru/graphql-apis)).

I'd love to help contribute in any way!

------
sorenbs
This is really nicely done. Our customers have been asking us to provide a
better visual representation of their schemas directly in the
[https://graph.cool](https://graph.cool) schema editor.

Are you accepting pull requests?

~~~
IvanGoncharov
Definitely yes, it would be great to see Voyager as a part of graph.cool. It's
our first React+Redux app so we need a few days to do refactoring, more
details here: [https://github.com/APIs-guru/graphql-
voyager#contribution](https://github.com/APIs-guru/graphql-
voyager#contribution)

After that, we are happy to assist you with an integration. Feel free to
contact us on GitHub or directly
[https://apis.guru/about/](https://apis.guru/about/)

~~~
sorenbs
Thanks Ivan. We will be in touch for sure. Let me know if you ever come to
Berlin :-)

------
WhitneyLand
Great project. I'm still deciding how much like gql itself.

Trying scaffold.io and found the simplest code to get the first customer is

const myQuery = gql`

{

viewer {

    
    
      allCustomers(first: 1) {
                        
       edges { node { firstName } }
                   
      }
             
     }

}

client.query({ query: myQuery })

.then((graphQLResult) => {

console.log('success: ',
graphQLResult.data.viewer.allCustomers.edges[0].node.firstName)

})

All this verbosity has a reason (for example to support paging), but the
elegance hasn't hit me yet.

~~~
crucialfelix
viewer is a Relay convention for wrapping fields in an authenticated context.
If the viewer does not resolve (not logged in) then data.viewer is null. It
makes view permissions checking a lot easier and simpler.

Edges and node is also a Relay interface.

Graphql can be simpler if you don't use relay. Also the relay client is quite
fat.

I use Apollo and I do use relay interface and conventions, just without the
official Relay client. I like Apollo's simplicity a lot more.

~~~
WhitneyLand
Thanks, actually that is Apollo client, but the schema uses relay because
that's what scaffold.io uses.

------
kylemathews
This is really excellent! I've been hoping for a while now that someone would
build something like this :-)

A direction that'd be interesting to explore is a guided query writer. Perhaps
have a floating query input box and if you click on a type, it adds a query.
Then you could edit the query and as you add/remove fields & connections, it
highlights the equivalent areas of the visualization.

~~~
IvanGoncharov
It was our initial goal but we decided to proceed with smaller steps and
that's why we've released this MVP.

------
tuukkah
Glad to see our public transport schema as one of the demo options. However,
it's not just Helsinki Region or Finland anymore: you can set up your own
endpoints by loading OpenStreetMap and GTFS data into OpenTripPlanner. More
info:
[https://digitransit.fi/en/developers](https://digitransit.fi/en/developers)

~~~
IvanGoncharov
Thank you for making your GraphQL API publicly accessible. Can you suggest a
better name to be used in our demo?

BTW. We also included it in our list of public GraphQL APIs:
[https://github.com/APIs-guru/graphql-apis](https://github.com/APIs-
guru/graphql-apis)

~~~
tuukkah
You could call the schema the Digitransit schema or the OpenTripPlanner
schema. The best link for documentation is this (or a parent directory):
[https://digitransit.fi/en/developers/services-and-
apis/1-rou...](https://digitransit.fi/en/developers/services-and-
apis/1-routing-api/)

For the list of endpoints, we offer three public endpoints ourselves:
Digitransit HSL - Transit routes, stops and realtime schedules from Helsinki
Regional Transport Authority, Finland:
[https://api.digitransit.fi/routing/v1/routers/hsl/index/grap...](https://api.digitransit.fi/routing/v1/routers/hsl/index/graphql)

Digitransit Waltti - the regional public transport authorities in Finland:
[https://api.digitransit.fi/routing/v1/routers/waltti/index/g...](https://api.digitransit.fi/routing/v1/routers/waltti/index/graphql)

Digitransit Finland - includes long-distance route data from Finnish Transport
Agency:
[https://api.digitransit.fi/routing/v1/routers/finland/index/...](https://api.digitransit.fi/routing/v1/routers/finland/index/graphql)

------
ben_jones
In the README it says mit license but I can't see a LICENSE.txt file, does
that matter? It's a really cool project that makes me want to try GraphQL btw.

~~~
dsp1234
_does that matter?_

It depends on how likely you are to be sued for using this.

On the one hand, it's clear that the intent is to MIT license the software.

On the other hand, the MIT license requires specifying the year of the
copyright along with the copyright holder (in addition to the actual text
itself). As of right now, it's not clear who the copyright holder even is.

IANAL, but I would suggest that if you are at the point where you wish to
modify and distribute the code, you could politely ask the copyright license
holder to add a proper license block.

------
bruth
Nice work! This would be great if it could be pluggable for relational
schemas. The interactivity is nice for explaining the schema with domain
experts.

------
jrmiii
Where can one find a generic introspection query that can be used to produce
output this tool will accept?

~~~
IvanGoncharov
After you click on "Custom Introspection" card you will see "Copy
Introspection Query" link. Just click on it and query will be copied into the
buffer.

~~~
jrmiii
Thank you!

------
kevinSuttle
Disappointed to see this broken on small screens. Why it's assumed developers
don't do work on mobile devices is beyond me.

[http://kevinsuttle.com/posts/dx-on-mobile-
devices](http://kevinsuttle.com/posts/dx-on-mobile-devices)

~~~
erikb
Why do you act like this would be the most common thing in the world? It's
certainly additional work and not really necessary for a HN launch, imo.

~~~
kevinSuttle
Because the data I linked to?

