CODEWITHSUNDEEP
graphqlgatsby
angry
angry

Reputation: 421

Multi-language support with GraphQL

I'm trying to use GatsbyJS static site generator to rewrite my site. User can change language via UI. There are few folders with localized text data:

- src - data - en - text1.json - text2.json ... - de - text1.json - text2.json ... - es - text1.json - text2.json ...

How can I get data according to the current language? How should the GraphQL query look like?

Upvotes: 2

Views: 2157

Answers (1)

Nenu
Nenu

Reputation: 2657

You can use the community gatsby-plugin-i18n.

You can found an example using markdownRemark configuration:

// Add to gatsby-config.js
plugins: [
  {
      resolve: 'gatsby-plugin-i18n',
      options: {        
        langKeyDefault: 'en',
        useLangKeyLayout: false,
        markdownRemark: {
          postPage: 'src/templates/blog-post.js',
          query: `
          {
            allMarkdownRemark {
                edges {
                  node {
                    fields {
                      slug,
                      langKey,
                    }
                  }
                }
             }
          }
          `
        }
      }
    }
]

You will probably want to filter your graphql query according to the langKey value:

allMarkdownRemark(filter: { fields: { langKey: { eq: "en" } } }) {
  edges {
    node {
      fields {
        slug,
        langKey,
        #your data
      }
    }
  }
}

Looking at the showcase sources could help you too.

Upvotes: 2

Related Questions