winsoroaks•17mo ago

how to populate form with default values?

hi team, when i have the following code, it doesnt populate my form with current values in the db because it's undefined for 3 seconds before the values show up. by then, the defaultValues in the useForm have already been populated with empty values. does anyone know how can i fix it? in other words, how can i call the useForm hook after it finishes loading? thanks!

const myShop = useQuery(api.myShopFuncs.getmyShopProfile, {
  clerkOrganizationId: orgId || "",
})

const createMyShopProfileMutation = useMutation(
  api.myShopFuncs.createMyShopProfile
)

const form = useForm<MyShopFormValues>({
  resolver: zodResolver(myShopSchema),
  defaultValues: {
    size: myShop?.size || "",
    areas: myShop?.areas || [],
    features: myShop?.features || [],
  },
  reValidateMode: "onBlur",
})

const myShop = useQuery(api.myShopFuncs.getmyShopProfile, {
  clerkOrganizationId: orgId || "",
})

const createMyShopProfileMutation = useMutation(
  api.myShopFuncs.createMyShopProfile
)

const form = useForm<MyShopFormValues>({
  resolver: zodResolver(myShopSchema),
  defaultValues: {
    size: myShop?.size || "",
    areas: myShop?.areas || [],
    features: myShop?.features || [],
  },
  reValidateMode: "onBlur",
})

8 Replies

erquhart•17mo ago

Guessing you're using react-hook-form, they give this approach for async default values in the docs:

// set default value async
useForm({
  defaultValues: async () => fetch('/api-endpoint');
})

// set default value async
useForm({
  defaultValues: async () => fetch('/api-endpoint');
})

In your case you could make a promise that resolves when your query comes back Hmm trying to think of how to do that idiomatically in this case I think I'd wrap your form along with useForm into a separate component, and skip rendering until myShop !== undefined. Convex team may have a better idea 🙂

lee•17mo ago

if you do const convex = useConvex(); then you can call convex.query(api.myShopFuncs.getMyShopProfile) which returns a promise. Then you can use @erquhart 's async defaultValues idea to await the promises and get the values

winsoroaksOP•17mo ago

wow thanks! looks like it's my lack of familiarity with the react use-form hook after all. anyway, i tried doing it but still running into undefined when it first renders. i should probably move the useQuery one level up the component. do y'all have better suggestion?

defaultValues: async () => {
  const myShopProfile = await convex.query(
    api.myShopFuncs.getmyShopProfile,
    {
      clerkOrganizationId: orgId || "",
    }
  )
  console.log(myShopProfile) // undefined
  return {
    size: myShopProfile?.size || "",
    areas: myShopProfile?.areas || [],
    features: myShopProfile?.features || [],
  }
},

defaultValues: async () => {
  const myShopProfile = await convex.query(
    api.myShopFuncs.getmyShopProfile,
    {
      clerkOrganizationId: orgId || "",
    }
  )
  console.log(myShopProfile) // undefined
  return {
    size: myShopProfile?.size || "",
    areas: myShopProfile?.areas || [],
    features: myShopProfile?.features || [],
  }
},

ballingt•17mo ago

That's pretty weird,

const result = await convex.query(
  api.anyApiFunction,
  anyArgs
)

const result = await convex.query(
  api.anyApiFunction,
  anyArgs
)

should never return undefined. It could possibly return null if the query function returns undefined. Could you try changing the console.log() to something like

console.log("myShopProfile:", myShopProfile);

console.log("myShopProfile:", myShopProfile);

just to confirm?

winsoroaksOP•17mo ago

ahh you're right. my bad, it's because the anyArgs passed into the function is undefined too... 😂 looks like the only way i can get around this is to wait for the values to show up before im able to pass them thanks all!! 🙂 on a side note, is it possible do sth like Awaited<ReturnType<api.anyApiFunction>>?

ballingt•17mo ago

Totally, this almost works as you've written it

ballingt•17mo ago

ballingt•17mo ago

You don't need the Awaited if you get it off of the api object, return types have already been transformed there.

how to populate form with default values?

Did you find this page helpful?