0

I tried creating a custom plugin to download data from backend using i18next plugin, however, is stuck at data dumping process. I am using NextJS for frontend.

Here is the configuration file for NextJS.

const { i18n } = require('./next-i18next.config.js/index.js')

module.exports = {
  reactStrictMode: true,
  i18n
}

Here is the next-18next.config.js file content.

const getDefault = ()=>{
    return {
            parse: data => JSON.parse(data),
            addPath: '/locales/{{lng}}/{{ns}}',
    }
}

class Backend {
  constructor(services, backendOptions, i18nextOptions){
    this.init(services,backendOptions,i18nextOptions)
  }

  init (services,options={},allOptions={}){
      this.services = services;
      this.options = {...getDefault(),...options}; 
      this.allOptions = allOptions;
  }

  async read(language, namespace, callback) {
      const payloadUrl = this.options.payloadUrl; 
      this.data = null; 
      try {
          const response = await fetch(payloadUrl);
          const payloadData = await response.json(); 
          this.data = payloadData; 
      }
      catch(err){
          return callback(err,this.data)
      }

      this.loadUrl(language,namespace,callback); 
  }

    async loadUrl (language,namespace,callback){
      const loadPath = this.options.loadPath;
      const url = this.services.interpolator.interpolate(loadPath, { lng: language, ns: namespace});
      try {
          const response = await fetch(url);
          const data = await response.json();
          return callback(language,namespace,data)
      }

      catch(err){
          console.log("Error while fetching payload ", err)
          callback(err,null)
      }
    }

     save (language, namespace, data) {
      console.log(language,namespace,data); 
     }

     create (language, namespace, key, fallbackValue) {
        console.log(language,namespace,key,fallbackValue)
     }

    dumpData(language,namespace,data){
      const filePath = this.services.interpolator.interpolate(this.options.addPath, { lng: language, ns: namespace});
      // need to find a way to dump the file into the given filePath, (right now 
      // I cannot find proper way to use fs library)
      console.log(filePath, "is the file path")
      console.log("data we dumping ", data); 
    }
}

Backend.type = "backend";
module.exports =  Backend;

I am following https://github.com/i18next/i18next-http-backend and have no idea how they are dumping the payload we get from backend to specific folder. I tried doing it manually adding fs library, however we are using NextJS and using fs gives me error Can't resolve 'fs'. How can we dump the data we receive from backend into its required location?

GOAT
  • 1

1 Answers1

0

The callback signature is wrong, callback(language,namespace,data) is not correct. The signature should be callback(error, result) => this means you may change it to: callback(null, data)

Additionally, all these are not async functions, plain old callback based functions, like described here: https://www.i18next.com/misc/creating-own-plugins#backend

btw: if you're fetching data from your backend, why do you not simply use i18next-http-backend and adapt the loadPath and or the parse option and/or the request option: https://github.com/i18next/i18next-http-backend#backend-options ?

adrai
  • 2,495
  • 1
  • 15
  • 18
  • i18next-http-backend fetches data from the backend. But, at my end, we need to send the payload and then get the response. The response which we need to dump into the specific file. – GOAT Feb 16 '22 at 07:45
  • adding `callback (null,data)` didn't helped either. – GOAT Feb 16 '22 at 07:55
  • And `i18next-http-backend` request option is not working for me. I have no idea why. – GOAT Feb 16 '22 at 08:05
  • There might be some other issue then... similar question: https://github.com/i18next/i18next-http-backend/issues/85#issuecomment-1028861872 – adrai Feb 16 '22 at 09:52
  • Best would be if you could provide a reproducible example on codesandbox or similar. – adrai Feb 16 '22 at 09:52