Proper way to update gatsbystorefront-config.js ?
wes1278 opened this issue · comments
I'm new to gatsby. Seems awesome. Themes seem awesome. Shadowing seems awesome.
However, It seems like gatsbystorefront-config.js is a critical file to this application. As most of the configurations one would want to make are in this file. But, I'd have to edit this stuff inside my root directory/node_modules/@gatsbystorefront/gatsby-theme-storefront-shopify/gatsbystorefront-config.js ? Why would this be a desired method to update?
I can't shadow this file since it's not in the src folder. Any particular reason it was designed this way? Am I missing something? What if I wanted to update the theme if an update ever came about? Seems like I lose all my changes? Can/should I sync this with another directory or something?
Seems a bit crazy to a newcomer.
@wes1278 I have used gatsby for multiple sites, but this is the first time I tried using shadowing. Took me a little bit, but I was able to figure out how to make updates to this theme using shadowing.
- Make sure you follow the prerequisites in the readme
- Create the following directories:
/src,/src/@gatsbystorefront, and/src/@gatsbystorefront/gatsby-theme-storefront-shopify - You can shadow any of the files outside of src by putting them in the
/src/@gatsbystorefront/gatsby-theme-storefront-shopifydirectory. In order to address your initial question, you would copygatsbystorefront-config.jsfrom node_modules, paste it in here, and make your edits. Files inside of src can be shadowed by following the same folder heirarchy as you see it in node_modules, but don't include src.
i.e. If I want to shadow
node_modules/@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/Footer.jsx
I would copy Footer.jsx from there and paste it into
/src/@gatsbystorefront/gatsby-theme-storefront-shopify/components/Footer.jsx
NOTE: Regarding shadowing gatsbystorefront-config.js - it's not enough just to copy it, paste it in the appropriate directory, and make your edits. The components in the theme are still importing the original gatsbystorefront-config.js. In order to see your changes, you will need to shadow the components as well, and import your version of gatsbystorefront-config.js. e.g. In order to see my changes to the footer text, I needed to update the text in gatsbystorefront-config.js and shadow Footer.jsx.
NOTE: Regarding shadowing components - If they have relative imports of other components in the theme, you'll either need to shadow those imports or change them to absolute paths to the theme's components. Check out how the imports look when I shadowed Navbar.js:
import Menu from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/Menu"
import Search from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/Search"
import ShoppingBag from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/Icons/ShoppingBag"
import ShoppingCart from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/Icons/ShoppingCart"
import config from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/gatsbystorefront-config"
import strings from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/strings.json"Hope this helps!
Sources that led me in the right direction:
https://www.christopherbiscardi.com/post/gatsby-shadow-contexts/
https://github.com/ChristopherBiscardi/gatsby-theme-examples/tree/master/examples/shadowing-01
I can't get the queries to run on shadowed components. Can somebody help with that?
I can't get the queries to run on shadowed components. Can somebody help with that?
@johncookv it seems to be an issue with GatsbyJs. There are few issues open right now like: gatsbyjs/gatsby#19980
For now I would suggest to clone and make changes in the theme itself.
I can't shadow this file since it's not in the src folder. Any particular reason it was designed this way? Am I missing something?
@wes1278 it seems like architectural mistake. This file should be replaced to be available for shadowing. I will work on it.
What if I wanted to update the theme if an update ever came about? Seems like I lose all my changes? Can/should I sync this with another directory or something?
If you are making a lot of changes I would suggest to clone and make changes in the theme itself.
I can't get the queries to run on shadowed components. Can somebody help with that?
As a kind of workaround you can rename graphql query in shadowed component.