⚠️ Sometimes, it happens that graphQL don't find your intl data located in intl , run the command gatsby clean to remove the cache 🙂
Prer...
For further actions, you may consider blocking this person and/or reporting abuse
I originally left a comment here regarding translated slugs, but removed it in lieu of finding somewhat of a working solution. I thought I'd follow up on this in case anyone is stuck or possibly has a better one.
The Problem
In this context, the slug is assumed to be the same for each locale. For example:
But, what if you want the slugs themselves to be translations of each other?
You can set this field up for localization in Contentful, but the issue I found with this is that it will generate each page in each language under every locale:
Meaning, if I were to visit
/fr/english-page/
I'd be seeing English content, which is not ideal. Naturally, if they share the same slug this wont happen, but what we actually want here is:The Solution
The basic gist of the solution to this for me was to be able to determine that the page being created was of a specific language. First thing was to pass in the
node_locale
of the page to the context:Now in
onCreatePage
we know the locale. In addition to this,page.context.intl
can provide us the language, meaning if we compare these two as follows we will be able to determine if the locale and language of the page match:This will filter out the pages for each locale, but there's still an issue with this. It also filters out
/
,/dev-404-page/
etc. Quick and dirty solution for this problem:Conclusion
This is what worked for me given a time constraint as it was a requirement to have translated slugs for the project, though the implementation is imperfect since in the case the slug is the same, it wont create a page for that locale. Good example of this would be if you had multiple English locales, meaning the slug actually wouldn't be different. Wondering if there's a better way to handle this?
Thank you for this man. I was struggling a lot with this. I upgraded it a bit since I'm using the category pages too.
I had to add locale and type to post and category context
and category respectively
Hi Seán, thanks a lot for your workaround!
Did you come across a solution for the case slug are actualle equal on purpose or because even translated they give the same (e.g. France is France in English and in French, Portugal as well).
That would be awesome!
If I fetch the locale data from contentful, do I need to create the src/intl/fr.json and src/intl/en.json?
It depends on what you want to achieve.
You can deal with static files for the content that will never change.
I'm using
gatsby-plugin-intl
aswell. How do you go about mapping through an array that is translated?Example:
Component where I want to map:
Hi!
I have created the same kind of data in my
intl
file :If I try to
console.log(intl.messages)
in one of my components I can see thatreact-intl
not return an array of string but it creates multiple keys based on the number of items in the array :So, you can create an array based on the object keys :
It returns :
Now you can loop through this array and display all your data 🙂
Or.. if you know the number of items in your list (not recommended but faster) :
Thank you for the answer! I ended up doing something similar: spectrum.chat/gatsby-js/general/us...
Thanks for this post, very nice and not a lot explained on the web!
Concerning the warning in the intro, do you know what
gatsby clean
command exactly do? I've already meet this issue with Contentful multilanguage.Thanks a lot!
gatsby clean
is a command line dedicated to remove./cache
folder and wipe out your./public
folder.You can find more informations about this command on the official Gatsby documentation 🙂
gatsbyjs.org/docs/gatsby-cli/#clean
gatsbyjs.org/docs/debugging-cache-...
Hi, thanks for the post! I did something similar and tried with the same language component but I noticed that if add for instance /fr in the address on the browser and then click english, it doesn't work and I see (locally) GET localhost:9000/page-data/en/fr/pag... 404, like gatsby tries to fetch data for en/fr because it preprends en but doesn't remove fr. But if I go to localhost:9000/ then it works fine.
This behavior happens in a prod conf with gatsby build and serve, but works fine with gatsby develop. Have you encountered that too?
Thank you for this post - it is very helpful. I am working on my project and e.g. I have en and ar and en is the default language. If I call changeLocale('en') on /en/about I'd like to go to /about not /en/about. Is that possible?
Thank you! Your tutorial helped me A LOT! I think that this actually is the easiest way to do i18n in a Gatsby project I've found so far. I've successfully used it in two of my projects so far.
Thank you! Good to hear!
I gonna make post about the same subject in the following weeks with an improved method. Stay tuned! 😉
One question why do we need en.json or fr.json files in intl folder ?
As our data is coming from contentful
@louisbertin