graphq visualisation for studio

[macrozone]

For talking about a graph, modelling it, reviewing it and understanding it, its often useful to have a more visual representation.

I did some research and found this one which works quite good: https://github.com/IvanGoncharov/graphql-voyager

as mentioned in https://github.com/IvanGoncharov/graphql-voyager/issues/187#issuecomment-1191534447

I think apollo studio could and should include something like that which would be a great addition to the schema inspector.

I believe it would be even safe-enough and easy to even include graphql-voyager directly in studio, maybe as a tab here:

[FluorescentHallucinogen]

+1 for the idea of integrating GraphQL Voyager into Apollo Studio. 👍

GraphQL Voyager could be used not only for visualizing GraphQL schema in the "Schema" tab of Apollo Studio, but also for many other purposes.

1.

E.g. see @IvanGoncharov's tool called GraphQL Coverage for visualizing which resolvers are triggered by GraphQL operations: https://github.com/IvanGoncharov/graphql-coverage/blob/master/demo.gif.

2.

I've created a working prototype of a tool on top of GraphQL Voyager I called GraphQL Visual Diff. See https://twitter.com/alexey_rodionov/status/1227289665046241280.

It shows a visual diff between two GraphQL schemas.

Added fields are marked in green color, deleted in red and modified in yellow. Every change is precisely explained and classified as breaking, dangerous or non-breaking.

It can be used in the "Changelog" tab of Apollo Studio. :wink:

This should significantly improve the developer experience (DX) as compared to plaintext JSON diff.

I've integrated my prototype into GraphQL Inspector. See https://github.com/kamilkisiela/graphql-inspector/pull/1746.

3.

Also I've created a working prototype of a tool on top of GraphQL Voyager I called GraphQL Heatmap. See https://twitter.com/alexey_rodionov/status/1564692299107295232.

It helps visualize the graph health by coloring fields from red to green based on field metrics (usage, latency, errors, etc.).

It's a follow-up of my idea of GraphQL Visual Diff tool.

And… it uses data from Apollo Studio. 😄

It can be used in the "Fields" tab of Apollo Studio. :wink:

The good news is that @IvanGoncharov, the author of GraphQL Voyager, is now works in the Apollo team. 😆

[FluorescentHallucinogen]

@daniman PTAL. :wink:

[daniman]

@FluorescentHallucinogen I like the idea. The reason we haven't brought Voyager into Studio in the past is that it gets unusable fairly quickly for large schemas, and when we introduce features, they need to work for all our users. We've considered layering something like Voyager with filters to help with that problem. Working on schema visualization is on our roadmap for Studio. Hopefully we'll be able to get to it sooner rather than later.

[KennyHammerlund]

+1 for the implementation of voyager with Studio @daniman I agree that large schemas are hard to deal with on a single canvas. Maybe this could be implemented at the subgraph level similar to how subgraph schema can be shown in the Schema=> SDL tab.

@FluorescentHallucinogen cool idea integrating the heat map based on traffic. I think the reverse would be helpful too. I.e. the darker the blue the longer it has been since last used. That would help with deprecation.

[jerelmiller]

Hey @macrozone 👋

We have shifted this repo to be specific to the Apollo TypeScript Client. As such, I'm going to go ahead and close this issue.

If you're still in need of assistance or would like to raise this request again, please open an issue in the Apollo Studio Community repo. Thanks!