Multilangual Gatsby

Hi! I am having a hard time configuring my multilingual webstore. I followed the latest example, but when going to /en-us/document I am getting a 404 message.

When making a query, I do get returned null btw.. I have some of my examples below. I did setup a fast language switcher, but I assume I should be able to get the pages as well when just typing the locale in my webbrowser

query MyQuery {
  prismicPage(lang: {eq: "en-us"}) {
    lang
    alternate_languages {
      id
      type
      lang
    }
    data {
      gatsby_slug
    }
    url
  }
}

en-us is not my main locale, is this the reason why I got returned null?

gatsby-node:

    result.data.contentPages.edges.forEach(({ node }) => {
      console.log("starting content pages", node.uid)
      console.log(node)
      createPage({
        path: node.url,
        component: path.resolve(`./src/templates/Page/index.jsx`),
        context: {
          id: node.id,
          uid: node.uid,
          lang: node.lang,
        },
      })
    })

Page Template:

export const query = graphql`
  query PageQuery($id: String, $lang: String) {
    prismicPage(id: { eq: $id }, lang: { eq: $lang }) {
      url
      uid
      type
      id
      lang
      alternate_languages {
        id
        type
        uid
        lang
      }
      data {
        pagecontenthero {
          gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
          alt
        }
        type_of_page
        gatsby_slug
        meta_description {
          text
        }
        meta_title {
          text
        }
        title {
          text
        }
        introduction {
          text
        }
        body {
          ... on PrismicSliceType {
            slice_type
          }
          ...PrismicPageBodyPageContentFragment
          ...PrismicPageBodyPageFaqFragment
          ...PrismicPageBodySingleImageFragment
          ...PrismicPageBodyAlternateGridFragment
        }
      }
    }
  }
`

Hello @dfmkraaijeveld, thanks for reaching out.

The data in the gatsby-node file seems like it's missing to access the prismicPage query. Where does the contentPages field come from?

Could you share with us your gatsby-config.js file and your Link Resolver? This is where the URLs of your site are build

This is my query inside gatsby-node

    contentPages: allPrismicPage {
        edges {
          node {
            lang
            alternate_languages {
              uid
              lang
              id
              type
            }
            uid
            type
            dataRaw
            last_publication_date(locale: "nl")
            data {
              type_of_page
              title {
                text
              }
              introduction {
                richText
              }
            }
          }
        }
      }

When I use this query, this is the response I am getting from Graphql:

Is it expected that I am only getting lang: "nl-nl", even when I am having some test pages copied to the en-us locale on Prismic?

gatsby-config:

    {
      resolve: "gatsby-source-prismic",
      options: {
        repositoryName: process.env.PRISMIC_REPO,
        accessToken: process.env.PRISMIC_TOKEN,
        linkResolver: require("./src/utils/linkResolver").linkResolver,
        htmlSerializer: (type, element, content, children) => {
          // HTML Serializer
        },
        schemas: {
          // Your custom types mapped to schemas
          navigation: require("./custom_types/navigation.json"),
          product_description: require("./custom_types/product_description.json"),
          blog_post: require("./custom_types/blog.json"),
          author: require("./custom_types/author.json"),
          homepage: require("./custom_types/homepage.json"),
          page: require("./custom_types/page.json"),
          footer: require("./custom_types/footer.json"),
          category: require("./custom_types/category.json"),
          layout: require("./custom_types/layout.json"),
          megamenu: require("./custom_types/megamenu.json"),
          main_navigation: require("./custom_types/main_navigation.json"),
        },
        shouldDownloadFiles: {
          "homepage.data.body.text_section.primary.image_one": true,
        },

        imageImgixParams: {
          auto: "compress,format",
          fit: "max",
          q: 50,
        },
        imagePlaceholderImgixParams: {
          w: 100,
          blur: 15,
          q: 50,
        },
      },
    },

linkResolver:

const { defaultLanguage } = require("../../prismic-configuration")

exports.linkResolver = (doc) => {
  switch (doc.type) {
    case "homepage": {
      return doc.lang === defaultLanguage ? "/" : `/${doc.lang}`
    }

    case "page": {
      return doc.lang === defaultLanguage
        ? `/${doc.uid}`
        : `/${doc.lang}/${doc.uid}`
    }

    default:
      return "/"
  }
}

I had a similar problem (I started from the demo app and set all the custom types up based on the json files). But I still only got my main locale to work.
I found that adding lang: "*" to your gatsby-config.js file seems to do the trick.

    {
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: prismicConfig.prismicRepo,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        linkResolver: require('./src/utils/linkResolver').linkResolver,
        schemas: {
          homepage: require('./custom_types/homepage.json'),
          page: require('./custom_types/page.json'),
          top_menu: require('./custom_types/top_menu.json'),
        },
        lang: '*'
      },
    },

Hmm, I will test it out right now. Funny fact is, is that my config always had this key inside my Prismic options, but I removed it right before I started to add multilingual functionality :slight_smile:

The strange thing is that the documentation mentions that * should be the default for that. But since we have to specify it specifically I guess that isn't the case.

options.lang (string)
Set a default language when fetching documents. The default value is '*', which will fetch all languages. Read Multilingual content.

Yes, it is working now! I am getting all the data :slight_smile:

Now figuring out how to deal with this in combination with react-i18next. Thanks!

Hey @dfmkraaijeveld and @filip.vantendeloo, thanks for uncovering this issue.

I just published a new version of gatsby-source-prismic that restores the default lang: '*' option. This was a regression published in the transition from V4 to V5.

The latest versions as of this post:

  • gatsby-source-prismic: v5.0.4
  • gatsby-plugin-prismic-previews: v5.0.3

Could you give these a try and let me know if it fixes the issue? You should not need to add lang: '*' to gatsby-config.js if you want to download all languages.

Thanks!

1 Like

I just tried installing the plugin in a fresh Gatsby install and I get the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: gatsby-plugin-image@2.1.0
npm ERR! node_modules/gatsby-plugin-image
npm ERR!   gatsby-plugin-image@"^2.1.0" from the root project
npm ERR!   peer gatsby-plugin-image@"^1.3.0-next.1 || ^2.0.0-next.0" from gatsby-source-prismic@5.0.4
npm ERR!   node_modules/gatsby-source-prismic
npm ERR!     gatsby-source-prismic@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby-plugin-image@"^1" from @imgix/gatsby@1.7.0
npm ERR! node_modules/gatsby-source-prismic/node_modules/@imgix/gatsby
npm ERR!   @imgix/gatsby@"^1.6.13" from gatsby-source-prismic@5.0.4
npm ERR!   node_modules/gatsby-source-prismic
npm ERR!     gatsby-source-prismic@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

So I haven't been able to test this yet.

Verified that with v5.0.4 I don't have to include the lang: '*' property to get all the languages.

Thank you for the fix.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.