Not able to get MultiloadAdapter, HttpBackend, and FSBackend working together

[yaman3bd]

Hey,
I want to use MultiloadAdapter with HttpBackend to load my translations from external API and FSBackend to have a cache layer but I am not able to get everything working together, the server makes a request for each namespace I have, it does not send a request with all the namespaces.
I logged the ns query parameter in the server, the namespaces are not sent with one request like:

console.log("Namespaces API:", req.query.ns)

but when I remove FSBackend and ChainedBackend it works well without any issues,
my config:

const ChainedBackend = require("i18next-chained-backend/dist/cjs/i18nextChainedBackend.js");
const FSBackend = require("i18next-fs-backend/cjs");
const HttpBackend = require("i18next-http-backend/cjs");
const MultiloadAdapter = require("i18next-multiload-backend-adapter/cjs");

const backendOptions = require("./backendOptions");

module.exports = {
    i18n: {
        locales: ["en"],
        defaultLocale: "en"
    },
    use: [MultiloadAdapter, ChainedBackend],
    ns: ["auth", "otp", "common", "validation"],
    preload: ["en"],
    defaultNS: "common",
    backend: {
        backends: [FSBackend, HttpBackend],
        backendOptions
    },
    maxParallelReads: 50,
    serializeConfig: false
};

backendOptions.js file:

const axios = require("axios");

module.exports = [
    {
        loadPath: "./public/locales_cache/{{lng}}/{{ns}}.json",
        addPath: "./public/locales_cache/{{lng}}/{{ns}}.json",
        expirationTime: 60 * 60 * 1000
    },
    {
        loadPath: "{{lng}}|{{ns}}",
        request: async (options, url, payload, callback) => {
            try {
                const [lng, ns] = url.split("|");

                await axios
                    .get("http://localhost:3001/api/translations", {
                        params: { lng, ns }
                    })
                    .then((response) => {
                        const lngs = lng.split("+");
                        const nss = ns.split("+");
                        for (const $lng of lngs) {
                            for (const $ns of nss) {
                                if (response.data.data[$lng][$ns]) {
                                    // eslint-disable-next-line no-console
                                    console.log("response data: ", response.data.data[$lng][$ns]);
                                    callback(null, {
                                        data: response.data.data[$lng][$ns],
                                        status: 200
                                    });
                                }
                            }
                        }
                    })
                    .catch((error) => {
                        // eslint-disable-next-line no-console
                        console.log("response error: ", error.response.data);
                        callback(null, {
                            status: 500
                        });
                    });
            } catch (e) {
                // eslint-disable-next-line no-console
                console.log("catch error: ", e);
                callback(null, {
                    status: 500
                });
            }
        }
    }
];

I thought changing the order of HttpBackend, and FSBackend would help so I did:

backends: [HttpBackend, FSBackend],

and use: [MultiloadAdapter, ChainedBackend] to:

use: [MultiloadAdapter, ChainedBackend],

but unfortunately, it did not
here is an example repo with the issue

Can anyone help me figure out what I am doing wrong or what is missing in my config?

Thanks!

[adrai]

Sorry, but I don't understand what your goal should be.

Some stuff I notice:

• the i18next-fs-backend can only be used on server side...
• you can't use the i18next-multiload-backend-adapter and the i18next-chained-backend at the same time, like you configured it now

also have a look at: i18next/i18next-http-backend#114 and i18next/i18next-http-backend#117

[yaman3bd]

@adrai, thanks for the replay, My goal is to be able to load all my namespaces and langs in one request rather than having to send a new request for each namespace I have, I can do it using multiload-backend-adapter and it is working fine, but when I want to use i18next-fs-backend as cache layer I have to use i18next-chained-backend but it does not work with multiload-backend.

So if I can not use i18next-multiload-backend-adapter and i18next-chained-backend at the same time then,
how can Imultiload-backend and have a cache layer at the same time?

and as for "the i18next-fs-backend can only be used on server side...":
I have my config separated one for the server and one for the client, on the client I am using i18next-localstorage-backend

Thank you for your prompt response!

[adrai]

ok, a config like this should work: https://github.com/i18next/i18next-multiload-backend-adapter/blob/master/examples/caching/app.js#L38

This means your config would probably look like this:

module.exports = {
    i18n: {
        locales: ["en"],
        defaultLocale: "en"
    },
    use: [ChainedBackend],
    ns: ["auth", "otp", "common", "validation"],
    preload: ["en"],
    defaultNS: "common",
    backend: {
        backends: [
          FSBackend,
          MultiLoadBackendAdapter
        ],
        backendOptions: [{ // options for fs backend
          loadPath: './locales_cache/{{lng}}/{{ns}}.json',
          addPath: './locales_cache/{{lng}}/{{ns}}.json',
          expirationTime: 60 * 60 * 1000
        }, { // options for multi-load backend => http backend
          backend: HttpBackend,
          backendOption: {
            loadPath: "{{lng}}|{{ns}}",
            request: async (options, url, payload, callback) => {
                try {
                    const [lng, ns] = url.split("|");

                    await axios
                        .get("http://localhost:3001/api/translations", {
                            params: { lng, ns }
                        })
                        .then((response) => {
                            const lngs = lng.split("+");
                            const nss = ns.split("+");
                            for (const $lng of lngs) {
                                for (const $ns of nss) {
                                    if (response.data.data[$lng][$ns]) {
                                        // eslint-disable-next-line no-console
                                        console.log("response data: ", response.data.data[$lng][$ns]);
                                        callback(null, {
                                            data: response.data.data[$lng][$ns],
                                            status: 200
                                        });
                                    }
                                }
                            }
                        })
                        .catch((error) => {
                            // eslint-disable-next-line no-console
                            console.log("response error: ", error.response.data);
                            callback(null, {
                                status: 500
                            });
                        });
                } catch (e) {
                    // eslint-disable-next-line no-console
                    console.log("catch error: ", e);
                    callback(null, {
                        status: 500
                    });
                }
            }
          }
        }]
    }
    backend: {
        backends: [FSBackend, HttpBackend],
        backendOptions
    },
    maxParallelReads: 50,
    serializeConfig: false
};

[yaman3bd]

I did not think it would be this way, I edited my config and it works as expected! Thanks a lot for the clarification.
but I have one last thing I seem not to understand, for my FSBackend I have these options:

{
    loadPath: "./public/locales_cache/{{lng}}/{{ns}}.json",
    addPath: "./public/locales_cache/{{lng}}/{{ns}}.json",
    expirationTime: 15 * 1000 // all 30 seconds the cache should be deleted
}

After I waited for 2 minutes, I updated some keys value and reloaded the page to see if the texts would be updated, but nothing changed, and text still the same from the cache, not the new one, Nothing updated until I shut down the server and start it again the text is the updated one

this video shows how I tried to do it (sorry it is a bit long but I had to show the full case):

screen-recording-2023-09-08-at-101721-pm_oNPKcBog.mp4

could you please tell me what I am missing, and how the cache would work in production after the expiration?

Again thanks a lot for all the help you provided to the community 🙏

[adrai]

check if the locales_cache directory is at least updated, if so I suspect Next.js caches it too, then you can try to set reloadOnPrerender to true => https://github.com/i18next/next-i18next#reloading-resources-in-development

[yaman3bd]

I checked the locales_cache, the values are not updated, but when I set reloadOnPrerender to true:

 reloadOnPrerender: env === "development"

Everything worked as expected

I have updated the example repo with the latest configs:
https://github.com/yaman3bd/local-test/tree/main/next-i18next.config.js

could you please check it out and confirm if the setup is correct?
so I can give it as an example when someone from the community asks for a similar thing.

Thanks for your time, and the effort you made to help me out.

[adrai]

looks correct 👍