Show HN: GraphQL Voyager – Represent Any GraphQL API as an Interactive Graph | Hacker News Reader

Show HN: GraphQL Voyager – Represent Any GraphQL API as an Interactive Graph

github.com

163 pointsIvanGoncharov29 comments

Awesome project! Our customers building GraphQL apps on 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).

I'd love to help contribute in any way!

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 schema editor.

Are you accepting pull requests?

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

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

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

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.

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.

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

Hey there! This is Vince from Scaphold.io. Thanks for trying out our service. The query is as simple as it gets, but if you want to flatten the returned object, you can use recompose to flatten the returned properties.

Check it out here: https://github.com/acdlite/recompose/blob/master/docs/API.md...

Thanks Vince. A key point is that Scaphold uses Relay and it's schema on the backend, which implies the really verbose queries, and the viewer/node/edge stuff.

Yes you can use the apollo client (the code above does) but as you can see that doesn't help the query size.

For scaphold.io I think you guys have done great on a lot of things, but the docs are really failing to explain the required relay schema and concepts prominently.

For relay, I'm trying to reserve judgement. First impression is it seems like an inelegant and cumbersome design. I did read their design goals, it just seems there were better ways to achieve them. And why introduce graph theory terminology for concepts that not really new in the database world?

Anyway people should checkout scaphold.io, I think it has the best UX going for gql saas.

> And why introduce graph theory terminology for concepts that not really new in the database world?

Because it's developed by Facebook, and Facebook really does view all of their data as a graph.

I see, the classic example of tunnel vision where if you're carpenter everything looks like a nail? I hadn't thought of that reason, maybe it explains part of the rational.

But even though critique is important FB has a lot to be proud of with their leadership in open source. I know some people have qualms with the license but in general I think they've inspired other companies go more in this direction.

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.

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

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

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

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...

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...

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

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

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.

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.

Good catch! Just added the LICENSE file. https://github.com/APIs-guru/graphql-voyager/blob/master/LIC...

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.

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

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.

Thank you!

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

Hey kevinSuttle. Submit plz an issue with a screenshot specifying the size of the device you use. We will try to fix it.

Or you can submit a PR :)

iPhone 6S Plus.

https://cl.ly/160K0O3R2I2l

Well, have you tried clicking "GOT IT"? It's just a warning, not "broken"

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.

Because the data I linked to?

Reply on news.ycombinator.com