Document passing options to themes (and plugins)

[ChristopherBiscardi]

Via https://twitter.com/zairon87/status/1134883660967096322

We don't seem to have documentation for theme option usage in gatsby-config. We also need some for regular plugin options which we can also use for themes. Finally, we might want information on how to use options to do interesting things, like set tokens in wrapRoot*, swap MDX for remark, or change layouts.

• Basic config => Themes API Reference.
• Set tokens in wrapRoot
• Don't configure plugin based on an option
• Swap plugin based on an option
• Change layouts

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[shansmith01]

Hey @ChristopherBiscardi I was just talking to you on twitter about something like this. I would love to know more. At the moment I am messing around with an eccom theme so what I was think of doing it something like this in gastby-config

__experimentalThemes: [
    {
      resolve: "gatsby-theme-eccom",
      options: // maybe call this config {
        stripePublicApiKey: "12345678",
      },
    },
  ],

And then say in my gatsby-theme-eccom/src/components/whichEverComponent be able to use that API key like so...

useEffect(() => {
    setStripe(window.Stripe("options.stripePublicApiKey"))
  }, [])

[johno]

One option you'd have @shansmith01 is using the useStaticQuery hook to query the options passed to your theme. It'd look something like:

// gatsby-theme-eccom/src/components/whichEverComponent.js
export default () => {
  const { sitePlugin } = useStaticQuery(graphql`
    query {
      sitePlugin(name: { eq: "gatsby-theme-eccom" }) {
        pluginOptions: {
          stripePublicApiKey
        }
      }
    }
  `)

  return <pre>{JSON.stringify(sitePlugin, null, 2)}</pre>
}

[shansmith01]

That's an interesting approach. Thanks @johno

[laurieontech]

@gillkyle Wondering how this overlaps with your current PR and whether there is additional work we could do on that page to cover some of these ideas in a future PR?

[AishaBlake]

I'm not seeing the kind of content Chris described. @gillkyle, feel free to chime in if I'm missing something. @laurieontech, maybe we could discuss post-Gatsby Days/Gathering? This has been sitting for a really long time but it seems worth addressing to me.

[laurieontech]

Yup, let's plan on that.