national-gold

What is the correct form generic for V1

Hello, I asked a similar question yesterday (thanks all for the help), but wanted to focus the conversation because I'm compromising a lot on typing that I had before V1. In my app, I use forms as props very often. I used to use this type to do that before:

export type FormType<T> = FormApi<T, Validator<T>> &
  ReactFormApi<T, Validator<T>>;

export type FormType<T> = FormApi<T, Validator<T>> &
  ReactFormApi<T, Validator<T>>;

which gave me good typing on fields and everything. But from what I understand it has been removed/replaced. I tried to replace it with:

export type FormType<T> = ReactFormExtendedApi<
  T,
  any,
  any,
  any,
  any,
  any,
  any,
  any,
  any,
  any
>;

export type FormType<T> = ReactFormExtendedApi<
  T,
  any,
  any,
  any,
  any,
  any,
  any,
  any,
  any,
  any
>;

but it seems like it can't infer the type of my field's values and if I want to have a generic component that takes a FormType<any>, then it won't take any form unless I manually type them as FormType<any>. Is there another generic that would be more appropriate, or is there some kind of slot in solution that wouldn't have me rewrite most of my app ? PS: I'm wondering also about generics for field as prop generics

9 Replies

passive-yellow•6mo ago

You're not actually supposed to use the generics at all. From what I heard, that list will only grow, which is fine because they are all inferred from the form props. To get access to the relevant bits in child components, we have the form compositoin API: https://tanstack.com/form/latest/docs/framework/react/guides/form-composition The way I use it, "child forms" are made using withForm(), each form field (TextField, SelectField etc.) uses useFieldContext() and all forms are made with useAppForm()

Form Composition | TanStack Form React Docs

A common criticism of TanStack Form is its verbosity out-of-the-box. While this can be useful for educational purposes helping enforce understanding our APIs it's not ideal in production use cases. As...

national-goldOP•6mo ago

I see, sad that the option was taken away 😦 Thanks still, guess I have lots of work to do

optimistic-gold•6mo ago

Here's another great resource: https://github.com/TanStack/form/discussions/1200#discussioncomment-12363833

GitHub

Compose forms with nested form structure · TanStack form · Discus...

The new createFormHook looks great but it appears that it only works when there's a shared data structure between the child and parent forms. The use case where this applies is when you have a ...

national-goldOP•6mo ago

Thanks

optimistic-gold•6mo ago

I'm actually in a similar situation, using the form with the generic was nice. Currently - my form's default values are provided by a Tanstack query -> does it mean I need to create a hook for fetching the default values and populating the formOptions?

optimistic-gold•6mo ago

@pomsi you should set the defaultValues as you did before, TSF will infer the types from the defaultValues Here's an example: https://tanstack.com/form/latest/docs/framework/react/examples/query-integration

React TanStack Form Query Integration Example | TanStack Form Docs

An example showing how to implement Query Integration in React using TanStack Form.

optimistic-gold•6mo ago

@ksgn Thanks for the example! my form is nested so I need to combine the query approach with this: https://github.com/TanStack/form/discussions/1200#discussioncomment-12363833

GitHub

Compose forms with nested form structure · TanStack form · Discus...

The new createFormHook looks great but it appears that it only works when there's a shared data structure between the child and parent forms. The use case where this applies is when you have a ...

optimistic-gold•6mo ago

does it mean I need to create a hook for fetching the default values

what should that look like? you could do something like this:

defaultValues: {
  firstName: yourQueryData.firstName || "",
  age: yourQueryData.age || 0,
}

defaultValues: {
  firstName: yourQueryData.firstName || "",
  age: yourQueryData.age || 0,
}

passive-yellow•6mo ago

Btw this also works if you're only interested in the types:

defaultValues: { } as MyType

defaultValues: { } as MyType

Gaming

Programming

What is the correct form generic for V1

Did you find this page helpful?