React-i18next: Access translation function outside of hook

[developdeez]

I'm calling the translation from a callback (below) and keep getting the hook being used incorrectly error. I understand hooks need to be called from functional components but was wondering if translation can be called a different way.

const client = new ApolloClient({
  link,
  cache
});
const link = errorLink.concat(
  ApolloLink.from([stateLink, AuthLink, splitlink])
);

const errorLink = onError(
  ({ graphQLErrors, networkError, response, operation, forward }) => {
    if (graphQLErrors) {
      graphQLErrors.map(({ message, path }) => {
          **const [t] = useTranslation();
          console.log(t(message));**
        }

[jamuhl]

you can directly import i18n and use t function from it

import i18n from './i18n';

i18n.t(key);

[developdeez]

Thanks for teh response.
Thats the first method I tried. It only returns the key in string format.

This is my i18 file:

import i18n from "i18next";
import detector from "i18next-browser-languagedetector";
import backend from "i18next-xhr-backend";
import { initReactI18next } from "react-i18next";

// translations are already at
// '../public/locales/en/translation.json'
// which is the default for the xhr backend to load from

i18n
  .use(backend)
  .use(detector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    fallbackLng: "en", // use en if detected lng is not available
    keySeparator: false, // we do not use keys in form messages.welcome
    saveMissing: false, // send not translated keys to endpoint
    interpolation: {
      escapeValue: false // react already safes from xss
    },
    ns: ["common"],
    // react-i18next options
    react: {
      useSuspense: false,
      wait: true
    }
  });
export default i18n;

My desired translation is in my en/common.json

This is my index,js so maybe its a loading issue?

[jamuhl]

loading is async...you need to wait for the namespace loaded

either using `i18n.init(opts, () => { /* ready here */ }``

or in a own file:

import i18n from './i18n';

i18n.loadNamespace('common', () => { i18n.t('common:key'); });

or using some event: https://www.i18next.com/overview/api#events

[developdeez]

First method I can't do because this callback in the error handler in my index.js which load i18 initially.

loadNamespace is not a function is the error I get with method number 2. I updated to latest package aso.

And since this only happens when there's an error Im not sure any of the events applies.

[developdeez]

Got it to work. I just needed to include common :p

[jamuhl]

for 2) it is loadNamespaces - sorry for the typo: https://www.i18next.com/overview/api#loadnamespaces