Custom module: State from SSR not populated to client

Hello

I’m building a simple custom module in VSF.
In the hook afterRegistration I do an ajax-call and update the state with the fetched data.
But when the site is rendering and I inspect with the DevTools, the state is back to default state?

I’m using VSF 1.10.3

This is my code

// index.ts
export const KEY = 'currency';
export const cacheStorage = initCacheStorage(KEY);
export const Currency = createModule({
  key: KEY,
  store: {modules: [{key: KEY, module}]},
  afterRegistration
});
// afterRegistration.ts
export function afterRegistration ({ Vue, config, store, isServer }) {
  AsyncDataLoader.push({
    execute: ({store}) => {
      return new Promise((resolve, reject) => {
        store.dispatch(`${KEY}/getCurrenies`)
          .then(() => resolve());
      })
    }
  })
}
// actions.ts
export const actions: ActionTree<CurrencyState, any> = {
  getCurrenies ({ commit }) {
    const url = `${config.api.url}/api/ext/currency`;
    fetch(url)
      .then(resp => resp.json())
      .then(json => {
        commit(types.SET_CURRENCIES, json.result)
      })
      .catch(console.error)
  }
}
// mutations.ts
export const mutations: MutationTree<any> = {
  [types.SET_CURRENCIES] (state, payload) {
    state = payload
    console.log(state) // state is updated
  }
}
// state.ts
export const state: CurrencyState = {
  available_currency_codes: [],
  base_currency_code: '',
  base_currency_symbol: '$',
  default_display_currency_code: 'USD',
  default_display_currency_symbol: '$',
  exchange_rates: []
};
// CurrencyState.ts
interface ExchangeRates {
  currency_to: string,
  rate: number
}

export interface CurrencyState {
  base_currency_code: string,
  base_currency_symbol: string,
  default_display_currency_code: string,
  default_display_currency_symbol: string,
  available_currency_codes: string[],
  exchange_rates: ExchangeRates[]
}

And the file is registered in the VueStorefrontModule[]

What could be wrong?

Thanks in advance

To have anything outputed in the SSR initial state all the subsequent promises must be awaited/resolved before the output is getting returned to the browser. In getCurrencies you do fetch but you’re not returning any promise that can be awaited. You probable can have the desired behavior just by adding await fetch( .... Otherwise this request is being executed IN PARALLEL to returning rendered HTML to the browser