Closed smetzdev closed 3 years ago
@r3sMetz just skimming through your repository, the issue could lie with how you're handling the queries themselves. For both Storybook and Gatsby to play nice in terms of data, you'll need to mock out the data you need to provide to the components/pages, as technically all the graphql data is being stripped down from execution in the Storybook webpack configuration. Take a look at this to see how you can use the queries with Storybook and Gatsby.
Feel free to provide feedback
Hey, thanks for reviewing my repo! Your repo seems like a cool way too.
My approach worked before, it's just broken atm. One disadvantage is that it expects Gatsby to be built already. Storybook then scans the public folder for data in the required format. From how i understand it, the queries get removed from Storybook, but the results of data=useStaticQuery(...) get used just like gatsby-data, because the stories folder is inside the src folder.
I need to query data in the gatsby way because i want to use and test things like gatsby-image. Is there a way to mock gatsby-images for example?
@r3sMetz no problem and storybook in this case will rely on a build to be made beforehand. as it's expecting a output folder to exist, as it's the case with for instance CRA as when you create a new project based on it a public
folder already exists.
Regarding your question about the images. I'm not sure, but you might want to do the following:
gatsby develop
.http://localhost:8000/__graphql
to get the graphql IDE.taskData
is the result of query you supplied.See if what i mentioned helps. Or if your're ok waiting a bit longer. I can update the repo towards the end of the week and report back to you.
Sounds good?
Exactly, in my package.json the storybook script looks something like this NODE_ENV=production clean && build && start-storybook
Sounds pretty good, but don't hurry :)
I filed this issue based on a chat inside another useStaticQuery Issue, i got told that the issue with useStaticQuery inside stories will soon be working again.
As a sidenote to the actual issue, @muescha please do not edit other people's comments. If you have new context to add, please add it in a new comment rather than modifying another person's words, out of respect to them. Thank you!
@marcysutton ok. I removed my change (add link to issue comment) —-
a chat inside another useStaticQuery Issue
The comment is here: https://github.com/gatsbyjs/gatsby/pull/26077#issuecomment-665605068
Any news on this or some temporary solution? I am using the same method with query results pre-build and all stories for components with useStaticQuery
are broken for the moment (it worked before just fine). Somehow gatsby
version downgrade didn't work 🤔
I use explicit versions for now and a resolutions object inside my package.json. Maybe this helps you temporarily, here is my package.json:
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"dependencies": {
"@types/faker": "4.1.12",
"babel-plugin-module-resolver": "4.0.0",
"dotenv": "^8.2.0",
"faker": "4.1.0",
"gatsby": "2.24.3",
"gatsby-background-image": "1.1.1",
"gatsby-image": "2.4.13",
"gatsby-plugin-manifest": "2.4.18",
"gatsby-plugin-offline": "3.2.18",
"gatsby-plugin-postcss": "2.3.11",
"gatsby-plugin-react-helmet": "3.3.10",
"gatsby-plugin-sharp": "2.6.19",
"gatsby-plugin-typescript": "2.4.15",
"gatsby-source-filesystem": "2.3.19",
"gatsby-transformer-sharp": "2.5.11",
"npm-run-all": "^4.1.5",
"prop-types": "15.7.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-helmet": "6.1.0",
"tailwindcss": "1.5.1"
},
"devDependencies": {
"@babel/core": "7.10.5",
"@storybook/addon-a11y": "5.3.19",
"@storybook/addon-actions": "5.3.19",
"@storybook/addon-backgrounds": "5.3.19",
"@storybook/addon-links": "5.3.19",
"@storybook/addon-viewport": "5.3.19",
"@storybook/addons": "5.3.19",
"@storybook/react": "5.3.19",
"autoprefixer": "9.8.5",
"babel-loader": "8.1.0",
"babel-preset-gatsby": "0.5.2",
"babel-preset-react-app": "9.1.2",
"eslint-import-resolver-babel-module": "5.1.2",
"eslint-plugin-import": "2.22.0",
"postcss-cli": "7.1.1",
"postcss-import": "12.0.1",
"prettier": "1.19.1"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
"storybook": "NO_PURGE=true run-s clean build start-storybook",
"start-storybook": "NODE_ENV=production start-storybook -p 6006 -s ./public",
"build-storybook": "NODE_ENV=production build-storybook -s ./public"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"resolutions": {
"babel-plugin-remove-graphql-queries": "2.9.9"
}
}
Thanks, @smetzdev! This is really working as temp fix.
Solution in short for other Storybook users:
Static query results loading in Gatsby runtime was added in gatsby@2.24.7
and babel-plugin-remove-graphql-queries@2.9.15
, so we need to lock previous versions:
"dependencies": {
"gatsby": "2.24.6"
},
"resolutions": {
"babel-plugin-remove-graphql-queries": "2.9.14"
}
Important note: resolutions
are yarn
feature, so it doen't work with npm
. But you can just add babel plugin to dependencies list - it's working too.
But packages install through npm
breaks my Storybook in another way (mdx default styling broke, don't ask...), so i changed my package manager anyway.
Thats cool, i even learned a bit from your answer (tbh, my solution came from some trail and error 😅).
May i ask a little question out of interest:
Do you build your gatsby before starting storybook, or do you run it while also running gatsby develop
?
If you build it before you have to restart your storybook everytime you have to update a query inside storybook, but running gatsby develop
in parallel with storybook-start
runs kind of quirky...
Yeah, if i change query, then i need to run gatsby develop
to rebuild public/static
folder and then restart Storybook server. But this is not a big problem, because i am using Storybook for pure UI prototyping, and queries changes are relatively rare. I just want to get my components working in Storybook without splitting them into pure components / containers.
@blainekasten @sidharthachatterjee
I have the same problem with the latest version of Gatsby. I did some research and I think the problem comes from:
1. babel-plugin-remove-graphql-queries
still defaults to static/d
:
Considering this line: https://github.com/gatsbyjs/gatsby/blob/289c7f8c154a3d764621c39be585cee0da9c9f1c/packages/babel-plugin-remove-graphql-queries/src/index.js#L199
Recent versions of gatsby
(after "2.24.6") host the static query data in page-data/sq/d
however the latest version of babel-plugin-remove-graphql-queries
still defaults to static/d
. I suppose this default is used by the Storybook's babel-loader.
2. babel-plugin-remove-graphql-queries
doesn't check against NODE_ENV=production
anymore
This pull request edits packages/babel-plugin-remove-graphql-queries/src/index.js
with the following diff:
- [`production`, `test`].includes(process.env.NODE_ENV) &&
+ (process.env.NODE_ENV === `test` ||state.opts.stage === `build-html`) &&
Now as most Storybook + Gatsby workspaces are advised by Gatsby docs to run Storybook with NODE_ENV=production
and babel-plugin-remove-graphql-queries
after the mentioned PR doesn't check against NODE_ENV=production
the queries aren't processed anymore.
Here is what I did to confirm that these two changes are the cause of the problem:
NODE_ENV=test
as babel-plugin-remove-graphql-queries
still checks against it and processes the queries.
NODE_ENV=test start-storybook -s public
page-data/sq/d
to static/d
.Viola. The components containing the queries are loaded with the needed queries.
Cool, works for me atm. Definetly just at temporary workaround, so for now i've added a script to my package.json to copy the files and run it before storybook, which looks something like this:
"scripts": {
"copy-static-queries": "cp -r ./public/page-data/sq/d ./public/static",
"prestorybook": "npm run copy-static-queries",
}
Edit:
I used a locked version (2.9.14) of babel-plugin-remove-graphql-queries
so storybook still runs with NODE_ENV=production
@smetzdev It doesn't work for me with NODE_ENV=production
in the latest version of babel-plugin-remove-graphql-queries
. However NODE_ENV=test
works as expected.
It might be that your babel-plugin-remove-graphql-queries
is somehow resolving to an earlier version of the plugin.
You're right, i still had it left over in my dependencies without me noticing it. I've edited my comment above to not mislead anybody.
I still might want to keep it that way, it feels more right to me running build-storybook
in NODE_ENV=production
Especially if i host it somewhere.
Do you see any problems there?
@smetzdev I don't think NODE_ENV
has any effect on hosting, since your files are compiled and then you host those files. Unless the library you are using for compilation treats different environments in a different manner. For example gatsby
treats different envs differently to optimize the compilation for development and production, and it throws when you pass NODE_ENV=test
.
I don't think storybook
treats them any different. It automatically sets NODE_ENV=development
however I have been passing NODE_ENV=production
, and recently NODE_ENV=test
to get the queries processed by babel-plugin-remove-graphql-queries
. I can't say I have noticed any change whatsoever.
Update: As react
itself handles NODE_ENV
differently to decide whether to export the development bundle or the minified one, it's probably best not to depend on NODE_ENV
to process queries. It would be best to introduce a new environment variable for babel-plugin-remove-graphql-queries
.
FWIW, @mohsenkhanpour and @smetzdev 's fixes of NODE_ENV=test
and cp -r ./public/page-data/sq/d ./public/static
above seem to be working for me. It feels a little "hacky" but for now, it's getting the job done. Thanks, guys!
https://github.com/gatsbyjs/gatsby/pull/28922 - there is an undocumented option on the babel plugin for overwriting the static query directory rather than copying. Detailed in this PR I have opened.
My workaround for gatsby 2.31.0 and storybook 6.1.15.
I changed the options of babel-plugin-remove-graphql-queries in .storybook/main.js
.
module.exports = {
webpackFinal(config) {
config.module.rules[0].use[0].options.plugins = [
...,
[require.resolve("babel-plugin-remove-graphql-queries"), {
stage: config.mode === `development` ? "develop-html" : "build-html",
staticQueryDir: "page-data/sq/d",
}]
]
}
@DevSide that didn't quite work for me. Are you doing anything special in your storybook
script? Could you post a repro?
Thanks @DevSide, that's working for me.
For everyone else, here's a full example of what's working for me on the latest version of Gatsby as of this comment (2.32.4
). This is derived from the official Gatsby doc about integrating Storybook and @DevSide's comment.
First, make a Gatsby addon to keep your .storybook/main.js
file clean:
(sidenote: this really should just be an addon available on NPM - https://github.com/gatsbyjs/gatsby/discussions/28304)
// .storybook/addon-gatsby.js
module.exports = {
webpack: async (config, options) => {
const babelPlugins = [
// use @babel/plugin-proposal-class-properties for class arrow functions
require.resolve('@babel/plugin-proposal-class-properties'),
// use @babel/plugin-proposal-optional-chaining since Webpack 4 doesn't understand optional chaining
require.resolve('@babel/plugin-proposal-optional-chaining'),
// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
[
require.resolve('babel-plugin-remove-graphql-queries'),
{
stage: config.mode === `development` ? 'develop-html' : 'build-html',
staticQueryDir: 'page-data/sq/d',
},
],
]
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
// use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
config.module.rules[0].use[0].loader = require.resolve('babel-loader')
// use @babel/preset-react for JSX and env (instead of staged presets)
config.module.rules[0].use[0].options.presets = [
require.resolve('@babel/preset-react'),
require.resolve('@babel/preset-env'),
]
config.module.rules[0].use[0].options.plugins = babelPlugins
// Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
config.resolve.mainFields = ['browser', 'module', 'main']
// Add TypeScript support
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
presets: [['react-app', { flow: false, typescript: true }]],
plugins: babelPlugins,
},
})
config.resolve.extensions.push('.ts', '.tsx')
return config
},
}
If you aren't using TypeScript, feel free to remove that portion.
Then, in your .storybook/main.js
file, add your addon:
const path = require('path')
module.exports = {
// ...your other settings, if any
addons: [
// ...your other addons, if any
path.resolve('./.storybook/addon-gatsby.js'),
],
}
Lastly, install babel-preset-react-app
if you're using the TypeScript settings in the example above.
@angeloashmore This part helped me. Thanks a lot for this and for your amazing work on gatsby-plugin-local-search.
// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
[
require.resolve('babel-plugin-remove-graphql-queries'),
{
stage: config.mode === `development` ? 'develop-html' : 'build-html',
staticQueryDir: 'page-data/sq/d',
},
],
thank you very much for the answers above.
i was able to run and see images via gql using this topic and recipe https://github.com/PaulieScanlon/gatsby-recipe-storybook-js
start-storybook mode
"storybook": "NODE_ENV=production start-storybook -s public -p 6006 --debug-webpack",
build-storybook /serve mode after build and running npx http-server i see no images , just Loading (static query)
"storybook-build": "NODE_ENV=production build-storybook -s public --debug-webpack",
"storybook-serve": "npx http-server ./storybook-static"
in both cases babel plugin goes onto build mode
[require.resolve("babel-plugin-remove-graphql-queries"), {
stage: config.mode === `development` ? "develop-html" : "build-html",
staticQueryDir: "page-data/sq/d",
}],
Destination folder storybook-static
static folder has folders with images and page-date/sq/d/ has gql cache json files as expected
my package.json https://pastebin.com/TRj35qmN
CC @smetzdev @jonniebigodes @mohsenkhanpour
I've also not been able to get lazy images to work. With the right Storybook webpack config, useStaticQuery
works, but it seems the job to lazily transform images are not done. Now that lazy images cannot be disabled, it leaves our storybook not really working.
Any clues as to how to get the images transformed when an image is used from a static query in Storybook?
Solution with config.mode === 'development' ? 'develop-html' : 'build-html'
doesn't work for me anymore with build-storybook (it worked on previous versions). Since start-storybook is working great, can I use 'develop-html'
stage for the production build? It works, but any side effects in this solution? I suppose this is not worse than previous solution with NODE_ENV="test" 🤔
Gatsby 3.3.0 Storybook 6.2.8 – with @storybook/builder-webpack5 Webpack 5.28.0 – locked, because the newer version causes another troubles :(
I have the same @p1t1ch problem. I'm able to make it work with build-storybook
only by setting config-mode to 'develop-html'. Any warn on doing that?
I'll close this issue as it's not about Gatsby but the correct configuration for Storybook.
We've since then updated our Storybook guide (thanks to various contributors): https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/
It also includes a section on a new Storybook Addon for Gatsby: https://storybook.js.org/addons/storybook-addon-gatsby
If you have further questions for configuring Storybook with Gatsby please go to our GitHub Discussions (https://github.com/gatsbyjs/gatsby/discussions/categories/help) or to the addon's page. Thanks!
Description
Fetching data via
useStaticQuery
within a story causes Storybook to break.Steps to reproduce
I setup a reproduction repo, based on gatsby-default starter, following the description how to use Storybook with Gatsby.
Reproduction Repo
Expected result
The Story in the repo is supposed to show the queried title "Gatsby Starter Default".
Actual result
Error message:
Environment
System: OS: macOS 10.15.5 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 13.12.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.4 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 84.0.4147.89 Firefox: 78.0.2 Safari: 13.1.1 npmPackages: gatsby: ^2.23.12 => 2.24.13 gatsby-image: ^2.4.9 => 2.4.14 gatsby-plugin-manifest: ^2.4.14 => 2.4.21 gatsby-plugin-offline: ^3.2.13 => 3.2.21 gatsby-plugin-react-helmet: ^3.3.6 => 3.3.10 gatsby-plugin-sharp: ^2.6.14 => 2.6.23 gatsby-source-filesystem: ^2.3.14 => 2.3.23 gatsby-transformer-sharp: ^2.5.7 => 2.5.11