fair-rose

How to type useFieldContext or useFormContext?

how to type useFieldContext or useFormContext?

export const { fieldContext, formContext, useFieldContext, useFormContext } =
  createFormHookContexts();

export const { fieldContext, formContext, useFieldContext, useFormContext } =
  createFormHookContexts();

41 Replies

multiple-amethyst•2mo ago

Depends on what you plan to use it for. useFormContext is a FormApi that could come from anywhere. It'll be available to any form calling it. - You have access to Subscribe with form-related state and methods - You have no info on what fields the form may have, as it could be any fields useFieldContext<T> is a Field context with the inferred value of T. It's available on fields calling it. - You have access to field state and field-related meta state. - Errors could have different types depending on what validators were used at runtime. Passing typed errors as prop instead is the recommendation. Keep the Philosophy section of the docs in mind

fair-roseOP•2mo ago

i thought i should be able to pass FormSchema to the whole form?

fair-roseOP•2mo ago

I want to do things like call setFieldValue on other fields

multiple-amethyst•2mo ago

use withForm or withFieldGroup for that instead. withForm assumes you want to split one form into multiple segments / files. It‘s the most type safe but least reusable withFieldGroup expects certain fields to be present, so it is more reusable

fair-roseOP•2mo ago

thank you mama I still having a hard time chose one over another, so I have multiple ARRAY FIELD, what should i use? withForm or withFieldGroup?

multiple-amethyst•2mo ago

* How many forms will use this array field?

fair-roseOP•2mo ago

only 1

multiple-amethyst•2mo ago

use withForm you have one parameter needed (the index), but you can pass that to it Say you have foo[${index}]and you'd like to work inside that array in withForm you'd give it the prop index: number, and then create the namespace of this withForm:

render: function Render({ form, index }) {
   const namespace = `foo[${index}]` as const // types it as string literal instead of 'string'
   return <form.AppField name={`${namespace}.bar`}>
}

render: function Render({ form, index }) {
   const namespace = `foo[${index}]` as const // types it as string literal instead of 'string'
   return <form.AppField name={`${namespace}.bar`}>
}

fair-roseOP•2mo ago

why does it have type of never[]

multiple-amethyst•2mo ago

you have a typo filters vs. filter

fair-roseOP•2mo ago

nvm, cool! It was actually a different problem

multiple-amethyst•2mo ago

weird that the name prop didn't show the error it usually tells you if you passed it a wrong name

fair-roseOP•2mo ago

i needed to assert type in defaultValues, otherwise empty strings array will be typed as never

multiple-amethyst•2mo ago

welcome to an irritating gimmick in TypeScript as isn't type safe, satisfies doesn't change the type so the true type-safe way would be to use satisfies FormSchema as FormSchema which is not very fun

fair-roseOP•2mo ago

quick question, can I write useQuery inside function Render() {}?

multiple-amethyst•2mo ago

it's a function component, yes ESLint might complain, but that is likely because you made it an anonymous function or wrote render in lowercase

fair-roseOP•2mo ago

also, I can't default export component defined with withForm

multiple-amethyst•2mo ago

what do you mean?

fair-roseOP•2mo ago

no, actually something else😭

fair-roseOP•2mo ago

do you think render() should have return type React.ReactNode instead of React.JSX.Element?

fair-roseOP•2mo ago

i'm trying to return null when there's no data.

if (!data) return null

if (!data) return null

multiple-amethyst•2mo ago

It's typed as FunctionComponent, so it seems like React wants you to use a JSX element explicitly simple enough, if (!data) return <></>

fair-roseOP•2mo ago

already do that. Thank u. Just wonder if it better.

multiple-amethyst•2mo ago

you could use Suspensetoo since it's its own section assuming with useQuery you're using TanStack Query

fair-roseOP•2mo ago

yes, I'm using TanStack Query. What you mean by using Suspense for this? not sure if I deeply understand Suspense

multiple-amethyst•2mo ago

check out the useSuspenseQuery docs useful if you have no reason to have pending states and just want data Suspense is basically "let the parent component deal with pending state, I don't render until the data exists"

fair-roseOP•2mo ago

okay, now it's something else

multiple-amethyst•2mo ago

looks like you have cyclic dependencies? maybe it's something more. Do you use a meta-framework?

fair-roseOP•2mo ago

yes, nextjs

fair-roseOP•2mo ago

i move the component to the same file. I don't understand why this happen

multiple-amethyst•2mo ago

what does your usage of Filters look like

fair-roseOP•2mo ago

so i have mutiple checkboxes, if checked 2025, 2024, 2023 the values will be like

{ published_in: ["2025", "2024", "2023"] }

{ published_in: ["2025", "2024", "2023"] }

multiple-amethyst•2mo ago

the error implies form is undefined. I mean how is the form created and how is it passed to Filters

fair-roseOP•2mo ago

i tried to see what inside but form (props) was an empty object.

multiple-amethyst•2mo ago

it should look like <Filters form={form} />. I assume you didn't do that, then?

fair-roseOP•2mo ago

oh sh*t, I did not

multiple-amethyst•2mo ago

what's up with your type errors not showing in your IDE ... or are you using jsx?

fair-roseOP•2mo ago

it does. I'm just blind. @Luca | LeCarbonator everytime I import withForm in another component file I get this error. okay so I was export { withForm } = createHookForm() in my page.tsx import { withForm } from "./page.tsx" in my filter.tsx then export default Filters in my filter.tsx import Filters from "filters.tsx" in my page.tsx 🫣 😭 i moved to createHookForm to a seperate file. then it fixed

multiple-amethyst•2mo ago

so that then

fair-roseOP•2mo ago

what is the point of defining fieldComponents and formComponents in createFormHook when I can wrap any of that component with withForm ?

multiple-amethyst•2mo ago

reducing boilerplate for reusability

Gaming

Programming

How to type useFieldContext or useFormContext?

Did you find this page helpful?