Transform multi-locale response to match client-side i18n format

[raphaeldas]

Hello

I'm a happy user of your plugin to simplify the strapi response. (Natively it is too nested in my opinion!)
Another difficulty is the transformation of answers with translations in the localizations property.
I use vue-i18n to integrate this translations in my web app. Therefor i have to transform the strapi response to this format:

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  de: {
    message: {
      hello: 'hallo welt'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

For now I have a function to align the response to the above format.
But it's quite inefficient to do this step client-side for every request.
It would be much more convenient to do this transform step server side, directly inside strapi.
So, would this be something that could be integrated into this transformer plugin?
Or would this function be better off in a new separate plugin?

Thank you for your answer

Best Regards
raphaeldas

[raphaeldas]

My mapping-function looks something like that:

translate () {
  const translations = {};
  const slug = typeof arguments[0] === 'string' ? arguments[0] : 'content';
  for (const json of arguments) {
    if (Array.isArray(json)) {
      for (const entry of json) {
        translations[entry.locale] = translations[entry.locale] || {};
        translations[entry.locale][slug] = translations[entry.locale][slug] || [];
        translations[entry.locale][slug].push(entry);
      }
    } else if (typeof json === 'object') {
      const entry = json;
      const stayObject = arguments.length === 1;
      const localizations = entry.localizations;
      translations[entry.locale] = translations[entry.locale] || {};
      // delete entry.localizations;
      if (stayObject) {
        translations[entry.locale][slug] = entry;
      } else {
        translations[entry.locale][slug] = translations[entry.locale][slug] || [];
        translations[entry.locale][slug].push(entry);
      }

      for (const entry of localizations) {
        translations[entry.locale] = translations[entry.locale] || {};
        if (stayObject) {
          translations[entry.locale][slug] = entry;
        } else {
          translations[entry.locale][slug].push(entry);
        }
      }
    } else {
      console.log('Argument was neither an object nor an array: ', json);
    };
  }
  console.log(translations);
  return translations;
}

async fetchTranslation (slug) {
  const response = await fetch(slug);
  return this.translate(response.data);
}

and then use like:

const content = await fetchTranslation('/content-type?locale=all');
for (const [lang, message] of Object.entries(content)) {
  this.$i18n.setLocaleMessage(lang, message);
}

[ComfortablyCoding]

I'll have to look into this, I do not think it will be integrated natively as it seems to be product specific use case which I tend not to add.

What I am thinking at the moment is to add some pre/post and during processing hooks that can modify the transformation.

That should allow for somewhat user configurable transformations.

[raphaeldas]

Thank you for your reply.
Such a post process hook would be really cool, indeed.
Since i already have my modification function, i can just apply it there.
If I had to do something like that myself, I wouldn't know where to start.

How much work would that be?
And how soon could you offer something like that?

Thank you very much for your work!
Regards
raphaeldas

[ComfortablyCoding]

Thanks,

It should not be to difficult to do as I have done a similar concept on another plugin of mine. I will try and release an implementation for it over the next week or so but cannot guarantee that timeline.

If you wish to take a crack at it in the meantime the pre and post response transform hook modification would happen before and after this line. The hooks themselves would be done under their own top level property in the settings (or at least that is the plan atm).

e.g.

module.exports = ({ env }) => ({
  // ..
 'transformer': {
    enabled: true,
    config: {
      // ...
      hooks :{
       'preResponseTransform': ()=>{}
       'postResponseTransform': ()=>{}
      }
      // ...
    }
  },
  // ..
});

[raphaeldas]

Ok, cool. Thank you very much!Inside the transform service, do i have access to the request ctx? This way i could only transform the response if a specific parameter is set for example, or include some other conditions. RegardsraphaeldasAm 06.11.2022 07:33 schrieb daedalus ***@***.***>: Thanks, It should not be to difficult to do as I have done a I will try and release an implementation for it over the next week or so but cannot guaruntee that timeline. If you wish to take a crack at it in the meantime the pre and post response transform hook modification would happen before/after this line https://github.com/ComfortablyCoding/strapi-plugin-transformer/blob/master/server/services/transform-service.js#L94 . The hooks themselves would be done under their own top level property in te settings (or at least that is the plan atm). e.g. module.exports = ({ env }) => ({ // .. 'transformer': { enabled: true, config: { // ... hooks :{ 'preResponseTransform';()=>{} 'postResponseTransform':()=>{} } // ... } }, // .. }); —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[ComfortablyCoding]

Their would need to be some changes as to how data is passed down to the transform function but it should be possible to provide access to the ctx.

[raphaeldas]

Hi. Any updates regarding this feature request? :-)

[ComfortablyCoding]

Sorry I have not had a chance to work on this yet. Will try and do it over the next few days. #54 has been created to track this feature request

[raphaeldas]

Ok, thank you! 👍🏼

[ComfortablyCoding]

Response Transform hook support has been added in v2.2.0