How do I use async initial values as default values with a withForm implementation ?

[ra-kesh]

Hello, I am new to tanstack-form, currently working with a multistep form using withForm and I have my default values inside a shared-form component as mentioned in documentation like below

const formOpts = formOptions({
  defaultValues: {
    firstName: 'John',
    lastName: 'Doe',
  },
})

I am reusing this with every child form component like below

const ChildForm = withForm({
  ...formOpts,
  // Optional, but adds props to the `render` function outside of `form`
  props: {
    title: 'Child Form',
  },
  render: ({ form, title }) => {
    return (
      <div>
        <p>{title}</p>
        <form.AppField
          name="firstName"
          children={(field) => <field.TextField label="First Name" />}
        />
      
    )
  },
})

But I am not sure how do I get async initial values from something like useQuery and use it in this setup. I know I can do this easily without the withForm but I don't want to do it as it will be very long and tough to maintain . Any help would be really appreciated, Thank you

[juanvilladev]

I would query my backend separately and pass the default values in as a props to the form component that uses useForm/useAppForm. There's no built in functionality for this, we'd need to integrate something like react query for this, which I know maintainers don't necessarily want to do.

[ra-kesh]

Thank you for the reply Juan . Instead of passing it as prop, I am thinking of using the useQuery inside the render function of withForm component and populate the data using listeners onMount. What do you think... I think it should work

[ra-kesh]

Although this might work incase of create form..this won't work..if I am updating the form..so again clueless..

[jgustavoj]

Im actually wondering this same scenario myself. It would be very helpful to be able to use a form built with withForm() and pass it an async initial value without doing hacky behavior. Did the onMount route work for you?