Making this work with Contentful

[mccrodp]

@mccrodp commented on Tue Feb 06 2018

Hey, firstly, many thanks for this repo, so helpful (using this to migrate a personal project from Elm). Have it almost working, just some misunderstanding of the way the layouts are working.

I guess this works on something to do with: useLangKeyLayout: true in the gatsby.config.js file, right? Then you have your en.js layout, etc.

I've followed the Contentful example here: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-contentful/src/layouts/index.js

I have tried to integrate the 2 concepts, but due the the way the layouts are perhaps, I get the below error:

[React Intl] Missing message: "selectLanguage" for locale: "en"
[React Intl] Cannot format message: "selectLanguage", using message id as fallback.

My add-menu branch here shows how this is setups (simple enough at the moment). https://github.com/ahimsayoga/ahimsayogajp/blob/add-menu/src/layouts/index.js

The only real difference is the content is dynamic from Contentful and it uses
gatsby.node.js to import content: https://github.com/ahimsayoga/ahimsayogajp/blob/add-menu/gatsby-node.js#L12
It points to a template general.js: https://github.com/ahimsayoga/ahimsayogajp/blob/add-menu/src/templates/general.js

I'm not exactly sure if I should be importing this intl functionality to the template, or if I need to wire up the layout files for this Contentful scenario, or both. New enough to practical application of React also, so my knowledge can be lacking a bit also. Cheers!

[mccrodp]

Giving this another short today, working in the opposite direction. Starting with the default repo and bringing in the Contentful w/ Gatsby requirements part by part, rather than bringing this repo for i18n into what I had. Will comment with findings.

[mccrodp]

Couldn't get it working, initially I was getting this TypeError #6, then I just made it more like my previous working Contentful example on master (by copying over the components) where it does pull in the contentful content, but gives me the error in this issue description. However, this time it seems it pulls in the Contentful data but I get a weird warning at build time about the GraphQL in my template/general.js file:

warning GraphQL query in component "/Users/paulmccrodden/dev/ahimsa-lang/src/templates/general.js" will not be run!
Queries are only executed for Page or Layout components. Instead of a query,
co-locate a GraphQL fragment and compose that fragment into the query (or other
fragment) of the top-level page or layout that renders this component. For more
info on fragments and composition see: http://graphql.org/learn/queries/#fragments

I don't get this in the master branch of my contentful working repo above, so not sure what's going on here on today's branch i18n-attempt. It seems to pull in the content from Contentful as I have access in GraphiQL, but the dynamic routes are not generated. I don't get the error in the UI quote in the issue, but I don't have my content either 😄

Any ideas? How do you debug the Gatsby build in general? I can't get a breakpoint to fire in VScode and console.log doesn't output anything. Cheers, any pointer in the right direction appreciated.

[mccrodp]

As I commented over in #16, I created a repo to try and simplify things for using-contentful and this plugin. Feel free to close this issue if the other one is better to be re-opened. mccrodp/gatsby-starter-contentful-i18n#1

[mccrodp]

Making progress here, I've added a simple working repo example for MarkdownRemark blog with i18n working, going by your docs and some hacking. https://github.com/mccrodp/gatsby-transformer-remark-i18n

Just need to modify this for working with Contentful now and get a basic example in the previous remove above.

[angeloocana]

Awesome!!! Congratulations! =D

[mccrodp]

Thanks @angeloocana, and cheers again for the awesome plugin. Will make sure to contribute back anything I figure out, but still early days for me here. My goal is to be able to have the default contentful example working with this i18n plugin as a starter repo available for people to use.

I have some concerns at the moment though, if you have any thoughts or pointers in the right direction there it'd be much appreciated. When looking at "How it works" section of the README we need .langKey.js or .langKey.md, but if it's content coming from a CMS, these prefixed files won't exist. Is there anyway I can hook into or override that part of the code in the plugin to set the lang specific slugs based on something other than file name prefix, or extract the language via GraphQL or something? (not 100% sure how to approach it atm) If not, a work around I thought of would be to pull in the content from the CMS to markdown files first, that the plugin then reads 😂but not sure if the order of things will allow this.

[mccrodp]

Some more thought on this and a follow up question:

What else does this module do, aside from parse the files to generate locale specific prefixed paths and provide language switch selector?

The way I see things at the moment, is the locale specific paths is the issue, but I can work around this by using the default createPage hook

    createPage({
        path: `/${edge.node.node_locale}/${edge.node.slug}`,
        ...
      })

So, in that case, I can work around this without needing this functionality from this i18n plugin, but then the language selector and being about to access the other language paths based on this, is super helpful.

1. Am I missing anything else in the module, some SEO related stuff or similar if only using Lang selector part?
2. If not and using lang selector only, can I turn off the path generation part of the plugin, or what do you suggest?

Thanks.

[mccrodp]

I believe we are in business, repo working with the Contenful example: https://github.com/mccrodp/gatsby-contentful-i18n

Can't get the lang selector message working at the moment though.

commons.js:77217 [React Intl] Missing message: "selectLanguage" for locale: "en-US"
commons.js:77217 [React Intl] Missing message: "selectLanguage" for locale: "de"
commons.js:77217 [React Intl] Missing message: "selectLanguage" for locale: "en"

Any ideas there, let me know. Thanks! 😄

[mccrodp]

Created an issue on that over here: formatjs/formatjs#204 (comment)

This seems to be working, but only for the homepage, it needs to find the locales on the other routes (product and category templates), that's my next task: https://github.com/mccrodp/gatsby-contentful-i18n