Locale is not set when an internal API request happens during page render

noahtallen commented 10 months ago

Describe the bug Sometimes (leaving the question of whether this is a good idea to the side for now ;)), you may do an internal API request as part of rendering a page. In this scenario, astro-i18n shows the default locale, and translations do not work.

---
import { t, astroI18n } from 'astro-i18n';
const { data } = await fetch(Astro.url.origin + '/api/data').then((res) => res.json());
---
<html lang="en">
    <body>
        <h1>{t('title')}</h1>
        <p>Locale: {astroI18n.locale}</p>
        <p>API data: {data}</p>
    </body>
</html>

Node will issue an API request, which will ultimately come back to Astro, which the i18n middleware will handle, before the original request is finished.

I am curious what the core issue is here -- shouldn't the request to /api/data be isolated, meaning that the original request to http://localhost:4321/es still gets the correct locale?

To Reproduce

Clone https://github.com/noahtallen/astro-i18n-minimal-bug-report
Run npm i && npm run dev
Access http://localhost:4321/es
You can see the locale is "en" and the page is not translated.
Checkout commit c63fd1b to see the translations working.

Expected behavior Locale & translations should still work

Mandatory reproduction repository https://github.com/noahtallen/astro-i18n-minimal-bug-report

arastorhuiev commented 5 months ago

I have the same problem, but I noticed that it depends on the folder name, for example, if folder name is articles/manufacturer - I always secondary locale or empty string, if I rename folder to blogs/partner - problem solved.

arastorhuiev commented 5 months ago

Project structure, also maybe it's because the manufacturer/articles folder on top

Alexandre-Fernandez / astro-i18n

Locale is not set when an internal API request happens during page render #73