Gatsby theme i18n markdown doesn't change language when toggle

Question

I'm using both plugins, gatsby-theme-i18n and gatsby-theme-i18n-react-i18next

I think gatsby-theme-i18n-react-i18next work fine. But gatsby-theme-i18n for markdown files don't work, possibly I don't understand well enough so

I can change language for Layout, Template (gatsby-theme-i18n-react-i18next) but I can't change language for markdowns (gatsby-theme-i18n)

I toggle between en // th to change language like so

gatsby-config.js

...
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `products`,
    path: `${__dirname}/src/products/`,
  },
},
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: [`.md`, `.mdx`],
  }
},
{
  resolve: `gatsby-theme-i18n`,
  options: {
    configPath: require.resolve(`./i18n/config.json`),
    defaultLang: `en`,
  }
},
...

gatsby-node.js

const path = require('path')
exports.createPages = async ({ actions: { createPage }, graphql, reporter }) => {
  const productTemplate = path.resolve('src/templates/Product.js')
  const result = await graphql(`{
    product: allFile( filter: {
      sourceInstanceName: { eq: "products" } 
      ext: { eq: ".md" } 
    } ) {
      nodes {
        childMdx {
          frontmatter {
            slug
          }
        }
      }
    }
  }`)
  if (result.errors) {
    reporter.panicOnBuild(result.errors)
    return
  }
  result.data.product.nodes.forEach(({ childMdx: { frontmatter: { slug } } }) => {
    createPage({
      path: slug,
      component: productTemplate,
      context: {
        slug: slug,
      },
    })
  })

}

Layout component ( toggle to change language )

import { LocalizedLink } from 'gatsby-theme-i18n'
export default function Layout({ children, slug }){
  return (
    ...
    <LocalizedLink to={slug} language="en">en</LocalizedLink>{'//'}
    <LocalizedLink to={slug} language="th">th</LocalizedLink>
    ...
  )
}

Template to hold markdowns

import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { LocalizedLink } from 'gatsby-theme-i18n'
import { useTranslation } from 'react-i18next'
import React from 'react'
import Layout from '../components/Layout'
export default function Product({ data: { mdx: { body, frontmatter } }, pageContext }){
  const { t } = useTranslation()
  return (
    <Layout slug={frontmatter.slug}>
      <h3>{frontmatter.title}</h3>
      <MDXRenderer>{body}</MDXRenderer>
      <LocalizedLink to="/">{t('back-to-menu')}</LocalizedLink>
    </Layout>
  )
}
export const dataquery = graphql`
  query {
    mdx {
      body
      frontmatter {
        slug
        title
      }
    }
  }
`

translation data file (markdown)

./i18n (config)

Answer 1

Based on the template of the i18next official documentation you need to provide the locale in your template query:

export const query = graphql`
  query($locale: String!, $slug: String!) {
    mdx(
      fields: { locale: { eq: $locale } }
      frontmatter: { slug: { eq: $slug } }
    ) {
      frontmatter {
        slug
        title
      }
      body
    }
  }
`

Note: remove the exclamation mark of ($locale: String!) if the code breaks.

Since it's not passed as a context in the gatsby-node.js query, I assume that the plugin modifies the GraphQL node by adding this required parameter (because of the exclamation mark at: $locale: String!), allowing you to render each post when the language changes.

In addition, among this configuration, you need to provide the <MDXProvider> component in your <Layout>:

const Layout = ({ children }) => {
  const { t } = useTranslation()
  return (
    <React.Fragment>
      <header>
        <LocalizedLink to="/">{t("home")}</LocalizedLink>
      </header>
      <main>
        <MDXProvider components={components}>{children}</MDXProvider>
      </main>
    </React.Fragment>
  )
}