Translate inside a QRL function?

[jimmynguyen1308]

Hi,

I'm pretty new to Qwik and very excited with the multi-lingual feature provided with qwik-speak so far. However, I came into an issue while implementing the useTranslate hook into my codebase. Specifically, if you try to add like the following:

import { useTranslate } from "qwik-speak"

// ...

const t = useTranslate()
const fn = $(() => {
  return (
    <p>{t('app.example.text')}</p>
})

It will return this error message...

Captured variable in the closure can not be serialized because it's a function named "translate". You might need to convert it to a QRL using $(fn):

const translate = $((keys, params, lang)=>{
        const { locale , translation , config  } = ctx;
        lang ?? (lang = locale.lang);
        if (Array.isArray(keys)) return keys.map((k)=>getValue(k, translation[lang], params, config.keySeparator, config.keyValueSeparator));
        return getValue(keys, translation[lang], params, config.keySeparator, config.keyValueSeparator);
    });

The real use cases are probably more complex than this so I couldn't just set a variable to t('app.example.text') and chunk it in the QRL. The error also appears in other hooks like usePlural as well. I'm quite new to Qwik so I assume it should be some ways to get behind this, but since I couldn't find a clear one I want to make this a discussion here. Cheers!

[robisim74]

In Qwik, a QRL is a lazy loaded code snippet, and does not belong to the component$. Therefore it is not possible to use hooks, or closure functions like t: https://qwik.builder.io/docs/advanced/qrl/
To translate out of component$, you can use inlineTranlate: https://robisim74.gitbook.io/qwik-speak/library/translate#inlinetranslate

const ctx = useSpeakContext();

const fn = $(() => {
  return (
    <p>{inlineTranslate('app.example.text', ctx)}</p>
});

There is no equivalent function for usePlural (see #68), so you have to translate in the component$ and pass it to the QRL (and it works also for t):

const t = useTranslate();
const p = usePlural();

const myTranslations = t(['app.ex1', 'app.ex1']); // array of translations
const myPlural = p(count.value, 'app.plural.ex');

const fn = $(() => {
  return (
    // use here myTranslations & myPlural already translated values
});

Then I don't understand what is the use case to return jsx inside QRL. In my opinion, you could directly use component$ instead, which is a QRL where you can use hooks.

[jimmynguyen1308]

Hi @robisim74,

Thanks for the reply and solution!
The idea of using $(fn) is that i can return jsx element dynamically, for example, printing how long ago the update time from now using useRelativeTime() or displaying messages according to user inputs...

const t = useTranslate()
const errMsg = useSignal("")


const p = usePlural()
const fn = $((count: number, entity: string) => console.log(number + " " + p(count, entity))

return (
  <>
    <input type="text" onInput$={$((text: string) => !isNaN(text) &&  errMsg.value = t('app.input.youEnteredNumber'))}/>
    <p>{errMsg.value}</p>
    <button onClick$={$(() => fn(100, 'app.entity.products'))}>
      Click to see one hundred products
    </button>
  </>
)

Yet again, I am new to Qwik and I might be approaching it the old VanillaJS way. Besides, wrapping the hooks into a component$ definitely solves the majority of issues I've gotten so far.