gatsby-plugin-i18n 'Cannot query field "langKey" on type "fields".

trafficstars

Hi,

I'm trying to get gatsby-plugin-i18n to work with my blog. I keep getting this error when I run gatsby develop and I couldn't find the solution anywhere.

// my gatsby-config.js

const languages = require('./data/languages');

module.exports = {
    siteMetadata: {
        title: `My website`,
        googleVerification: `abcdefz`,
        disqus: `gatsby-typescript`,
        languages
    },
    mapping: {
        'MarkdownRemark.frontmatter.author': `AuthorJson`
    },
    plugins: [
        // Expose `/data` to graphQL layer
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `data`,
                path: `${__dirname}/data`
            }
        },

        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
                trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID',
                // Puts tracking script in the head instead of the body
                head: false,
                // Setting this parameter is optional
                anonymize: true,
                // Setting this parameter is also optional
                respectDNT: true
            }
        },

        // Parse all markdown files (each plugin add/parse some data into graphQL layer)
        {
            resolve: `gatsby-transformer-remark`,
            options: {
                plugins: [
                    `gatsby-plugin-sharp`,
                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            maxWidth: 690,
                            backgroundColor: `#f7f0eb`,
                            showCaptions: true
                        }
                    },
                    `gatsby-remark-prismjs`,
                    `gatsby-remark-copy-linked-files`,
                    `gatsby-remark-autolink-headers`
                ]
            }
        },

        {
            resolve: `gatsby-plugin-i18n`,
            options: {
                langKeyDefault: 'en',
                useLangKeyLayout: false,
                markdownRemark: {
                    postPage: 'src/templates/blog-post.tsx',
                    query: `
                      {
                          allMarkdownRemark {
                              edges {
                              node {
                                  fields {
                                  slug,
                                  langKey
                                  }
                              }
                              }
                          }
                      }
                      `
                }
            }
        },

        {
            resolve: 'gatsby-plugin-i18n-tags',
            options: { // Default options
                tagPage: 'src/templates/tags-page.tsx',
                tagsUrl: '/tags/',
                langKeyForNull: 'any'
            }
        },

        // Parse all images files
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,

        // Parse JSON files
        `gatsby-transformer-json`,

        // Add typescript stack into webpack
        `gatsby-plugin-typescript`,

        // This plugin takes your configuration and generates a
        // web manifest file so your website can be added to your
        // homescreen on Android.
        /* eslint-disable camelcase */
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `Gatsby website`,
                short_name: `Gatsby website`,
                start_url: `/`,
                background_color: `#f7f7f7`,
                theme_color: `#191919`,
                display: `minimal-ui`
            }
        },
        /* eslint-enable camelcase */

        // This plugin generates a service worker and AppShell
        // html file so the site works offline and is otherwise
        // resistant to bad networks. Works with almost any
        // site!
        `gatsby-plugin-offline`
    ]
};

Any help is appreciated. Let me know if you need to see anything else.

Sep 16 '18 19:09 nartc

Just meet the same error message.

Problem come from onCreateNode which reject my blog posts for not having 'isInPagesPaths' at true. By default, pagesPaths is ['/src/pages/'].

So I "fix" this with a correct configuration (my markdowns are in content/blog) :

    {
      resolve: 'gatsby-plugin-i18n',
      options: {
        langKeyDefault: 'en',
        useLangKeyLayout: false,
        pagesPaths: [`${__dirname}/content/blog`]
      }
    }

Feb 10 '19 09:02 Charlynux

Hello guys, I'm trying to implement yours package on my website and I'm followed the README documentation, I do that is there but I'm catching this error:

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "langKey" on type "MarkdownRemarkFields".

File: node_modules/gatsby-plugin-i18n/createPages.js:46:10

This is the source with error: https://github.com/davidcostadev/davidcosta.com.br/pull/2

Jul 22 '19 12:07 davidcostadev

Hum... I did what @Charlynux suggest and works. But I think that its need to be added on README too

Jul 22 '19 12:07 davidcostadev

Sorry for flood, but I'm getting this error now:

  Error: A plugin tried to update a node field that it doesn't own:
  Node id: 7fc40a6e-82c9-5435-a8d6-aa777602b901
  Plugin: default-site-plugin
  name: slug
  value: /hello-world/index.pt-br/

warn The plugin "gatsby-plugin-i18n" used a reserved field name in the context object when creating a page:

  * "path"

{
    "path": "/hello-world/",
    "component": "/Users/davidcosta/workplace/fun/davidcosta.com.br/src/templates/blog-post.js",
    "context": {
        "path": "/hello-world/",
        "slug": "/hello-world/",
        "langKey": "en"
    },
    "layout": "en"
}

Jul 22 '19 12:07 davidcostadev

I can't fix it with pagesPaths setting.. Anyone? My code is available here

I can't reach langKey setting. Mine md structure is a little bit different.

Thanks.