Open matiaskorhonen opened 2 years ago
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>;
};
@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)
I hope the usei18next will be work on the Head API soon.
@h600878 thank you so much for your snippet!
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
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...
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!
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?
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
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.
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>
</>
);
};
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:
That just resulted in the page title getting set to
home.title
even though the page itself got the correct translation…