Fetch data with RQ and use it as initial value for form and at the same time use shared opts with multi forms.

[nihilum-labs]

I junior and without big experience. I want to get some data from the API and use it as the initial value of the form, but at the same time create options and validation and use them between different forms. I came up with this modification to formOpts.

Did I do it right?

export const formOpts = (transaction: Transaction | null = null) =>
  formOptions({
    defaultValues: {
        firstName:  transaction?.firstName ?? '',
        age: transaction?.age ?? 0,
      },
  });

const serverValidate = createServerValidate({
  ...formOpts(),
  onServerValidate: ({ value }) => {
    if (value.age < 12) {
      return 'Server validation: You must be at least 12 to sign up'
    }
  },
})

...
export const ClientComp = () => {
  const { data: transaction, isLoading } = useQuery({
    queryKey: ['data'],
    queryFn: async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      return { firstName: 'FirstName', lastName: 'LastName' }
    },
  })
  const [state, action] = useActionState(someAction, initialFormState)

  const form = useForm({
    ...formOpts(transaction),
    transform: useTransform((baseForm) => mergeForm(baseForm, state!), [state]),
  })

  const formErrors = form.useStore((formState) => formState.errors)

  return (
...