dependent-tan

undefined formMeta on first render

Hello , when running the following example

const form = useForm({ defaultValues: { name: "" } });
console.log("form meta api", form.state.fieldMeta.name);

const form = useForm({ defaultValues: { name: "" } });
console.log("form meta api", form.state.fieldMeta.name);

my application logs undefined, the types suggest that name is of type AnyFieldMeta which does not include undefined, this leads me to believe I am misunderstanding something. Could the issue be that i am using nextjs? (i've checked with completly disabled ssr via dynamic import) I am on latest version of "@tanstack/react-form": "^1.23.4" If the solution is obvious and i am in fact misunderstanding something can you point me to the docs please?

10 Replies

stormy-gold•7d ago

It is a Record<DeepKeys<TData>, AnyFieldMeta> so any string matching a deep key can or can not be in that record whether you are forced to assume undefined everytime depends on your typescript config

dependent-tanOP•7d ago

hmm, I'm sorry, I don't think i understand :c.

It is a Record<DeepKeys<TData>, AnyFieldMeta>

this is true.

so any string matching a deep key can or can not be in that record

If i expand the example a little:

const form = useForm({ defaultValues: { name: "" } });
console.log("form meta api", form.state.fieldMeta.name);
const nameMeta = form.state.fieldMeta.name;

const form = useForm({ defaultValues: { name: "" } });
console.log("form meta api", form.state.fieldMeta.name);
const nameMeta = form.state.fieldMeta.name;

Since I'm accessing the Record<DeepKeys<TData>, AnyFieldMeta> via an existing key (im using .name and the type of DeepKeys<TData> is just "name" in the example), typescript gives me const nameMeta: AnyFieldMeta, note that i have strict enabled in my tsconfig, which is the stricter option, so if i turn it off the type will still be AnyFieldMeta. This is incorrect because on first render value of nameMeta will be undefined. I believe if you copy paste the following:

const form = useForm({ defaultValues: { name: "" } });
form.state.fieldMeta.name.isValid;

const form = useForm({ defaultValues: { name: "" } });
form.state.fieldMeta.name.isValid;

Typescript will show no error, regardless of config, and the app will crash due to accessing undefined.isValid

whether you are forced to assume undefined everytime depends on your typescript config

Can you expand what it depends on? My first tought was the strictNullChecks, but thats not the case.

stormy-gold•7d ago

noUncheckedIndexedAccess

dependent-tanOP•7d ago

I've prepared two examples, one minimal proving the crash, one showcasing what i am trying to achieve and why this is an issue https://stackblitz.com/edit/tanstack-form-wdqlfkfp?file=src%2Findex.tsx

arnold.kokot@codahead.com

StackBlitz

Form Array Example (duplicated) - StackBlitz

Run official live example code for Form Array, created by Tanstack on StackBlitz

stormy-gold•7d ago

oh, interesting ... it seems to be because Record<string, Foo> would act this way. However, since DeepKeys is a union of strings, it instead expects the assignment to iterate through all of them and therefore assumes that it must be present so I guess this is actually a TS thing, and we should add an undefined union there.

stormy-gold•7d ago

nevermind, recreated it in typescript. See how | undefined is added to it because noUncheckedIndexAccess is enabled https://www.typescriptlang.org/play/?noUncheckedIndexedAccess=true#code/C4TwDgpgBAYg9nKBeKBvKAzBAuKBnYAJwEsA7AcygF8AoG0SWBAJQgGM5CATZKVj7gB4CJCgBomcAHwBuOh1IEowCAVzw4-TjxSpaCpQHcAFhFIBBNm1V4ylFCoIBtAOQBDUiGDG7LgLo0APSBUKFQAHoA-HQM0ADKcAC2EACqpMRwpLwuWHAuUAA+UC4ARm6ELvTg0BoA6sTeaRmkWty8rVyCCclNmRIaUvKZSo7AAEzqCPWN6ZkdvOi5uIs4xflUEmWEy5irLuv6w8BQJmaW1ni2FGO8o665-kEhYVFAA

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

stormy-gold•7d ago

dependent-tanOP•7d ago

in line 13 should be test2["foo"], then you get only Foo type I think that the metaApi should be either a union with undefined or it should have some kind of a default value, but idk if the default value would corectly represent some default states default value might be bad now that i think about it, shouldn't be isValid: true or false, if no validation was triggered

stormy-gold•7d ago

oops :facepalm: would you mind opening a GH issue for this @Arnold ?

dependent-tanOP•7d ago

on it

Gaming

Programming

undefined formMeta on first render

Did you find this page helpful?