Sources / GraphQL about gatsby-plugin-intl HOT 3 OPEN

I rewrote parts of this plugin to filter translations from a source plugin and removed the parts reading directly from the file system.

I will say this, retrieving the translations from of the GraphQL API was a bit challenging. We're limited to the using Page Queries since Pages are the only parts of a Gatsby app that can make GraphQL queries with variables in them. The variable we need to provide is the locale/lang which is set on pageContext.intl.lang.

I'm hoping <StaticQuery /> is updated to handle variables - which would then solve this and I can package up a solution.

Related issues that discuss adding variable support to <StaticQuery />/useStaticQuery:
gatsbyjs/gatsby#10482
gatsbyjs/gatsby#9047

from gatsby-plugin-intl.

Agreed, I source my translations from Airtable so I can't use this i18n plugin.

from gatsby-plugin-intl.

Hey @jasonmit do you have an example of passing pageContext.intl.lang to a page query?

I am using WordPress and Polylang and the query looks something like this:

export const query = graphql`
  query($lang: WP_LanguageCodeEnum = EN) {
    wp {
      page(id: "5", idType: DATABASE_ID) {
        translation(language: $lang) {
          homeBeta {
            introHeader
          }
        }
      }
    }
  }
`

I would like it so that when a user clicks to "changeLocale" it updates that variable from EN to DE etc.

I'm new to this, so have just been experimenting... I'm not sure if $lang: WP_LanguageCodeEnum = EN is the right way of going about this.

I guess another way to do this might be to not have any translations on WordPress and do the translations purely via the JSON files?

Use something like:

<FormattedMessage
            id="home.header"
            defaultMessage={data.wp.page.translation.homeBeta.introHeader}
            description="header on home page"
          />

If this was a better way to go, do you know if you can integrate something like babel-plugin-react-intl to extract the messages? Would this automatically fill the "header": "" with the data from the query?

Happy to learn, if you could point me In the right direction, I'd appreciate it :) thx

from gatsby-plugin-intl.