[gatsby-source-wordpress] switching languages using WPML

I’m in the process of converting a multi-language WordPress website using WPML to Gatsby.

Unfortunately I’m not quite sure how to get Gatsby to create pages for every post/page/custom post type in all defined languages automatically and how to set a connection between the languages (e.g. when I’m on a specific page and change the language, display that page in the selected language).

I already installed the WPML-REST-API WP-Plugin which lists the existing translations for each post including their ID but I’m just not sure how and if those IDs can be processed by Gatsby automatically.

Is it necessary to adjust the gatsby-source-wordpress plugin in order to achieve this and if yes, which part would I need to change? I’m thinking of extending the plugin using a config-flag like useWpmlRestApi or something like that.

I’m using react-i18next for translating non-WP content and switching languages if that helps.

[pieh]

I’m using Polylang but conceptually this aproach will work with any multi language plugin: in my project gatsby-node i build wordpress_id => path map before creating pages:

const buildLinkMap = ({ getNodes }) => {
  const linkMap = {};

  const typeMap = {
    wordpress__POST: 'post',
    wordpress__PAGE: 'page',
    wordpress__wp_portfolio: 'portfolio',
  };

  for (let node of getNodes()) {
    if (node.internal.type in typeMap) {
      linkMap[node.wordpress_id] = buildLink({
        lang: node.lang,
        slug: node.slug,
        type: typeMap[node.internal.type],
      });
    }
  }
  return linkMap;
};

buildLink is helper function that constructs path based on lang, slug and content type

and then in exports.createPages for each page I get translations, convert translated pages ids to paths and pass that in context and access that data in page component (this.props.pathContext.translations )

[mlvlester]

Hi @pieh, I’m trying to implement switching languages using Polylang but I can’t find documentation about it. Maybe you could share an example of how you implemented it? Thanks!