Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
StaticQuery doesn't work with StorybookJS v4 #12007
When I utilise the StorybookJS GUI, for components that have utilised both
Steps to reproduce
All the instructions are in the README, includes instructions to recreating the bug from scratch, if there are additional queries, please leave them in the comment section.
The query should resolve at compile time.
Gatsby throws the following error:
File contents (if changed)
This is breaking because the graphql queries aren’t being run (they’re run by gatsby when you have gatsby develop running)
The best approach here is to mock out graphql and StaticQuery
Check out the documentation at https://www.gatsbyjs.org/docs/unit-testing/#3-useful-mocks-to-complete-your-testing-environment
Thanks for replying back @sidharthachatterjee
That's the current course being taken for theses components, however this solution doesn't scale very well when mocking of the component on StorybookJS - i.e. writing a similar component for every component produced, additional requires more maintenance upon component updates.
As with StorybookJS, it's main purpose would be drag and drop components, test the UI there and then; for it's convenience.
What I want to know is whether it's possible run GraphQL whilst it's being featured in StorybookJS, or some way round the current problem without the need for mocking; without compromising the convenience of the tooling used
While it seems hack-y I solved this problem by changing 2 files. You can try by cloning my repository.
How to run
What I changed
Cheers @takuyahara !!!
I want to confirm that this workaround
Just to clarify to other newcomers to gatsby and storybook, like myself. The reason why this solution works is that
If I have missed anything, or made mistake somehow in this comment. Please can you comment below. Thanks!!
@sidharthachatterjee It would be very helpful to get an example of how to do this w/ Storybox. The documentation you linked to is great for setting up Jest et al w/ Gatsby, but if you're just using Storybox and don't have Jest setup independently it's unclear how to connect the two.