Skip to content

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

@noahtallen

Description

@noahtallen

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

  1. Clone https://github.com/noahtallen/astro-i18n-minimal-bug-report
  2. Run npm i && npm run dev
  3. Access http://localhost:4321/es
  4. You can see the locale is "en" and the page is not translated.
  5. 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

Metadata

Metadata

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions