gatsby: Hot reload doesn't re-run page query until I save twice
When I modify a page query, I have to save twice for hot reload to re-run the page query.
Steps to reproduce
- Edit a page query
- Save
- Save
Expected result
run page queries output after first save, for example:
success onPreExtractQueries - 0.009s
success extract queries from components - 0.032s
success write out requires - 0.002s
success run page queries - 0.011s - 1/1 88.96/s
success Re-building development bundle - 0.064s
Actual result
run page queries output only after second save:
success onPreExtractQueries - 0.009s
success extract queries from components - 0.045s
success write out requires - 0.006s
success Re-building development bundle - 0.425s
success onPreExtractQueries - 0.009s
success extract queries from components - 0.032s
success write out requires - 0.002s
success run page queries - 0.011s - 1/1 88.96/s
success Re-building development bundle - 0.064s
I don’t think this is a recent thing; I just didn’t entirely recognize the issue I was having with hot reloads until now. “Try saving twice” didn’t really occur to me until this week, when I discovered the workaround.
Environment
Note my environments are WSL 2 on Windows 10. Easily reproduced in this repo; just edit the page query in src/pages/index.js and note you’ll need to save twice to get the page query to re-run.
System:
OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch)
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Shell: 4.4.12 - /bin/bash
Binaries:
Node: 12.18.3 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.6 - /usr/local/bin/npm
Languages:
Python: 2.7.13 - /usr/bin/python
npmPackages:
gatsby: ^2.24.47 => 2.24.47
gatsby-source-sanity: ^6.0.4 => 6.0.4
and
System:
OS: Linux 4.19 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 11.6.0 - /usr/bin/node
npm: 6.14.8 - /usr/bin/npm
Languages:
Python: 2.7.15 - /usr/bin/python
npmPackages:
gatsby: ^2.24.47 => 2.24.47
gatsby-source-sanity: ^6.0.3 => 6.0.3
npmGlobalPackages:
gatsby-cli: 2.4.11
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 8
- Comments: 34 (22 by maintainers)
Published in
gatsby@2.24.74I’ve had this issue intermittently as well. Looking at the changes between 2.24.9 and 2.24.10:
https://github.com/gatsbyjs/gatsby/compare/gatsby@2.24.9...gatsby@2.24.10
It looks like @ascorbic did some work in https://github.com/gatsbyjs/gatsby/pull/25815 that might have affected how fast-refresh and/or hot-reload work. @ascorbic what do you think?
@hartshorne No. Some kind of cache race condition sounds possible though. It takes a second or two to build my component library on save. Gatsby seems to detect the change looking at the cli and browser console. But no changes show in the browser.
@vladar, I can confirm this change has resolved my issue, thank you! Changes to page and template queries now re-run immediately and the changes hot reload. 👍 (For what it’s worth hot reload appears to be better in general now; I’m also noticing my gatsby-source-sanity watch mode is suddenly much more reliable.)
@hartshorne, my guess is you’ll want to file a new issue, since I think your problem (may have been exacerbated by this problem but) is somewhere in the Gatsby TypeScript stack. I will soon be incrementally adopting TS in Gatsby so for my sake I hope you find the fix 😅
I stumbled upon this issue while debugging a somewhat similar scenario. And now I think it is exactly the same problem. If so, it should be fixed by #27408
I’m also facing the issue on Mac OS. The only workarround that worked for me is to rollback to 2.24.9
I can confirm it works correctly in WSL 2 on
2.22.22. That’s a great detail to add, thanks @codepunkt.