react-i18next and i18next-http-backend - how to do a single REST API call and fetch the namespaces from that response

[nandeshwarshubh]

I current have the following setup. But here the API call goes for each namespace. Is there a way to fetch all namespaces from a single API and use the same in response? GET -http://localhost:3015/resources gives all the namespaces in single API call

i18nservice.ts `import i18next from "i18next"; import I18NextHttpBackend from "i18next-http-backend"; import { initReactI18next } from "react-i18next";

const loadResources = async (language, namespace) => { return await axios.get( http://localhost:3015/resources/${namespace}, { params: { language: language }, } ) .then((res) => { return res.data; }) .catch((err) => { console.log(err); }); };

const backendOptions = { loadPath: {{lng}}/{{ns}}, allowMultiLoading: false, crossDomain: false, request: (options, url, payload, callback) => { try { const [lng, ns] = url.split("/"); loadResources(lng, ns).then((data) => { callback(null, { data: data, status: 200, }); }); } catch (e) { console.error(e); callback(null, { status: 500, }); } }, }; i18next .use(I18NextHttpBackend) .use(initReactI18next) .init({ backend: backendOptions, lng: "en", partialBundledLanguages: true, fallbackLng: "en", preload: ["en"], ns: ["translation"], defaultNS: "translation", debug: false, });

export default i18next;`

App.tsx import i18n from "../i18nservice"; const App = () => { return <> <I18nextProvider i18n={i18n}> ... My component structure </I18nextProvider> </> }