Gatsby Head API support?

[matiaskorhonen]

Is it possible to use translations with Gatsby's Head API?

I tried to just use the useTranslation hook, but it doesn't seem to find any translations:

For example:

import * as React from "react"
import { useTranslation } from "gatsby-plugin-react-i18next"

const Page = () => {
   const { t } = useTranslation();
  return (<div>t("home.title")</div>);
}

export default Page

export function Head() {
  const { t } = useTranslation();
  return (
    <title>{t("home.title")}</title>
  )
}

That just resulted in the page title getting set to home.title even though the page itself got the correct translation…

[emberal]

A workaround that I found, that does not use 'useTranslation'

export const Head = ({ data }: HeadProps<any>) => {
    const locales = data.locales.edges[0].node.data;
    let obj: any = undefined;
    if (locales) {
        obj = JSON.parse(locales);
    }
    return <title>{ obj?.title }</title>;
};

[ruizanthony]

@h600878 thank you for this workaround ... I'm hoping the useTranslation will be fixed with the Head API though ... it will be more readable, and we can use the entire message as keys (nice feature of gatsby-plugin-react-i18next)

[ahmet-cetinkaya]

I hope the usei18next will be work on the Head API soon.

[Nosferatu31]

@h600878 thank you so much for your snippet!

[Nosferatu31]

BTW, when using templated strings such as:

{
    "welcome_message": "Welcome, {{name}}!"
}

It helps to use:

String.prototype.format = function () {
    var i = 0, args = arguments
    return this.replace(/{{.*}}/g, function () {
        return typeof args[i] != 'undefined' ? args[i++] : ''
    })
}

So, for instance:

return <title>{ obj?.welcome_message.format('Bob') }</title>;

Outputs:

"Welcome, Bob!"

Note: the format arguments must follow the order of appearance of the translation string

[MuellerConstantin]

Are there any current plans to support the Gatsby Head API in the future? What is the specific problem that this is not supported? As it is now, almost no i18n SEO support is possible 😕. @h600878's solution is more of a hack than a solution...

[newme616]

Are there any current plans to support the Gatsby Head API in the future? What is the specific problem that this is not supported? As it is now, almost no i18n SEO support is possible 😕. @h600878's solution is more of a hack than a solution...

true!

[MuellerConstantin]

The problem is the "place" where the I18next react context is declared, right? For declaration the wrapPageElement API is used in this plugin. However, according to the documentation, only the contexts declared using wrapRootElement, not using wrapPageElement, are reachable in the Head API.

As of gatsby@5.6.0, Head can access React Context that you defined in the wrapRootElement API. It’s important to note that wrapRootElement should only be used to set up context providers. UI components should be defined in wrapPageElement API.

Is it an option to just use wrapRootElement instead of wrapPageElement, or does it introduce new hidden problems?

[kuzdogan]

For me the problem was not using the Head API inside a "Page" i.e. a file under /pages. Read "Usage Notes" carefully https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/#usage-notes

[burakozdemir32]

Can we also handle wrapRootElement as mentioned in Gatsby Head documentation in the next versions? Currently, the hacky workarounds are suggested, but Gatsby Head support can be provided in the plugin level.

[newme616]

If you have multiple namespaces, quite hacky but works. you can use this:

export const Head = ({ location, params, data, pageContext }) => {
  // merge all namespaces
  const mergedLocales = data.locales.edges.reduce((acc, edge) => {
    return { ...acc, ...JSON.parse(edge.node.data) };
  }, {});

  const lang = pageContext?.i18n.language;

  let obj = undefined;

  if (mergedLocales) {
    obj = mergedLocales;
  }

  return (
    <>
      <SEO title={obj && obj[`lora`]} description={obj && obj["lora-about"]} lang={lang}></SEO>
    </>
  );
};