Prismic returns different language first (not master locale)

[strakzat (Strakzat B.V.)]

Hey there!

We have multiple pages with two languages. We noticed that some pages we have setup in Gatsby default to an incorrect language (not the master locale). Also to confirm, querying the GraphQL endpoint results in some pages not having the master language being returned first.
We're using the gatsby-source-prismic plugin to retrieve Prismic data in our project.

Here's an example of our query and result:
Query:

query MyQuery {
  allPrismicServicespage {
    edges {
      node {
        lang
      }
    }
  }
  allPrismicHomepage {
    edges {
      node {
        lang
      }
    }
  }
}

Result:

{
  "data": {
    "allPrismicServicespage": {
      "edges": [
        {
          "node": {
            "lang": "de-de"
          }
        },
        {
          "node": {
            "lang": "en-gb"
          }
        }
      ]
    },
    "allPrismicHomepage": {
      "edges": [
        {
          "node": {
            "lang": "en-gb"
          }
        },
        {
          "node": {
            "lang": "de-de"
          }
        }
      ]
    }
  },
  "extensions": {}
}

Am I doing something wrong?

[Pau]

Hey @strakzat, welcome to the Community!

No, everything on your end is correct. I reproduced a sample query and yes, this is the current behavior of the schema. I'm not sure what takes priority to retrieve one lang before the other. I'll scale this question to the dev team and as soon as I have more information about this I'll let you know.

Thanks

[angeloashmore]

Hey @strakzat,

Just to be clear, the following comments are specifically for Gatsby's GraphQL API. Prismic's GraphQL API (i.e. the non-Gatsby API) is different.

gatsby-source-prismic doesn't have a method to order your documents by language in a specific order. If you need to sort your documents by language in a specific order, you could sort the documents in your application code since ideally you would have a consistent order throughout your app.

What I recommend instead is to filter your query by your master language and query the alternate_languages field instead. Where and how you filter your queries will depend on how you have your site setup.

query MyQuery {
  allPrismicPage(filter: {lang: {eq: "en-us"}}) {
    nodes {
      lang
      alternate_languages {
        document {
          ... on PrismicPage {
            url
            lang
          }
        }
      }
    }
  }
}

This query will return all en-us Page documents and list content from alternate languages if available. This type of query will be helpful if you need to list the languages for a particular document directly next to the content, like a language picker for a page.

When generating pages for each language in gatsby-node.js or using Gatsby's new File System API, you can leave off the filter parameter just like you have in the query you posted. The order in which these pages are created does not matter.

Lastly, if you need a list of all the available languages for a particular content type, you can use the following query:

query MyQuery {
  allPrismicPage {
    distinct(field: lang)
  }
}

This will return a list of all unique lang values for the type:

{
  "data": {
    "allPrismicPage": {
      "distinct": [
        "en-us",
        "fr-fr"
      ]
    }
  },
  "extensions": {}
}

Hope that helps!

[strakzat (Strakzat B.V.)]

Thanks a lot for your reply @angeloashmore!

With the info you've provided, I still can't find a solution for my particular problem.

I wanted to clear things up by stating the following:

• The queries I've posted above were used just to confirm that the order of which the pages are returned was not consistent.
• We're trying to setup multilinguality for our website, so each page is translated in Prismic from the master locale (en-gb) to a single two language (de-de) for now.
• We have our pages in /pages/<page>.tsx, following Gatsby's file system API, and that's where we noticed that some pages by default show in German instead of English.
• We're trying to have pages by default show the English version when the direct URL through Gatsby is requested. With gatsby-node.js we're creating new routes for the german version of the pages. Example:

domain.com/about => pages/about.tsx (en-gb)
domain.com/de/about => pages/about.tsx (de-de) # This is done through gatsby-node.js

This is where we stumbled upon the issue where some pages show the de-de version by default.

Is there anything else I'm supposed to do?

Thanks!

[angeloashmore]

You're welcome, @strakzat!

I think I see exactly what you mean now. Your default pages are sometimes created using the wrong language since the file system API doesn't allow you to filter or sort. The first node that gets returned by the API becomes your "root" page for the route.

In this case, using Gatsby's createPages API is going to be the best option for both your root pages and the language-specific routes. It will be much more deterministic and will allow you to pre-process/sort your data.

Doing it this way will allow you to take advantage of the alternate_languages query I posted above. With that, you can make a page via the createPage action for the root document, and then loop through each alternate_languages entry to make the language-specific pages.

In case you haven't already read through this document, check out this section from Gatsby's Docs: File System Route API > Component implementation

Taken from that page:

If you need to customize the query used for collecting the nodes (e.g. filtering out any product of type "Food" ), you should use the createPages API instead as File System Route API doesn’t support this at the moment.

Let me know if you have questions or need help setting up your gatsby-node.js file to do this.

[strakzat (Strakzat B.V.)]

I had tried that method with my components still listed under the /pages/. Resulting in errors like:

warn Non-deterministic routing danger: Attempting to create page: "/pagename", but page "/pagename/" already exists

After moving all my pages to a different folder, and specifying the component path like:

createPage({
  path: route,
  component: path.resolve(__dirname, `src/page-components/${ page.type }.tsx`),
  context: { ...page },
});

This seems to have done the trick!

[angeloashmore]

Great! Sorry, I should have mentioned that moving from the File System Route API to createPages in gatsby-node.js will require you to move your templates outside the pages directory.

I usually make a src/templates directory for these files, but page-components works, too.