Contentful content.

[mbappai]

How does one use this plugin while having all contents stored in a contentful CMS? How will it be possible to query the preferred locale based on the user's language selection?

[flocbit]

One way to use the currently selected language to load content from a CMS is to use injectIntl HOC and read locale (current language) from props.intl.

[mbappai]

One way to use the currently selected language to load content from a CMS is to use injectIntl HOC and read locale (current language) from props.intl.

Thank you very much for your reply. Do you still think the injectIntl HOC is still a thing in the v3 or react-intl?

[flocbit]

gatsby-plugin-intl currently does not support react-intl v3 so for now this is the proposed way I guess ;)

[mbappai]

gatsby-plugin-intl currently does not support react-intl v3 so for now this is the proposed way I guess ;)

Yeah, I understand. I am, however, finding it a bit difficult to think of a way to switch the language based on the props.intl from the injectIntl HOC you suggested. Were you suggesting that I query both locales from my CMS at the same time then have like a condition to switch the locales based on the props.intl? Will that work?

[flocbit]

That depends on the CMS you use. I would try to append the language code to the API call when loading data from your CMS.

[mbappai]

Using contentful, I was thinking about having my query like this.

export const query =graphql`
{
    site {
        siteMetadata {
          languages {
            defaultLangKey
            langs
          }
        }
      }
 chineseSpace:allContentfulWorkspace(filter: {node_locale: {eq: "zh-CN"}}) {
    edges {
      node {
        id
        slug
        price
        duration
        name
        node_locale
        shortDescription {
          shortDescription
        }
        thumbnail{
          fluid{
            ...GatsbyContentfulFluid
        }
        }
      }
    }
  }
  englishSpace:allContentfulWorkspace(filter: {node_locale: {eq: "en-US"}}) {
    edges {
      node {
        id
        slug
        price
        duration
        name
        node_locale
        shortDescription {
          shortDescription
        }
        thumbnail{
          fluid{
            ...GatsbyContentfulFluid
        }
        }
      }
    }
  }
  }`

Then i'll later use a condition like follows

const data= props.intl==='en-US'?englishSpace:chineseSpace;

What do you think about this?

[mikexavier]

Hey, @mujeex did you manage to solve your issue with this? I'm facing the same thing at the moment with WordPress.

[mbappai]

Hey, @mujeex did you manage to solve your issue with this? I'm facing the same thing at the moment with WordPress.

Hey Mike! Sorry for the late response. Sorry again, but I never managed to finish localizing that project. I just ended up using english, as other languages were not a priority at the time.