@visualcookie This plugin creates copy of each page with url prefixed by language code and each such page has corresponding react-intl context.

So if you creates two posts then you got two copies of each page:

1. /en/blog/10-tips-to-manage-your-finances (maybe you want this one, with correct react-intl context and content)
2. /de/blog/10-tips-to-manage-your-finances
3. /en/blog/10-tipps-wie-sie-ihre-finanzen-verwalten
4. /de/blog/10-tipps-wie-sie-ihre-finanzen-verwalten (and this one)

I hope, I didn't confuse anything 🧐

Well, the thing is, the CMS I'm using already has a translation interface (see in JSON response above) and I don't want people to access a German article by just using the German slug with the locale set to en.

So basically /en/blog/10-tipps-wie-sie-ihre-finanzen-verwalten should not work (maybe redirect to /de/blog/10-tipps-wie-sie-ihre-finanzen-verwalten automatically).

@visualcookie You need to delete unwanted pages. For example your can do it in this way:

1. Create global Map() to store blog post paths.
2. Before page creation, add page path (prefixed by lang code) to map.
3. In onCreatePage delete page if it belong to blog but path not exist in previously created map.

Hope this helps :)

@visualcookie You need to delete unwanted pages. For example your can do it in this way:

1. Create global `Map()` to store blog post paths.
2. Before page creation, add page path (prefixed by lang code) to map.
3. In `onCreatePage` delete page if it belong to blog but path not exist in previously created map.

Hope this helps :)

Not sure if I can follow you right there. So basically what you are referring to, is to execute the GraphQL query outside of exports.createPages to Map() these paths and then in exports.createPages create these pages, whereas having also an exports.onCreatePage which filters for the correct paths?

But will /de/SLUG-FOR-GERMAN-POST and /en/SLUG-FOR-ENGLISH-POST work? And how will I filter for the language correctly?

@visualcookie Something like this but you may store in a Map only page paths, not a whole GraphQL query.
With your code above I would do it like this:

// 1. Global scope
const blogPages = new Map()
// ...

//2. Before your createPage call
blogPages.set(`/${a.language}/blog/${a.slug}`, {})
createPage({
  //...
  context: {
    type: 'blog',
  }
})
//..

//3. Filter unneccesary  pages.
// The point is that you want to keep only pages you store in a Map
// and delete pages that gatsby-plugin-intl creates for your in addition.
exports.onCreatePage = async ({ page, actions }) => {
  const isBlogPage = page.context.type === 'blog'
  const hasInvalidBlogPath = !blogPages.has(page.path)

  //If page is a blog page but has the wrong path
  if(isBlogPage && hasUnvalidBlogPath) {
    deletePage(page)
  }
}

@angrypie Set this up now and it works. Amazing.

Hi,

I've tried this but I am facing one issue that the hook is injecting defaultLang to all pages.

e.g. I am creating /de/test1 and /en/test2 for the same content in different locales:
URLs to remove /de/de/test1, /en/de/test1, /de/en/test2 and /en/en/test2 which are created by the hook and injecting the proper locale context to them.

But my manually created routes to not have any locale information so that they default to the defaultLanguage.

I can't see any solution around this.
In my opinion it would be nice if the plugin would respect a pages context locale and add additional intl information in relation to that.
Sadly I am not a JS/NPM pro to enhance the plugin by myself.

Would be nice if you've any workaround or hint what I am missing or doing wrong :D

Cheers,
Chris

So I've been wondering about this and after reading through a bit of Gatsby's node APIs here's my solution (in case it would be of help to anyone):

There are two APIs I will be showing here that are going to make this possible - createPages and onCreatePage.

The first part is in the createPages API. Here, we have to inject a context to the page representing the language of the slug in question. For instance,

exports.createPages = async ({ graphql, actions }) => {
   // ...
   // Logic to create pages 
   createPage ({
     path: // your path
     component: // your template component
     context: {
        slug: // your slug
        langKey: 'en' // replace 'en' with whatever language your slug is supposed to represent  
     }
   })
   // ...
}

Now, as for the second part, it's comparable to the process of post-processing. We deal with the pages we created by checking if they are valid (based on their page) or not. If they aren't valid, we just delete them.

exports.onCreatePage = ({ page, actions }) => {
    const { deletePage } = actions;

    // for deleting programatically created pages
    // that have a langKey context not matching the path
    if (
        page.context.langKey &&
        // the function below, shouldPageBeDeleted, should be implemented on your own with whatever logic you want to use
        // for instance you may split the pagePath into parts and check if the first part is a language (locale) not matching your               
        // langKey - if that's the case you can return true
        shouldPageBeDeleted({
            pagePath: page.path,
            actualLanguage: page.context.langKey,
        })
    ) {
        console.log('deleting', page.path);
        deletePage(page);
    }
};

Good luck with your site.