How to type useFieldContext or useFormContext?

[untold maple]

how to type useFieldContext or useFormContext?

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

[neon skiff]

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

[untold maple]

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

I want to do things like call setFieldValue on other fields

[neon skiff]

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

[untold maple]

thank you mama

[untold maple]

I still having a hard time chose one over another,

so I have multiple ARRAY FIELD, what should i use? withForm or withFieldGroup?

[neon skiff]

• How many forms will use this array field?

[untold maple]

only 1

[neon skiff]

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`}>
}

[untold maple]

why does it have type of never[]

[neon skiff]

you have a typo

filters vs. filter

[untold maple]

nvm, cool! It was actually a different problem

[neon skiff]

weird that the name prop didn't show the error

it usually tells you if you passed it a wrong name

[untold maple]

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

[neon skiff]

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

[untold maple]

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

[neon skiff]

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

[untold maple]

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

[neon skiff]

what do you mean?

[untold maple]

no, actually something else😭

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

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

if (!data) return null

[neon skiff]

It's typed as FunctionComponent, so it seems like React wants you to use a JSX element explicitly

simple enough, if (!data) return <></>

[untold maple]

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

[neon skiff]

you could use Suspensetoo since it's its own section

assuming with useQuery you're using TanStack Query

[untold maple]

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

[neon skiff]

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"

[untold maple]

okay, now it's something else

[neon skiff]

looks like you have cyclic dependencies?

maybe it's something more. Do you use a meta-framework?

[untold maple]

yes, nextjs

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

[neon skiff]

what does your usage of Filters look like

[untold maple]

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

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

[neon skiff]

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

[untold maple]

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

[neon skiff]

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

[untold maple]

oh sh*t, I did not

[neon skiff]

what's up with your type errors not showing in your IDE ...

or are you using jsx?

[untold maple]

it does. I'm just blind.

[untold maple]

@neon skiff 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

[neon skiff]

so that then

[untold maple]

what is the point of defining fieldComponents and formComponents

in createFormHook when I can wrap any of that component with withForm ?