4a0bc869dd
### What?
Fixed client config caching to properly update when switching languages
in the admin UI.
### Why?
Currently, switching languages doesn't fully update the UI because
client config stays cached with previous language translations.
### How?
Created a language-aware caching system that stores separate configs for
each language and only uses cached config when it matches the active
language.
Before:
```typescript
let cachedClientConfig: ClientConfig | null = global._payload_clientConfig
if (!cachedClientConfig) {
cachedClientConfig = global._payload_clientConfig = null
}
export const getClientConfig = cache(
(args: { config: SanitizedConfig; i18n: I18nClient; importMap: ImportMap }): ClientConfig => {
if (cachedClientConfig && !global._payload_doNotCacheClientConfig) {
return cachedClientConfig
}
// ... create new config ...
}
);
```
After:
```typescript
let cachedClientConfigs: Record<string, ClientConfig> = global._payload_localizedClientConfigs
if (!cachedClientConfigs) {
cachedClientConfigs = global._payload_localizedClientConfigs = {}
}
export const getClientConfig = cache(
(args: { config: SanitizedConfig; i18n: I18nClient; importMap: ImportMap }): ClientConfig => {
const { config, i18n, importMap } = args
const currentLocale = i18n.language
if (!global._payload_doNotCacheClientConfig && cachedClientConfigs[currentLocale]) {
return cachedClientConfigs[currentLocale]
}
// ... create new config with correct translations ...
}
);
```
Also added handling for cache clearing during HMR to ensure
compatibility with the existing system.
Fixes #11406
---------
Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import type { I18nClient, SupportedLanguages } from '@payloadcms/translations'
|
|
import type { ClientConfig, ImportMap, SanitizedConfig } from 'payload'
|
|
|
|
import { createClientConfig } from 'payload'
|
|
import { cache } from 'react'
|
|
|
|
let cachedClientConfigs = global._payload_clientConfigs as Record<
|
|
keyof SupportedLanguages,
|
|
ClientConfig
|
|
>
|
|
|
|
if (!cachedClientConfigs) {
|
|
cachedClientConfigs = global._payload_clientConfigs = {} as Record<
|
|
keyof SupportedLanguages,
|
|
ClientConfig
|
|
>
|
|
}
|
|
|
|
export const getClientConfig = cache(
|
|
(args: { config: SanitizedConfig; i18n: I18nClient; importMap: ImportMap }): ClientConfig => {
|
|
const { config, i18n, importMap } = args
|
|
const currentLanguage = i18n.language
|
|
|
|
if (cachedClientConfigs[currentLanguage] && !global._payload_doNotCacheClientConfig) {
|
|
return cachedClientConfigs[currentLanguage]
|
|
}
|
|
|
|
const cachedClientConfig = createClientConfig({
|
|
config,
|
|
i18n,
|
|
importMap,
|
|
})
|
|
|
|
cachedClientConfigs[currentLanguage] = cachedClientConfig
|
|
global._payload_clientConfigs = cachedClientConfigs
|
|
global._payload_doNotCacheClientConfig = false
|
|
|
|
return cachedClientConfig
|
|
},
|
|
)
|