use query with react-hook-form provider (context)

[dohomi]

Hello

I use react-hook-form provider but the values are not recognised by the form context while the the result is actually there:

const club = useQuery({
        suspense: false,
        staleWhileRevalidate: true,
        prepare({query, prepass}) {
            prepass(query.club_by_pk, 'id', 'name', 'sport')
        }
}).club_by_pk({id: id || ''}) 

if(!club){
  return <Spinner/>
}

return (
<FormProvider defaultValues={{
  id: club.id
  name: club.name
  sport: club.sport
}}>
  {club.name} ==> this works and prints the name
  // => but the form context of name, sport, id remains empty
</FormProvider>
)

The context of the form provider does not recognise the values of club.name or club.sport. the values indeed are there and the result from the database works.

Is there anything missing that the values of a query is used outside of render the values but used as context value?

[PabloSzx]

might be that it doesn't like the fact that the gqty scalars return undefined on the first render? so you might have to add a bunch of ?? null or ?? "" for the default values to catch the actual values

[dohomi]

@PabloSzx will the scalars all be true at the same render or can there be a delay?

[vicary]

@dohomi Unless you are using the prepare option, first render always returns undefined. Query values exist only after a successful fetch which triggers rendering the 2nd time.