gridsome-plugin-i18n icon indicating copy to clipboard operation
gridsome-plugin-i18n copied to clipboard

with "rewriteDefaultLanguage" the gridsome pages not have locale for page-query

Open sebtiz13 opened this issue 5 years ago • 3 comments

Describe the bug All default page of gridsome (create by gridsome before the plugin) not receive context locale in route

To Reproduce Steps to reproduce the behavior:

  1. Go to '/'
  2. the page-query locale variables is empty

Expected behavior

For example in my index page I want make this query

query blogPosts($locale: String) {
  allBlogPost(filter: { lang: { eq: $locale } }) {
    edges {
      node {
        id
        title
      }
    }
  }
}

but with rewriteDefaultLanguage: false for the urls like / $locale is empty because gridsome create an managed page and it's exclude in plugin

https://github.com/daaru00/gridsome-plugin-i18n/blob/75bb0ffc91eb745fc931d6ce630e959f26a49751/gridsome.server.js#L122

I think I don't really understand why the managed pages are exclude.

Environment (please complete the following information):

  • OS: [e.g. Linux]
  • NodeJS Version [e.g. v12.16.3]
  • Gridsome Version Version [e.g. 0.7.19 ]
  • Browser [e.g. chrome, firefox, safari]
  • Plugin Version [e.g. 1.5.1]

Plugin configuration

{
  use: 'gridsome-plugin-i18n',
  options: {
    locales: [
      'fr',
      'en',
    ],
    fallbackLocale: 'en', // fallback language
    defaultLocale: 'fr', // default language
    rewriteDefaultLanguage: false,
  },
}

sebtiz13 avatar Jul 26 '20 16:07 sebtiz13

Hi @sebtiz13,

I think I don't really understand why the managed pages are exclude.

Seems not currently possible to edit managed pages. That check is preventing this issue: https://github.com/daaru00/gridsome-plugin-i18n/issues/11#issuecomment-631951421 where template pages stop working.

Still waiting for https://github.com/gridsome/gridsome/issues/1139 that will should add a more stable API to edit pages without the need to recreating it. Currently I have to specifically ignore that type of page in order to make the others work too.

It seems even the pageContext hook is correctly called, the one responsible for the default value of the context.

daaru00 avatar Jul 26 '20 19:07 daaru00

Hi @daaru00.

Ok so if i understand the condition to exclude it's for page generate by source plugin like source-filesystem works ?

Hum in fact i don't really understand what variable are used for graphql, but my filter works on urls "/fr/" and "/en/" but in "/" the query return all data without filtering.

In doubt I have try to remove condition options.internal.isManaged === false and it's work in my case.

sebtiz13 avatar Jul 26 '20 21:07 sebtiz13

For those who needs a workaround, you can use a default value for your $locale in the GraphQL query. Replace the <DEFAULT_VALUE> below with your default locale, like "en":

query($locale: String = "<DEFAULT_VALUE>") {
  notes: allNote(filter: { lang: { eq: $locale } })
  // ....

By the way, after triggering the hot reloading several times (for example, by saving a document in the text editor), the problem unexpectedly disappears and my filtering starts working as it should. If you're unable reproduce, I have a screen recording to show this. (I am using the source-filesystem plugin for my markdown posts and have an index page to filter my posts by the locale).

Last but not least, I can see the "locale" set correctly in the Vue tab all the time. But my graphql query doesn't seem get it correctly. I am new to Gridsome so I may be wrong at some points.

elmsec avatar Mar 23 '21 12:03 elmsec