Localized site metadata

[sedubois]

Summary

I would like to populate my GraphQL API with localized site metadata, which would require the ability to pass a variable in the GraphQL query.

Basic example

// gatsby-config.js
const indexNames = { en: "my-algolia-index-en", fr: "my-algolia-index-fr" };

module.exports = {
  siteMetadata: {
    algoliaIndexName: // somehow pass indexNames so that we can then query by locale
  },
}

// in some React component
query($locale: String!) {
  site {
    siteMetadata {
      algoliaIndexName(locale: $locale)
    }
  }
}

or

// in some React component
query($locale: String!) {
  site {
    siteMetadata(locale: $locale) {
      algoliaIndexName
    }
  }
}

Motivation

The various examples using siteMetadata currently don't take localization into account, which makes its use problematic for multilingual webapps. Even the basic properties shown in the doc such as title, siteUrl and description can't be defined there currently as they are all language-dependent.

[NickyMeuleman]

Hi @sedubois 👋,
there is some information in #5069. There's an RFC about this at gatsbyjs/rfcs#3

[sedubois]

Thanks @NickyMeuleman. I haven’t understood how those build-time GraphQL templates would solve the issue. How would I build and query siteMetadata so that it works for all locales?

[sedubois]

@kakadiadarpan would you know if the way site metadata is built could be adapted to support GraphQL variables, and what would be the process to make it happen?

[pieh]

You would probably need some other place than gatsby-config for that. Like separate yaml, or json file with something setup like:

[
  {
    "lang": "en",
    "algioliaIndex": "my-algolia-index-en"
  }
]

and using transformer json transformer plugin then you could query that and filter based on "lang" field

[sedubois]

Thanks @pieh