What's the best place to initialise a server-side locale translator function?

I'm using

use-intl

use-intl

for my i18n (which is the core library from

next-intl

next-intl

. I want to initialise the

translator

translator

function and inject it into the request context so I can use it in the backend, but have it load the necessary data from user preferences only once.

export const Route = createRootRouteWithContext<MyRouterContext>()({
  beforeLoad: async ({ context }) => {
    const [
      auth,
      userPreference,
    ] = await Promise.all([
      context.queryClient.ensureQueryData(authQueryOptions()),
      context.queryClient.ensureQueryData(userPreferencesQueryOptions()),
    ])

    const locale = await context.queryClient.ensureQueryData(
      localeQueryOptions(userPreference.locale),
    )
    const translator = createTranslator(locale)

    return {
      auth,
      translator
    }
  },
  shellComponent: RootDocument,
})

export const Route = createRootRouteWithContext<MyRouterContext>()({
  beforeLoad: async ({ context }) => {
    const [
      auth,
      userPreference,
    ] = await Promise.all([
      context.queryClient.ensureQueryData(authQueryOptions()),
      context.queryClient.ensureQueryData(userPreferencesQueryOptions()),
    ])

    const locale = await context.queryClient.ensureQueryData(
      localeQueryOptions(userPreference.locale),
    )
    const translator = createTranslator(locale)

    return {
      auth,
      translator
    }
  },
  shellComponent: RootDocument,
})

However, I'm getting a

... is not assignable to type '"Function is not serializable"

... is not assignable to type '"Function is not serializable"

I suppose this is not supported. So, where's the good place to do this?

TanStack•5mo ago•

9 replies

broad-salmon

What's the best place to initialise a server-side locale translator function?

I'm using

use-intl

use-intl

for my i18n (which is the core library from

next-intl

next-intl

. I want to initialise the

translator

translator

function and inject it into the request context so I can use it in the backend, but have it load the necessary data from user preferences only once.

export const Route = createRootRouteWithContext<MyRouterContext>()({
  beforeLoad: async ({ context }) => {
    const [
      auth,
      userPreference,
    ] = await Promise.all([
      context.queryClient.ensureQueryData(authQueryOptions()),
      context.queryClient.ensureQueryData(userPreferencesQueryOptions()),
    ])

    const locale = await context.queryClient.ensureQueryData(
      localeQueryOptions(userPreference.locale),
    )
    const translator = createTranslator(locale)

    return {
      auth,
      translator
    }
  },
  shellComponent: RootDocument,
})

export const Route = createRootRouteWithContext<MyRouterContext>()({
  beforeLoad: async ({ context }) => {
    const [
      auth,
      userPreference,
    ] = await Promise.all([
      context.queryClient.ensureQueryData(authQueryOptions()),
      context.queryClient.ensureQueryData(userPreferencesQueryOptions()),
    ])

    const locale = await context.queryClient.ensureQueryData(
      localeQueryOptions(userPreference.locale),
    )
    const translator = createTranslator(locale)

    return {
      auth,
      translator
    }
  },
  shellComponent: RootDocument,
})

However, I'm getting a

... is not assignable to type '"Function is not serializable"

... is not assignable to type '"Function is not serializable"

I suppose this is not supported. So, where's the good place to do this?

What's the best place to initialise a server-side locale translator function?

Similar Threads

What's the best place to initialise a server-side locale translator function?

Similar Threads

Similar Threads

Similar Threads