Add Options To A Gatsby Theme
September 26, 2019
Chris Biscardi posted 3 different blog posts going over how to add options to a gatsby theme.
This option seems the most straight forward if you don't know Gatsby but you are familiar with React Context.
Chris goes over how you can use
gatsby-ssr.js to get the context to a consumer of your theme and to the theme itself.
One question I had was how do you set the value of the context as an option to the theme? It seems like this can create a default but then you make the consumer of your theme have to set the context value in react. My desired api is to pass an option to the theme in
Option number 2 is to use a webpack feature 🤯
You can use webpacks
DefinePlugin to create a feature flag. This flag is then available in the rest of your app.
I'm less of a fan of this approach purely because setting the global webpack flags feels a little bit like magic and might be hard for newer people on the project or yourself when you comeback to it in a couple months.
This is the option that I went with. I like it because it adds your config in the GraphQL layer of gatsby.
This approach keeps all your configuration options in one spot. It also documents all the options in
graphql if you want to explore them there and you dont have to know the magic global variable name.