How to updaye i18next configuration?

Question

I want to use react-i18next in my project, and I want to config the i18 settings with the data fetched from server, so it's an async function.

the first senario came to my mind is using this:

  useEffect(() => {
    console.log("i18n_useEffect", i18n);
    setTimeout(function() {
      console.log(
        "fetch data from server,and then reset i18n.js configuration"
      );
      const configurationFromServer = {...};
      localStorage.setItem("i18n_configuration",configurationFromServer)
      seti18nLoaded(true);
    }, 3000);
  },[]);

seti18nLoaded && <Componenrts/>

first, we fetch the configuration data from server, and once it's done, we can diaplay our and use i18n inside.

but it doesn't look right, because if the configuration api failed or before I got the data. I want to give a default setting first, and update it later.

like this:

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

const init_i18n = configFromServer => {
  i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init(configFromServer);
};

const defaultConfig = {
  // we init with resources
  resources: {},
  fallbackLng: "en",
  debug: true,
  // have a common namespace used around the full app
  ns: ["translations"],
  defaultNS: "translations",

  keySeparator: false, // we use content as keys

  interpolation: {
    escapeValue: false
  }
};

const configFromServer = {
  // we init with resources
  resources: {
    en: {
      translations: {
        Hello: "Hello",
        welcome: "welcome",
        "Use string as key": "Use string as key"
      }
    },
    de: {
      translations: {
        "Use string as key": "Use string as key_de",
        Hello: "Hello_de",
        welcome: "welcome_de"
      }
    }
  },
  fallbackLng: "en",
  debug: true,

  // have a common namespace used around the full app
  ns: ["translations"],
  defaultNS: "translations",

  keySeparator: false, // we use content as keys

  interpolation: {
    escapeValue: false
  }
};

const initialize = () => {
  i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init(defaultConfig);

  setTimeout(() => {
    console.log("fetch data from server");
    //I want update the configuration here.but not work.
    init_i18n(configFromServer);
  }, 2000);
};

initialize();

export default i18n;

so the idea is that we use the default configuration to initialize it once and then update it based on the data we pull from the server

and I will use below way, because I want it default display english text before i18next configuration loaded from server or fetched failed.

I'm not sure if my idea is the right way to do this. I also taked a look at i18next-xhr-backend, it looks config the api path within the init function, but it's hard to understood, it will be help full if some one can give a example for the usage of i18next-xhr-backend.

anyway, I have a online demo here to explain it more clearly: https://codesandbox.io/s/react-i18next-gpzyc

and I have a fack api to test the configuration: https://my-json-server.typicode.com/jjzjx118/demo/db

it returns:

{
  "en": {
    "translations": {
      "Hello": "Hello",
      "welcome": "welcome",
      "Use string as key": "Use string as key"
    }
  },
  "de": {
    "translations": {
      "Use string as key": "Use string as key_de",
      "Hello": "Hello_de",
      "welcome": "welcome_de"
    }
  }
}

thanks you.

Answer 1

I have checked your sandbox link and the i18n instance was already reinitialized from the new config. What you are missing is selecting the language you like manually.

Since you are using LanguageDetector , it will just select the language based on the browser, etc. If you wanted to change it manually after fetching the request from the server, you can call i18n.changeLanguage("de") , after you reinitialize it.

In your case:

setTimeout(() => {
    console.log("fetch data from server");
    init_i18n(configFromServer);

    // You can change the language here based on the config
    i18n.changeLanguage("de");
  }, 2000);

Here's a working sandbox https://codesandbox.io/s/react-i18next-we8xi