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> </> }

[adrai]

i18next loads on-request the specific namespace(s) for the necessary language(s)... so the short answer is: NO.
But there is maybe the possibility to use https://github.com/i18next/i18next-multiload-backend-adapter