0

I'm using i18next library to implement localisation in my react app, where I've to call an API to get the localisation in a response. But I want to use react query to call an API, and I know that react query being a hook can only be called in functional component, so I'm unable to use react query. Did anyone faced this error?

My i18next configuration.

export const getLocalisation = async (lng: string) => {
    try {
        const localisationResponse = await axios.get(
            `/localisation/${lng}`
        );
        return localisationResponse;
    } catch (err) {
        console.log('Error at getLocalisation: ', err);
    }
};

const backendOptions = {
    allowMultiLoading: true,
    loadPath: `/localisation/en`,
    request: (options: any, url: any, payload: any, callback: any) => {
        try {
            getLocalisation(EN).then((result) => {
                callback(null, {
                    data: result?.data,
                    status: STATUS_CODE_200
                });
            });
        } catch (e) {
            console.error(e);
            callback(e); // Passing `e` will handle error status code
        }
    }
};

i18n
    .use(HttpBackend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        debug: false,
        fallbackLng: EN,
        supportedLngs: [EN],
        ns: [],
        partialBundledLanguages: true,
        interpolation: {
            escapeValue: false
        },
        backend: backendOptions
    });

export default i18n;

When using react query, getting following error/warning. enter image description here

Parvez Shaikh
  • 5
  • 2
  • 1
    The error mentioned is not about translation as it seems though. It complains about a wrong usage of hooks (not inside a functional component). It wouldn't be possible to debug errors elsewhere if you don't prefer to share [minimum reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Erhan Yaşar Jan 24 '23 at 14:15
  • There are some APIs that I can't share that I am using for authentication and fetching localisation. I just want to know if we can make use of react query to fetch the localisation. – Parvez Shaikh Jan 25 '23 at 09:58
  • I got the solution to this. We need to create an empty react component with react query API call, set enabled flag to token. Call that empty component inside your layout. – Parvez Shaikh Jan 27 '23 at 12:00
  • Instead of talking in vein, you could create an empty react starter app on sandbox which you wanted to implement basics of i18next. Then me or someother one would be fixing it earlier instead of talking about something anyone doesn't see. – Erhan Yaşar Jan 27 '23 at 12:21

0 Answers0