Master locale not queried by default

[happyatwork (Info Happy)]

Hello!

I'm building a multi language website with Prismic and Gatsby. I'm having trouble with fetching the data in my default language when first loading the page. I get one of the alternative locales, and not always the same. Sometimes I suspect it changes when I have published something.

Now I have a temporary solution by setting the language manually to my default "en-us", but I need to solve the problem.
You can see the behavior when you refresh the root at www.happyatwork.io, atm it fetches data in "sv-se"

This has been bothering me for quite some time now and I would really appreciate some help

my query:

export const query = graphql `
    query Index ($lang: String) {
        allPrismicLanding (filter: {lang: {eq: $lang}}) {
            edges {
                node {
                    type
                    lang
                    alternate_languages {
                        lang
                        type
                    }
                    data {
                        title {
                            html
                            text
                        }
                        description {
                            html
                            text
                        }

[Pau]

Hello, thanks for reaching out and for joining the community!
This is very odd because the API response always retrieves the master language and only brings the other ones if you specifically query your documents by language.

I can see that you're already doing that by using dynamic variables. It would be interesting to see how you're constructing the dynamic generation of your pages to check if the problem is coming from there.

We have a similar sample project where we do this kind o queries if you're interested in seeing how we do it.

Multi-language website example with Prismic (API-based CMS) & Gatsby.js

Basically, we use gatsby-node and the createPages function to generate pages with each template.

Is int he createPages method where we pass the page context that the dynamic queries use. And for the internal navigation, we use the link resolver..

[happyatwork (Info Happy)]

Thanks for your answer.

I'm using gatsby-node, createPages and a link resolver:

exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions

    const pages = await graphql(`{
        allPrismicLanding {
            nodes {
                url
                type
                lang
            }
        }
        allPrismicAbout {
            nodes {
                url
                type
                lang
            }
        }
        allPrismicPricing {
            nodes {
                url
                type
                lang
            }
        }
        allPrismicCustomers {
            nodes {
                url
                type
                lang
            }
        }
        allPrismicBlog {
            nodes {
                url
                type
                lang
            }
        }
        allPrismicBlogArticle {
            nodes {
                url
                uid
                type
                lang
            }
        }
        allPrismicContact {
            nodes {
                url
                type
                lang
            }
        }
        allPrismicTermsAndConditions {
            nodes {
                url
                type
                lang
            }
        }
        allPrismicGdprAndPdpa {
            nodes {
                url
                type
                lang
            }
        }
        allPrismicSla {
            nodes {
                url
                type
                lang
            }
        }
    }`)

    pages.data.allPrismicLanding.nodes.forEach((page) => {
        createPage({
            path: page.url,
            component: path.resolve(__dirname, './src/pages/index.js'),
            context: { ...page },
        })
    })
    pages.data.allPrismicAbout.nodes.forEach((page) => {
            createPage({
            path: page.url,
            component: path.resolve(__dirname, './src/pages/about.js'),
            context: { ...page },
        })
    })
    pages.data.allPrismicPricing.nodes.forEach((page) => {
            createPage({
            path: page.url,
            component: path.resolve(__dirname, './src/pages/pricing.js'),
            context: { ...page },
        })
    })
    pages.data.allPrismicCustomers.nodes.forEach((page) => {
            createPage({
            path: page.url,
            component: path.resolve(__dirname, './src/pages/customers.js'),
            context: { ...page },
        })
    })
    pages.data.allPrismicBlog.nodes.forEach((page) => {
            createPage({
            path: page.url,
            component: path.resolve(__dirname, './src/pages/blog.js'),
            context: { ...page },
        })
    })
    pages.data.allPrismicBlogArticle.nodes.forEach((page) => {
            createPage({
            path: page.url,
            component: path.resolve(__dirname, './src/templates/post.js'),
            context: { ...page },
        })
    })
    pages.data.allPrismicContact.nodes.forEach((page) => {
            createPage({
            path: page.url,
            component: path.resolve(__dirname, './src/pages/contact.js'),
            context: { ...page },
        })
    })
    pages.data.allPrismicTermsAndConditions.nodes.forEach((page) => {
            createPage({
            path: page.url,
            component: path.resolve(__dirname, './src/pages/terms.js'),
            context: { ...page },
        })
    })
    pages.data.allPrismicGdprAndPdpa.nodes.forEach((page) => {
            createPage({
            path: page.url,
            component: path.resolve(__dirname, './src/pages/pdpa.js'),
            context: { ...page },
        })
    })
    pages.data.allPrismicSla.nodes.forEach((page) => {
            createPage({
            path: page.url,
            component: path.resolve(__dirname, './src/pages/sla.js'),
            context: { ...page },
        })
    })
}

const { defaultLanguage } = require('../../prismic-config');

const linkResolver = (doc) => {
    if (doc.type === 'landing') {
        return doc.lang === defaultLanguage
            ? `/${defaultLanguage}/`
            : `/${doc.lang}/`;
    }

    if (doc.type === 'about') {
        return doc.lang === defaultLanguage
            ? `/${defaultLanguage}/about`
            : `/${doc.lang}/about`;
    }

    if (doc.type === 'customers') {
        return doc.lang === defaultLanguage
            ? `/${defaultLanguage}/customers`
            : `/${doc.lang}/customers`;
    }

    if (doc.type === 'pricing') {
        return doc.lang === defaultLanguage
            ? `/${defaultLanguage}/pricing`
            : `/${doc.lang}/pricing`;
    }

    if (doc.type === 'contact') {
        return doc.lang === defaultLanguage
            ? `/${defaultLanguage}/contact`
            : `/${doc.lang}/contact`;
    }

    if (doc.type === 'terms_and_conditions') {
        return doc.lang === defaultLanguage
            ? `/${defaultLanguage}/terms`
            : `/${doc.lang}/terms`;
    }

    if (doc.type === 'gdpr_and_pdpa') {
        return doc.lang === defaultLanguage
            ? `/${defaultLanguage}/pdpa`
            : `/${doc.lang}/pdpa`;
    }

    if (doc.type === 'sla') {
        return doc.lang === defaultLanguage
            ? `/${defaultLanguage}/sla`
            : `/${doc.lang}/sla`;
    }

    if (doc.type === 'blog') {
        return doc.lang === defaultLanguage
            ? `/${defaultLanguage}/blog`
            : `/${doc.lang}/blog`;
    }

    if (doc.type === "blog_article") {
        return doc.lang === defaultLanguage
            ? `/${defaultLanguage}/blog/`+ doc.uid
            : `/${doc.lang}/blog/`+ doc.uid;
    }
    
    return `/${defaultLanguage}`;
}

module.exports = linkResolver;

[happyatwork (Info Happy)]

Do you have any suggestions how to solve this? We are a growing company and this issue is creating problems on search engines, on online advertising and so on. We will unfortunately have to consider changing our CMS if this problem persists.

[Pau]

Hello, @happyatwork team.

I think this could happen because the createPages method is designed to create pages from components programmatically but in the /templates directory rather than the /pages one. This seems like a probable reason why this odd behaviour happens in the routes; as explained in the Gatsby docs, gatsby-node file may accidentally create multiple pages that are meant to be accessed by the same path. Which creates conflicting routes.

So, changing your pages to the templating folder may resolve the problem; everything else looks good.