-
Notifications
You must be signed in to change notification settings - Fork 72
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
warning: You will need to pass in an i18next instance by using initReactI18next #179
Comments
Okay so I figured it out, unlike shown in the example, useTranslation doesn't work in Head |
👋 Hey @v4iv did you ever figure out a way to get access to translations inside of the Head export? |
No 🙁 |
👋 @v4iv ...just incase this is useful to you. Our workaround to accessing the translations inside of the Head export is to create a hook called /**
* A temporary workaround that lets us access our translation strings from within the Gatsby Head export.
* In the future the hope is that we can replace this like-for-like with the useTranslation() hook from 'gatsby-plugin-react-i18next'.
*
* @param {import("gatsby-plugin-react-i18next/dist/types").PageContext} pageContext
* @param {{locales: {edges: {node: {language: string; ns: string; data: string}}[]}}} pageData
* @returns {{t: (key: string) => string}}
*/
const useHeadTranslation = (pageContext, pageData) => {
const edges = pageData.locales.edges.filter(
edge => edge.node.language === pageContext.language
)
return {
t: key => {
const path = key.split(".")
const namespace = path[0]
const translations = JSON.parse(
edges.find(edge => edge.node.ns === namespace).node.data
)
// I don't like that this is really hard to understand. It's essentially letting us do `translations['about.title']` where "about.title" is dynamic. 🤔
return (
path.reduce((arr, pathSegment) => arr[pathSegment], translations) ?? key
)
},
}
}
export default useHeadTranslation which you can import and use as: import useHeadTranslation from "@/hooks/use-head-translation"
export const Head = ({ data, pageContext }) => {
const { t } = useHeadTranslation(pageContext, data)
return <SEO title={t("about.title")} description={t("about.description")} />
} This all assumes that your page is querying for your locales like: locales: allLocale {
edges {
node {
ns
data
language
}
}
} This method works quite well (for us) as you get vscode intellisense as we're still technically using the Hope this helps you 🤞 |
Thanks bud! |
Hi everyone,
Not really a breaking issue but I'm getting the following warning on build, but not on dev. I don't really understand why?
BTW currently I only support one language - English.
This is my repo : The Leaky Cauldron Blog
This is my netlify build logs - Build Logs
The text was updated successfully, but these errors were encountered: