[Bug]: vsf-locale cookie not updated soon enough

[lsliwaradioluz]

Describe the Bug

The internationalization does not work as expected in our both OS and enterprise demos.

Current behavior

The value of the current locale our Commercetools client is using in queries depends on the vsf-locale cookie. When we switch the locale and the page gets reloaded, i18n sets the cookie server-side by adding the set-cookie header to the response for the page (i.e. /p/product-id/product-slug) request. Unfortunately, the requests sent by our API to fetch the product data are sent before the response's headers are read and the vsf-locale cookie set. Therefore, the value of the locale does not change to the new one.

We can see that while we are re-creating our commercetools client before making the request for data, the main request for the page (where the set-cookie response header is set) remains "pending". The locale is still en instead of de. One possible solution for that is setting the locale cookie manually using the setLocaleCookie method provided by i18n.

Expected behavior

The value of the vsf-locale cookie should be changed before the server-side requests are sent.

Steps to reproduce

We can observe that on this PLP. Switch from en do de and you'll see the product names are still in English rather than German.

What version of Vue Storefront are you using?

2.4.5

What version of Node.js are you using?

14.15.1

What browser (and version) are you using?

Chrome

What operating system (and version) are you using?

Windows 10

Relevant log output

No response

Able to fix / change the documentation?

• [X] Yes
• [ ] No

Code of Conduct

• [X] I agree to follow this project's Code of Conduct