Provide better example using page queries

[daniloraisi]

Describe the bug Trying to use gridsome-plugin-i18n with page-query but I got an error

To Reproduce After configure gridsome-plugin-i18n create any page using page-query applying lang filter as shown on README.

query($locale:String) {
  careers: allCareer(lang: $locale, sortBy: "order", order: ASC) {
    edges {
      node {
        title
        content
        id
      }
    }
  }
}

Expected behavior Query execute without error

Environment (please complete the following information):

• OS: Ubuntu
• NodeJS Version [v12.16.3]
• Gridsome Version Version [0.7.14]
• Browser [chrome]
• Plugin Version [1.3.0]

Plugin configuration

{
  use: 'gridsome-plugin-i18n',
  options: {
    locales: ['en-us', 'pt-br'],
    pathAliases: {
      'en-us': 'en',
      'pt-br': 'pt'
    },
    fallbackLocale: 'pt',
    defaultLocale: 'pt',
    messages: {}
  }
}

[daaru00]

Hi @daniloraisi,

I think you missed to include the error that you are referring to. I've no enough information to help you..

[daniloraisi]

Hi @daniloraisi,

I think you missed to include the error that you are referring to. I've no enough information to help you..

@daaru00, My bad, I really forgot to include the error. I'm facing this error when trying to query with $locale variable

{
  "error": {
    "errors": [
      {
        "message": "Unknown argument \"lang\" on field \"allCareer\" of type \"Query\".",
        "stringified": "Unknown argument \"lang\" on field \"allCareer\" of type \"Query\".\n\nGraphQL request:2:21\n1 | query ($locale: String) {\n2 |   career: allCareer(lang: $locale, sortBy: \"order\", order: ASC) {\n  |                     ^\n3 |     edges {"
      }
    ]
  }
}

[daniloraisi]

I solved my problem using another approach.

[rodrigomata]

@daniloraisi can you share how did you do it? I'm having the same error here Error: Variable "$locale" of type "String" used in position expecting type "StringQueryOperatorInput" if I try to use it like:

query($locale: String, $page: Int) {
  chapters: allChapter(filter: { lang: $locale }) {
  // ... rest of code
  }
}

[rodrigomata]

Well in case anyone sees this issue, I was unable to add the $locale on the page-query; however, I did add a computed property client side to filter what I needed depending on the language (not ideal though). Will add a respective bug so the team can properly keep track of this.

[daaru00]

Hi all

@daniloraisi your error concerns the server, the error say that you cannot use "lang" parameters because does not exist. Try to replicate the same in query in playground, the correct parameter should auto-complete.

@rodrigomata your error is about the syntax, where you are passing lang: $locale seems a simple string (like "en") is not allowed. Please check into your endpoint documentation what's StringQueryOperatorInput type. If you execute the query allChapter(filter: { lang: "en" }) you should get the same error.

In general I don't think there can be an error different from "the local parameter cannot be undefined / null", this plugin just add a property into the context (automatically passed as query parameters), doesn't do any other manipulation of the query. The same thing as doing:

createPage({
  path: 'my-page',
  component: './src/templates/Page.vue',
  context: {
    locale: 'en'
  }
})

So it can only be there or not, other errors are not attributable to this plugin but to an incorrect use of grqphql.

Please try to replicate the exact same query, with parameters, in GraphQL's playground (http://localhost:8080/___explore), if it also raise an error maybe the problem is not the here.

[daniloraisi]

@daaru00 First, I appreciate the great job you did on this plugin. I'm using it because worth it!

I've tried on GraphQL's Playground too. Same error. There's no "lang" param on any query. As I said on my previous comment => #16 Comment already solved using another approach.

For better understand, what I said first is to provide a better example using page-query. On documentation we can find:

<page-query>
query($locale:String) {
  example {
    _allDocuments(lang:$locale) {
      edges {
        node {
          title
        }
      }
    }
  }
}
</page-query>

But:

1. What is example and where come from?
2. What is _allDocuments?

As you can see, I have no lang param on my query even on GraphQL's Playground

Is it necessary to change something on gridsome.server.js too?

I can use $locale on my page-query, it works as expected, but there's no lang on any query.

[daniloraisi]

@daniloraisi can you share how did you do it? I'm having the same error here Error: Variable "$locale" of type "String" used in position expecting type "StringQueryOperatorInput" if I try to use it like:

query($locale: String, $page: Int) {
  chapters: allChapter(filter: { lang: $locale }) {
  // ... rest of code
  }
}

@rodrigomata Here what I did:

First I created a separated page structure for each language:

Each page have a Front matter with locale and type

---
...
locale: en-US
type: staff
---

Then I use @gridsome/source-filesystem to load my pages, configuring gridsome-plugin-i18n too:

module.exports = {
  ...
  templates: {
    Translations: (node) => node.path
  },

  plugins: [
    {
      use: 'gridsome-plugin-typescript'
    },
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'pages/**/*.md',
        typeName: 'Translations'
      }
    },
    {
      use: 'gridsome-plugin-i18n',
      options: {
        locales: ['pt-BR', 'en-US'],
        pathAliases: {
          'pt-BR': 'br',
          'en-US': 'us'
        },
        fallbackLanguage: 'pt-BR',
        defaultLocale: 'pt-BR',
        messages: {} // Loading messages from main.ts
      }
    }
  ]
};

In main.ts I load my messages:

export default function (Vue: any, { router, appOptions, head }: any) {
  appOptions.i18n.setLocaleMessage('pt-BR', require('./locales/pt-BR.json'));
  appOptions.i18n.setLocaleMessage('en-US', require('./locales/en-US.json'));
  ...
}

Now, when I want to use i just need to create a page-query like this:

<page-query>
  query($locale: String) {
    staff: allTranslations(filter: { locale: { eq: $locale }, type: { eq: "staff" } }) {
      edges {
        node {
          title
          content
        }
      }
    }
  }
</page-query>

I think if you change your code to this should work:

query($locale: String, $page: Int) {
  chapters: allChapter(filter: { lang: { eq: $locale } }) {
  // ... rest of code
  }
}

[rodrigomata]

Hey @daniloraisi thanks for sharing. @daaru00 keep the awesome work and thanks for the explanation.

[daaru00]

Hi all,

can I consider this issue closed? have you solved your doubts?

@daniloraisi can I link your solution into README as use case with @gridsome/source-filesystem?

[daniloraisi]

Hi all,

can I consider this issue closed? have you solved your doubts?

@daniloraisi can I link your solution into README as use case with @gridsome/source-filesystem?

Yes, you can close!

@daaru00 For sure, you can use my solution as use case, it's working perfectly on my end.