Addon Panel UI for mocked Apollo data

[brendanrygus]

Hi @lifeiscontent, thanks for your work on upgrading, it looks like this is now the leading Apollo addon in the v3 ecosystem.

Background

I recently started a new Apollo project and observed that the Dev Tools struggle with mocked data and Storybook iframes.

Proposed Changes

I believe it would improve the DX for Apollo-connected components if developers could visualize the mocked Apollo data while using Storybook. I've been prototyping some addon panel UI to display the mocks and metadata driving each Story.

Example: Demo video

Is there any interest in adding this to storybook-addon-apollo-client until the official Dev Tools support Storybook?
I'd be happy to put up a draft PR for discussion.

Further Comments

Might be worth mentioning that I merged a couple of related PRs into Storybook recently:

• [Docs] Fix React workflows - mocking providers code sample syntax storybookjs/storybook#12363 to fix a code sample in the docs around using this package
• Components: Add graphql support to SyntaxHighlighter storybookjs/storybook#12385 to add GraphQL syntax highlighting for use in Apollo/GQL addons

[lifeiscontent]

@brendanrygus Hey thanks for reaching out!

This looks like an awesome addition, would you have time to work on it / pair on it together?

If not, I'll see if I can put something together when I have some free time during the weekend.

[brendanrygus]

Sweet, thanks for the lightning-quick reply.
I'll set up a branch in the next couple of days and copy over the work I've done in our project repo. It's only a few files.

Maybe we can test it against some components from the realworld app. So far my test data set has been pretty small - only a couple of components with queries - so I'm interested to see what kind of edge cases are left to be uncovered.

[lifeiscontent]

@brendanrygus sounds good, I'd like to add this feature so it works for storybook 5 and 6, and apollo 2 and 3 so we can start with the version you have and backport accordingly so other developers can benefit from these awesome changes 🎉

go ahead and create a PR, then we can move forward on how to backport from there. 👍

[brendanrygus]

@lifeiscontent Put up the first PR and tested setting it up as a local dependency on my machine. Please give it a shot against some of your own Apollo-connected stories!

[lifeiscontent]

@brendanrygus Cool will take a look this weekend, thanks for putting this together!