Sources / GraphQL

[coreyward]

This would be more useful if it was adapted to work with source plugins (e.g. gatsby-source-contentful) rather than relying on outdated, hardcoded translation files. It seems unrealistic that a majority of Gatsby websites would forgo GraphQL querying in order to support translations.

[jasonmit]

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: https://github.com/gatsbyjs/gatsby/issues/10482 https://github.com/gatsbyjs/gatsby/issues/9047

[benknight]

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

[mikexavier]

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