# Previewing unpublished documents doesn't work with modified lang code

**URL:** <https://community.prismic.io/t/previewing-unpublished-documents-doesnt-work-with-modified-lang-code/1657>\
**Category:** Developing with Prismic\
**Tags:** gatsby\
**Created:** [August 25, 2020, 6:04pm UTC](https://community.prismic.io/t/previewing-unpublished-documents-doesnt-work-with-modified-lang-code/1657 "2020-08-25T18:04:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sean](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/sean/32/464_2.png) [@sean](https://community.prismic.io/u/sean)\
**Post date:** [August 25, 2020, 6:04pm UTC](https://community.prismic.io/t/previewing-unpublished-documents-doesnt-work-with-modified-lang-code/1657/1 "2020-08-25T18:04:36Z")

</div>

_(I get the following issue with both `gatsby-source-prismic-graphql` as well as `@prismicio/gatsby-source-prismic-graphql`)_

I have a multi-locale site and have had to convert the `lang`/locale code in URLs to country codes _(actually a mix of country codes and lang codes, but for simplicity's sake and in my example project it's just country codes)_, so instead of `/en-gb/my-page` or `/en/my-page`, it would be `/gb/my-page`. It's not possible to achieve this with the plugin as it is, so I've had to hook into Gatsby's `onCreatePage` API and modify the path with a helper function like so:

```nohighlight
exports.localeToCountryCode = localeCode => localeCode.split("-")[1].toLowerCase()

```

_(this ☝ is also used in the `linkResolver`)_

Everything seems to work locally, in production and also when previewing published documents, but for some reason this seems to interfere with trying to preview unpublished documents.

My page query looks like this:

```nohighlight
query($lang: String!, $uid: String!) {
  prismic {
    allPosts(lang: $lang, uid: $uid) {
...

```

It seems as though the `lang` variable isn't getting passed to the page query, since `props.data.prismic.allPosts.edges` is returning an empty array:

![image](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/1X/e95a61d5e7f2354f7078c3044f19690c18c27123.png)

If I remove the `lang` filter from the query, I then get data returned and am able to preview unpublished documents. It also seems to work (even _with_ the `lang` filter) if I don't convert the locale codes to country codes.

When clicking on the preview button, I am taken to [http://localhost:8000/preview/post?lang=de&uid=mein-erster-beitrag](http://localhost:8000/preview/post?lang=de&uid=mein-erster-beitrag), which I think is correct, as I believe this is the default preview path, plus the params with the correct locale and uid/slug as I've defined it in Prismic.

I've set up previews and configured my pages with the `type`, `match` and `component` properties:

```nohighlight
{
  type: "Post",
  match: "/:lang/posts/:uid",
  component: require.resolve("./src/templates/post.js"),
}

```

You can find a reproducible test case here: [GitHub - mrseanbaines/prismic-previews-multi-locale](https://github.com/mrseanbaines/prismic-previews-multi-locale).

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [August 26, 2020, 3:10am UTC](https://community.prismic.io/t/previewing-unpublished-documents-doesnt-work-with-modified-lang-code/1657/2 "2020-08-26T03:10:35Z")

</div>

Hey Sean!

Previews and Gatsby plugins are currently having a difficult time, as we’ve mentioned in this article: [Gatsby-Prismic plugins: what’s going on?](https://prismic.io/blog/gatsby-prismic-plugins). Many issues related to these plugins and the Preview feature will be difficult to solve at the moment. Please read: [Using Prismic Previews with React](https://prismic.io/docs/gatsby/getting-started/prismic-gatsby#2_5-using-prismic-previews-with-react)

With drafts and published documents, the preview uses a URL that doesn’t require the full language code in it. For unpublished documents, the query value of the complete lang is required. You can verify it by removing the localeToCountryCode function from all links in your code, the preview works without problems.

The only quick fix I could find if you wanna continue having the lang set-up that you did with `localeToCountryCode`. is to manually add the missing lang value in the URL when doing a preview session.

So, for example, if you create a new doc in of the type Post, in the German locale, with the UID of “neuer”, and try to preview it you’ll get this route:

[http://localhost:8000/preview/post?lang=de&uid=neuer](http://localhost:8000/preview/post?lang=de&uid=neuer)

To fix it, just complete the lang code in the URL like so:

[http://localhost:8000/preview/post?lang=de-de&uid=neuer](http://localhost:8000/preview/post?lang=de-de&uid=neuer)

---

<div class="post-metadata">

**Author:** ![sean](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/sean/32/464_2.png) [@sean](https://community.prismic.io/u/sean)\
**Post date:** [August 26, 2020, 8:31am UTC](https://community.prismic.io/t/previewing-unpublished-documents-doesnt-work-with-modified-lang-code/1657/3 "2020-08-26T08:31:10Z")

</div>

Thanks for the reply @Pau.

Unfortunately I don’t think the content team would be very happy with having to modify the URL params, and we need to keep the country codes. I’m not too opposed to refactoring though to achieve the same thing if you know of a better way to do this that doesn’t interfere with the previews?

Not sure if you saw in my example project, but it seems to work if I just don’t convert the locale in the link resolver file, so I think I can check for the existence of `last_publication_date` and if that doesn’t exist then I guess we know we’re dealing with an unpublished preview, so don’t convert the locale in that case:

```auto
const { localeToCountryCode } = require("./localeToCountryCode")

exports.linkResolver = doc => {
  // This seems to work but I don't know why... 🤔
  const localize = path =>
  `/${!doc.last_publication_date ? doc.lang : localeToCountryCode(doc.lang)}${
    path === "/" ? "" : path
  }`

  // const localize = path =>
  // `/${localeToCountryCode(doc.lang)}${path === "/" ? "" : path}`

  switch (doc.type) {
    case "page_2": {
      return localize(`/page-2`)
    }

    case "post": {
      return localize(`/posts/${doc.uid}`)
    }

    default: {
      return localize(`/`)
    }
  }
}

```

…I’m not sure yet if this has any repercussions or not. Do you think this could break something else?

If using either this or the modifying URL params method to “solve” the issue, I ran into another problem, which is that I’m passing the locale as context which is used throughout the site for various things (e.g. localized links, SEO etc.), but I guess the preview script won’t be able to replace this value(?), so the only way I can think to get around it is to check the URL when the page loads to see if it’s a preview page and includes the `lang` param, and if so then pass that value to the context provider, but if not then use the one coming from the page context set at build time (as I normally would) - this also feels pretty hacky and not sure if I’ll run into issues with this approach. Do you have any thoughts/ideas on this?

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [August 26, 2020, 5:52pm UTC](https://community.prismic.io/t/previewing-unpublished-documents-doesnt-work-with-modified-lang-code/1657/4 "2020-08-26T17:52:46Z")

</div>

Hey Sean!

What you did in the link Resolver does the trick in the same way as manually correcting the URL and as you say, it breaks all the other routes while on Preview, like the homepage.

I would try what you’re suggesting, seems like a workaround and a good solution since the plugin doesn’t offer any other option to shorten the lang codes.  
langs other than the default shortenUrlLangs,

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [September 24, 2020, 1:55am UTC](https://community.prismic.io/t/previewing-unpublished-documents-doesnt-work-with-modified-lang-code/1657/5 "2020-09-24T01:55:52Z")

</div>

This issue has been closed due to inactivity.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 5:39pm UTC](https://community.prismic.io/t/previewing-unpublished-documents-doesnt-work-with-modified-lang-code/1657/6 "2021-12-09T17:39:53Z")

</div>