How to properly do async initial values?

[tyler-boyd]

I've tried following https://tanstack.com/form/latest/docs/framework/react/guides/async-initial-values, but I have some problems with this approach.

If I do

const form = useAppForm({
  defaultValues: dataFromServer, // can be undefined
})

there is one render that happens when dataFromServer first resolves, where the tanstack form values are all undefined. This can cause exceptions if there's an array field doing field.state.value.map(...), plus I have some issues with a select component's onChange firing incorrectly in this scenario.

I've been able to work around this with:

const isMissingId = useStore(form.store, (s) => !s.values.id)

if (isMissingId) return null;

but it feels tedious and error-prone to do it this way. I'm hoping I'm missing something? It seems very weird to me that field.state.value can be undefined even when the TS types don't allow that.

[LeCarbonator]

What is the type of dataFromServer? It should warn you that it is possibly undefined, which should cascade to the fields.

The best practice for async initial values is to have an 'empty' version of your data while the request is pending. All strings are empty strings, all Dates are today, all numbers are zero etc.

It doesn't need to be recreated on every render since it's just a static fallback object, so you can place it outside of the component.

const form = useAppForm({
  defaultValues: dataFromServer ?? emptyValues
})

[tyler-boyd]

@LeCarbonator thanks for the quick response!

Consider dataFromServer to be the type of data from useQuery, ie. TSomething | undefined. The defaultValues parameter supports undefined, so defaultValues: dataFromServer is allowed, and the types of the field values will be wrong.

See this code sandbox: https://codesandbox.io/p/devbox/busy-wilson-9dtyqd?workspaceId=ws_6iPQ5pAQR7pDBNQQaDfe7H

The type of form.getFieldValue("firstName") is string, but at runtime it's actually undefined.

The best practice for async initial values is to have an 'empty' version of your data while the request is pending

Understood, I've also tried this and had some issues with that first render where form.state.values and dataFromServer are different, triggering some onChange handlers, but perhaps that's an issue with my select component and not with this library.

If that matches your understanding, then I'll mark that as the answer, although I think there is still an issue with the TS types in the library where you can hit undefined values at runtime when the types suggest otherwise.

[LeCarbonator]

How weird ... from looking at the code and a typescript playground check, it almost seems like the same issue that this reports:

#1813

I wasn't aware that it can be so easily recreated.

[tyler-boyd]

I'll leave it to you to confirm, but that could make sense as data is a union type. Although this use case is probably simpler than that linked issue since we're just dealing with T | undefined, not TA | TB where both are different objects with overlapping keys.

Anyway, I think I have my answer -- don't pass undefined to defaultValues, OR be sure to check for undefined as I have been doing. Thank you!