Hello,
I want to use the i18n module in an inertia project with react but i can't find a way to use the t('messages.gretting') method in my tsx component…
Is it possible to use this method in inertia like in Edge template ? Or am i forced to pass all my translations as props to my page ?
Hey Thomas!
The i18n module looks tightly coupled to the AdonisJS server, so I don't think this is or will be possible as the server is only in the picture on the initial load and only when using SSR. If you're not using SSR, all rendering takes place in the browser.
There said, I'm not sure it'd be needed. I'll preface by saying I haven't worked with the i18n module yet, but I have worked with others in an API-based environment. I believe you could complete this with something similar to what I've done in the past:
On non Inertia requests (no X-Inertia header), share the current locale code and that locale's translations with your inertia application and store it on the client (in a composable or store)
I'd recommend only sharing on non Inertia requests so that you aren't sending it with all requests as these translation files can grow quickly.
When/if the user changes their locale, have this submit a form request using inertia to update the user's locale, and send back an updated locale code and that updated locale's translations to update within your client-side store.
Write your own little helper inside the composable/store that mimics the t method, accepting in the key of the string you're after, finding it from the stored translations, and returning it back.
Also note, you can reuse types from the i18n package to simplify things for any TypeScript support as well, just remember to use import type rather than just import.
Looks like there's also an issue on the AdonisJS Inertia repo asking for i18n support. Again, I don't see direct support being something that'll happen, but thought I'd share in case you'd like to follow along or consider any of the options discussed there.
Hope this helps!
Hey Tom,
Thanks for the answer !
I will try both methods, yours and the one in the github issue.
Hello Thomas
Have you had any methods that have worked for you and do you have an example of a realization?
Thanks in advance
Hello Silvus,
I cannot share my work because it's a project for my job, but here is my process:
I pass the i18n instance via Inertia's shared props.
In my controller, I call a service to retrieve the translation file I need, based on the file name.
I share the filtered translations with the page via Inertia.share().
In the frontend (React), I store the translations in a context and recreate a function that mimics the t method, as Tom advised.
It needs some optimization, but for now, it's working.
