Gatsby: Import `themeOptions` in components

[ImedAdel]

Summary

In order to pass themeOptions to a certain component, the best way currently is to pass it to the pageContext. It would be awesome if we can just import themeOptions in any component.

Basic example

const Comp = ({ themeOptions }) => ({ themeOptions.name })

[entr]

All plugin options are available in graphql. Look for sitePlugin node type in graphql explorer.

[ryanwiemer]

@entr I don't think that works for the theme options. At least when I look at the sitePlugin node I don't see my theme options there.

@ImedAdel Currently on my theme I am storing theme options in the Context. I add my Provider in gatsby-browser.js and gatby-ssr.js. This allows me to easily access theme options in individual components. This seem to work fine although a more official solution in Gatsby would be nice.

[entr]

@ryanwiemer it works. I do it in my current project.

[ImedAdel]

Hmm... well, it seems possible to get themeOptions using this query

query {
  sitePlugin(name: {eq: "gatsby-theme-blog"}) {
    pluginOptions {
    }
  }
}

However, this is tedious if you need to import it in multiple components, furthermore, if your site is quite huge (+10k pages), page queries will slow the build time _a lot_.

[entr]

@ImedAdel that's why you create a graphql fragment fragment MyThemeOptionsFragment on Query { ... } and reuse it where you need it.

[ImedAdel]

Yup, but page queries are very slow in large websites, which is why we switched to passing the data through the pageContext. But, a more explicit way to import themeOptions would be better.

[LekoArts]

Chris' solution works really good for me:
https://www.christopherbiscardi.com/post/applying-theme-options-using-custom-configuration-nodes/

Create a custom hook and et voilá:
https://github.com/LekoArts/gatsby-themes/blob/master/themes/gatsby-theme-specimens/src/hooks/useSpecimensConfig.tsx

https://github.com/LekoArts/gatsby-themes/blob/master/themes/gatsby-theme-specimens/gatsby-node.js

[ChristopherBiscardi]

In addition to the custom configuration nodes, you can also pass values in via webpack's defineplugin or even write files out based on the theme options and put them in wrapRoot, etc. There are a lot of ways to accomplish this and I want to hold off on making an official declaration of which one to prefer while more themes start taking up these patterns.

Since I don't see a way to achieve passing theme options to every single component as suggested in the original comment I'm going to close this.

---

So basically I think we should continue exploring the ergonomics of various approaches here and we can do that in user-land rather than baking it into core immediately. One thing we could do is make a package that includes a set of helpers to achieve the various ways to do this, similar to what we've done with gatsby-theme: https://github.com/ChristopherBiscardi/gatsby-theme (in fact, we can probably even put it in the same package)