Pass function in plugin options to gatsby-browser.js

[HriBB]

How can we pass functions in plugin options?

app/gatsby-config.js

{
  resolve: `gatsby-plugin-i18next`,
  options: {
    getLanguage(pathname) {
      return pathname.substr(1,2) === 'en' ? 'en' : 'si'
    },
    config: {
      fallbackLng: 'en',
      ns: [],
      interpolation: {
        escapeValue: false, // code escaping in interpolated text is not needed with react
      },
      react: {
        wait: false,
      },
    },
  },
},

gatsby-plugin-i18next/gatsby-node.js

exports.onCreatePage = ({ page } , pluginOptions) => {
  console.log(pluginOptions);
}

Output of console.log

{ plugins: [],
  config: 
   { fallbackLng: 'si',
     ns: [],
     interpolation: { escapeValue: false },
     react: { wait: false } } }

As you can see, getLanguage function is not available in plugin options. Am I missing something obvious here?

[HriBB]

Hmm wait, getLanguage IS available in gatsby-node.js, but not in gatsby-browser.js

[calcsam]

What are you trying to do exactly?

Gatsby has a build step where pages are generated, where the code from gatsby-node are called. It also runs some code client-side, where the code from gatsby-browser is called. getLanguage deals with client navigation and path, why are you running it in gatsby-node?

[HriBB]

I was trying to write a i18n plugin, where user would define a function in the plugin config. This function would be used throughout the plugin code, to determine the language from pathname. I tried to do something like this in gatsby-browser.js:

exports.onClientEntry = (obj, { getLanguage }) => {
  //const language = getLanguage(window.location.pathname) // getLanguage is undefined
  const language = window.location.pathname.substr(1,2) === 'en' ? 'en' : 'si'
  i18next.changeLanguage(language)
  }
}

exports.onRouteUpdate = ({ location }, { getLanguage }) => {
  const language = location.pathname.substr(1,2) === 'en' ? 'en' : 'si'
  if (i18next.language !== language) {
    i18next.changeLanguage(language)
  }
}

But it's not possible, because pluginOptions in gatsby-browser.js is JSON.stringified version of the config options and does not contain functions. Might be worth mentioning in the docs. You can close this issue I guess ...

After some thought, I used a different approach. By creating a custom graphql Locale node, I am able to query translations and dynamically load language and/or namespace using a HOC. I will try to extract it into a plugin, might be useful for someone else.

[m-allanson]

@HriBB Thanks for the update, there's now a note in the docs about plugin config stringification.