Add support for async input/output

[lesha1201]

Description:

It would be nice to have support for async input/output. That would allow to handle such cases as dynamically creating a schema, for example, for using i18n messages.

I'm trying to migrate certain handlers from next-safe-action to orpc. But I got stuck migrating schemas that require translations (i18n). next-safe-action supports async input. And here is what my code currently looks like:

const SignInSchema = (t: IntlTranslator) =>
  v.object({
    phone_number: v.pipe(
      v.string(),
      v.nonEmpty(t('Validation.required')),
      v.check(
        input => isValidPhoneNumber(input),
        t('Validation.phone_number_invalid'),
      ),
    ),
    otp: v.pipe(v.string(), v.nonEmpty(t('Validation.required')), v.length(6)),
  });

async function getSignInSchema() {
  const t = await getTranslations();

  return SignInSchema(t);
}

export const signIn = actionClient
  .schema(getSignInSchema)
  .action(async ({ parsedInput }) => {
    // ...
  });

However, orpc doesn't allow to pass an async callback to input/output to dynamically create a schema.

It would be nice to have similar API in orpc so we can handle such cases.

Related discussions:

• https://github.com/unnoq/orpc/discussions/546

[unnoq]

Here how I i18n for oRPC without async input/output: https://github.com/unnoq/orpc-next-i18n-playground

[lesha1201]

@unnoq Thank you for the example! It's very helpful. I guess I can use the same approach to add support for passing custom messages directly to the schema by using a global storage (or globalThis). Though I don't really like using the global storage because it increases complexity and less explicit.

Do you plan adding support for passing callback function to input/output? I can create a PR if it's something you would like to add.

[lesha1201]

I guess I can use the same approach to add support for passing custom messages directly to the schema by using a global storage (or globalThis).

Something like this:

type IntlTranslatorWrapper = (
  ...args: Parameters<IntlTranslator>
) => () => string;

declare global {
  var $t: IntlTranslator;
  var $tWrapper: IntlTranslatorWrapper;
}

globalThis.$t = () => '';

globalThis.$tWrapper =
  (...args) =>
  () =>
    globalThis.$t(...args);

export const i18nMiddleware = os
  .$context<{ locale?: Locale }>()
  .middleware(async ({ next }) => {
    // locale is hardcoded just for demonstration
    const locale = 'ar-u-nu-latn'
    
    globalThis.$t = await getTranslations({ locale });

    return next({ context: { locale } });
  });
  
// ...

const SignInSchema = (t: IntlTranslator | IntlTranslatorWrapper) =>
  v.object({
    phone_number: v.pipe(v.string(), v.nonEmpty(t('Validation.required'))),
    otp: v.pipe(v.string(), v.nonEmpty(t('Validation.required')), v.length(6)),
  });

export const signIn = base
  .input(SignInSchema(globalThis.$tWrapper))
  .handler(({ input, context: { api } }) => {
    // ...
  });

[unnoq]

I think everything you're looking for is already built into Valibot via v.lazyAsync

Though I don't really like using the global storage because it increases complexity and less explicit.

Your getTranslations is essentially a global, too. The only difference is that you're resolving it in a middleware instead of at the point of use.

But in my opinion, re-create schema on each request is completely wrong approach:

const schema = v.nonEmpty(() => translate('Validation.required'))

And translate is build on top of async local storage, something like this:

export function translate(...args){
  const t: IntlTranslator | IntlTranslatorWrapper = localStorage.getStore()

  return t(...args)
}

and all thing you need is inject getTranslations into localStorage in a custom middleware

[lesha1201]

Thanks! Didn't know about v.lazyAsync. That definitely removes the need for passing callback function to input/output.

Your getTranslations is essentially a global, too. The only difference is that you're resolving it in a middleware instead of at the point of use.

Not sure I understand. getTranslations is a function from next-intl.

But in my opinion, re-create schema on each request is completely wrong approach:

I think there are some valid cases for it and I think it's ok to have since it's not an extensive computation (at least in case of Valibot).

[unnoq]

I mean getTranslations underhook depend on something global too, except that it handled by next-intl lib

[unnoq]

I will close this, because we can solve this problem by using v.lazyAsync or async local storage pattern.