fix(gatsby): correctly inject static query in theme components #10786
Conversation
This PR (correctly) replaces static query content in themes. It does this with a probably naive algorithm, where it checks the plugins array, and if a plugins path matches (gatsby-theme-), that plugin will be added to the query compiler list. It also slightly cleans up some of the code in the query compiler and adds a few tests Notes: - I validated with this repo -> https://github.com/DSchau/gatsby-theme-static-query-repro - Can't really tie into webpack (e.g. to detect a custom loader targeting node_modules/whatever-custom-component) because we use webpack-merge to persist into redux state, which gets translated to an empty object; although I would like to find some solution to non-theme packages in node_modules Feedback welcome, cc @ChristopherBiscardi @jbolda
| const filesRegex = `/**/*.+(t|j)s?(x)` | ||
| let files = [`${this.base}/src`, `${this.base}/.cache/fragments`] | ||
| .concat( | ||
| this.additional.map(additional => path.join(this.base, additional)) |
There was a problem hiding this comment.
This presumes all the same directory (e.g. node_modules/gatsby-theme, or plugins/gatsby-theme)... not sure if/how monorepos would work, so that's a wrinkle to consider.
There was a problem hiding this comment.
Themes need an index.js because they function as plugins so I think we can use path.dirname(require.resolve(theme)) to get the correct base location
There was a problem hiding this comment.
Sounds like an easy fix--thanks!
|
Nice! Pretty exciting to see that this was actually the issue. closes ChristopherBiscardi/gatsby-theme-examples#11 I'll mention that I'm doing some work in #10787 that would be useful for getting a list of themes in use from the redux store. From my understanding, that would help fix the |
|
Should be fixed in 3b65605 |
|
|
||
| export default async function compile(): Promise<Map<string, RootQuery>> { | ||
| const { program, schema } = store.getState() | ||
| // TODO: swap plugins to themes |
There was a problem hiding this comment.
cc @ChristopherBiscardi once #10787 lands I can swap to themes from the redux state.
I don't really consider it a blocker for this PR though. We can get this one merged and then tweak later, removing the gatsby-theme test which will be 👌
|
|
||
| export default async function compile(): Promise<Map<string, RootQuery>> { | ||
| const { program, schema } = store.getState() | ||
| // TODO: swap plugins to themes |
|
@ChristopherBiscardi I'll merge this first thing tomorrow AM and get a build out with this tweak! |
There was a problem hiding this comment.
Verified and works as expected. Will iterate on grabbing themes once PR from @ChristopherBiscardi will be merged, but this is good to go in meantime
|
Cheers @DSchau, works a treat! |
Description
This PR (correctly) replaces static query content in themes. It does this with a probably naive algorithm, where it checks the plugins array, and if a plugins path matches (gatsby-theme-), that plugin will be added to the query compiler list. It also slightly cleans up some of the code in the query compiler and adds a few tests
Notes:
gatsby-theme-*constraint for all themes, so another solution may be preferableFeedback welcome, cc @ChristopherBiscardi @jbolda
Related Issues
Fixes #10785