i18next-http-backend is making multiple API calls

Question

I am applying internationalisation to my app with i18Next. The translation resources are severed via REST micro service. I am using i18next-http-backend plugin to fetch the translations.

The problem is that the plugin is making multiple API calls instead of one and I am not sure why

This is how my code looks like

i18n
    .use(HttpApi)
    .use(initReactI18next) 
    .init({
        backend: {
            backends: [
                HttpApi,
                HttpApi,
                resourcesToBackend(localResources) // 2nd fallback
            ],
            backendOptions: [
                {
                    loadPath: HOST,
                    queryStringParams: {file: FILENAME, languageCode: `${langMap[lang]}`}, // primary API call
                    parse: (data) => parseTranslation(data),
                },
                {
                    loadPath: HOST,
                    queryStringParams: {file: FILENAME, languageCode: `${langMap['en']}`}, // 1st fallback
                    parse: (data) => parseTranslation(data),
                }
            ],

        },
        fallbackLng: 'en',
        lng: 'en', // TODO: make dynamic
        debug: true,
        keySeparator: false,
        interpolation: {
            escapeValue: false,
        },
    });

P.S HOST and FILENAME are variables here

score 2 · Answer 1 · answered Dec 14 '22 at 12:41

      const loadResources = async (locale: string) => {
    return await axios
      .get(`${BASE_URL}/lang/strings/${locale}/translation.json`, {
        headers: { "Access-Control-Allow-Origin": "*" },
      })
      .then((res) => {
        return JSON.stringify(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  const backendOptions = {
    loadPath: "{{lng}}|{{ns}}",
    request: (options: any, url: any, payload: any, callback: any) => {
      try {
        const [lng] = url.split("|");
        loadResources(lng).then((response) => {
          callback(null, {
            data: response,
            status: 200,
          });
        });
      } catch (e) {
        console.log(e, "error from language");
        callback(null, {
          status: 500,
        });
      }
    },
  };

  i18n
    .use(backend)
    .use(initReactI18next)
    .init({
      backend: backendOptions,

      fallbackLng: "en",
      debug: false,
      lng: "en",
      ns: ["translations"],
      defaultNS: "translations",
      interpolation: {
        escapeValue: false,
        formatSeparator: ",",
      },
    })
    .then(noop)
    .catch(noop);

I hope this would be helpful for you

adrai · Answer 2 · 2022-12-14T15:11:47.767

1

Try to change the load option to currentlyOnly -> https://www.i18next.com/overview/configuration-options#languages-namespaces-resources like: https://github.com/i18next/i18next-http-backend/issues/61#issuecomment-812378629

Setting the fallbackLng to false may also work.

edited Dec 14 '22 at 15:11

answered Dec 14 '22 at 12:51

adrai

2,495
1
15
18

The load option doesn't solve the issue. As per my understanding the load option is needed when there are variants/dialects of a language. In my case there are no dialects – Lorem Ipsum Dec 14 '22 at 13:11
okay the issue is solved if I set the `fallbackLng: false` I am not sure why it solved the issue but maybe you can explain as you are the contributor of this plugin – Lorem Ipsum Dec 14 '22 at 13:17
1

because the fallbackLng is always loaded (in case there is a missing key in the current lng)... setting it explictly to false will not trigger an additional request – adrai Dec 14 '22 at 15:12
I see. But I need the fallback to local english translation if REST api fails as you can see in my code above. Settings `fallbacklng:false` doesn't load up translation from local resource. Is there any way to achieve this while making sure there are no duplicate AJAX calls? – Lorem Ipsum Dec 15 '22 at 08:40

i18next-http-backend is making multiple API calls

2 Answers2