[gatsby-theme-i18n] Can page be translated?

[mi5ha]

Hi there,

I tried creating index.de.tsx page, and plugin generates /de/ page. But that page still shows index.tsx page!

Is this theme meant to be used this way?
Thanx

[flogy]

Have the same issue. It seems to me that only MDX files are checked for a .de. pattern and all others are not?

[eneax]

@mi5ha I had the same problem, and solved it by adding the locale to the query as shown in the example-18n

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

I hope it helps!

[DirkLachowski]

Could you elaborate on that? Where do i put that query for the index page?

[eneax]

The above query is used to build the blog posts.
In this case, you write the query in the blog-template.js file located inside the templates folder.

If you want to create an index page, I think this query is what you're looking for:

export const query = graphql`
  query($locale: String!) {
    allFile(
      filter: {
        sourceInstanceName: { eq: "blog" }
        childMdx: { fields: { locale: { eq: $locale } } }
      }
    ) {
      nodes {
        childMdx {
          frontmatter {
            slug
            title
          }
        }
      }
    }
  }
`

You should use it inside your index.js file located in the pages folder as shown in the example-i18n index page.

[DirkLachowski]

Thank you. I'm rather new to Gatsby (coming from Middleman). I'm not trying to build a blog but want to be able to translate pages either through placeholders or with completely different page content per language. I now ended up with a twofold approach.

• Pages that can be translated by using placeholders live in /src/pages/
• Pages that need different source files per language live in `/src/translated``

The later are then processed by a default template like this:

import * as React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "../components/layout"
import PropTypes from "prop-types";

const DefaultTemplate = ({ data, pageContext }) => {
    return (
        <Layout>
            {data.mdx ? (
                <MDXRenderer>{data.mdx.body}</MDXRenderer>
            ) : (
                <div>This page hasn&apos;t been translated yet</div>
            )}
        </Layout>
    )
}

DefaultTemplate.propTypes = {
    data: PropTypes.object.isRequired,
    pageContext: PropTypes.object.isRequired
};

export default DefaultTemplate

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

and this gatsby-node.js:

exports.createPages = async ({ actions, graphql, reporter }) => {
    const { createPage } = actions

    const defaultTemplate = require.resolve(`./src/templates/default-layout.js`)

    const result = await graphql(`
    {
      translated: allFile(filter: { sourceInstanceName: { eq: "translated" } }) {
        nodes {
          childMdx {
            frontmatter {
              slug
            }
          }
        }
      }
    }
  `)

    if (result.errors) {
        reporter.panicOnBuild(result.errors)
        return
    }

    const pages = result.data.translated.nodes

    pages.forEach(({ childMdx: node }) => {
        createPage({
            path: node.frontmatter.slug,
            component: defaultTemplate,
            context: {
                slug: node.frontmatter.slug,
            },
        })
    })
}

Still looking for a way to omit the slug in the mdx frontmatter, though.