Gatsby: Client only routes with locale in route

[sarahannnicholson]

Summary

Is there a way to have the gatsby-plugin-create-client-paths plugin match the end of the url?

I have this situation where hitting this url works:
https://localhost:8000/my-client-only-route

and hitting this url doesnt
https://localhost:8000/en-us/my-client-only-route

I feel like it has to do with the gatsby-config.js

{
            resolve: `gatsby-plugin-create-client-paths`,
            options: { prefixes: [ `/my-client-only-route/*] }
},

I would like it to match like this:

{
            resolve: `gatsby-plugin-create-client-paths`,
            options: { prefixes: [ `*/my-client-only-route/*] }
},

or even

{
            resolve: `gatsby-plugin-create-client-paths`,
            options: { prefixes: [ `:locale/my-client-only-route/*] }
},

Relevant information

A little more context. My localized pages are made in gatsby-node.js by querying wordpress with the WPML plugin to get all localized pages. Then for each locale, and each page we run createPage() and pass the locale into the page context

createPage({
    path: isWPHomePage(edge.node.link) ? `/${locale}` : `${locale}/${edge.node.slug}`,
    component: slash(pageTemplate),
    context: {
        title: edge.node.title,
        content: edge.node.content,
        language: getLanguageForLocale(language.node.language_code),
        locale: locale,
        isImplicit: false
    }
})

in /src/templates/page.js
we use the locale to run some queries to get localized menus, footers etc.. from wordpress.

All of our localized pages exist within the application, I even created a wrapper for getaby's link component that preserves the locale between pages.

Environment (if relevant)

I am using WSL in Windows
gatsby info --clipboard output:
System:
OS: Linux 4.4 Ubuntu 16.04.4 LTS (Xenial Xerus)
CPU: x64 ----------------------------------
Shell: 4.3.48 - /bin/bash
Binaries:
Node: 6.9.0 - /usr/local/bin/node
Yarn: 1.15.2 - /usr/bin/yarn
npm: 6.10.0 - /usr/local/bin/npm
Browsers:
Chrome: 75.0.3770.100
npmPackages:
gatsby: ^2.13.4 => 2.13.4
gatsby-cli: ^2.7.8 => 2.7.9
gatsby-image: ^2.2.4 => 2.2.4
gatsby-plugin-create-client-paths: ^2.1.1 => 2.1.1
gatsby-plugin-manifest: ^2.2.1 => 2.2.1
gatsby-plugin-material-ui: ^2.1.4 => 2.1.4
gatsby-plugin-offline: ^2.2.1 => 2.2.1
gatsby-plugin-postcss: ^2.1.0 => 2.1.0
gatsby-plugin-react-helmet: ^3.1.0 => 3.1.0
gatsby-plugin-react-svg: ^2.1.1 => 2.1.1
gatsby-plugin-sass: ^2.1.0 => 2.1.0
gatsby-plugin-sharp: ^2.2.2 => 2.2.2
gatsby-source-filesystem: ^2.1.2 => 2.1.2
gatsby-source-wordpress: ^3.1.4 => 3.1.4
gatsby-transformer-sharp: ^2.2.1 => 2.2.1
npmGlobalPackages:
gatsby-dev-cli: 2.4.12

File contents (if changed)

gatsby-config.js N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[pieh]

gatsby-plugin-create-client-paths plugin is pretty picky and seems to only support cases of trailing /*:
https://github.com/gatsbyjs/gatsby/blob/a3288b8efe961df2fb357793017a36b608b39549/packages/gatsby-plugin-create-client-paths/src/gatsby-node.js#L22-L24

So there are possibilities to improve the plugin to support cases like that, but to unblock your use case, you could skip using that plugin and manually create client only paths:

exports.onCreatePage = async ({ page, actions }) => {
  // in your gatsby-node.js
  // decorate "/my-client-only-route/" page with client-only path pattern
  if (page.path.match(/^\/my-client-only-route/)) {
    // set client-only path pattern
    page.matchPath = "/:locale/my-client-only-route/*"

    // Update the page.
    createPage(page)
  }
}