Syncing TanStack Query data with Form State without `useEffect`?

Hey all! I have a checkout flow where shipping options are fetched via

useSuspenseQuery

useSuspenseQuery

based on the user's address.
I need to auto-select the first shipping method as soon as the data is available. Since the data is dynamic (fetch-on-demand), I can't easily use

defaultValues

defaultValues

useForm

useForm

.
Is the standard pattern to just use a

useEffect

useEffect

inside the component that consumes the query? I feel like I'm "fighting" the state sync, but I don't see a

transform

transform

onSuccess

onSuccess

hook in the Form API that fits this.
Code snippet of my current sync logic:

  useEffect(() => {
    if (data.length > 0 && !selectedValue) {
        form.setFieldValue("shipping_option_code", data[0].id);
    }
  }, [data, selectedValue])

  useEffect(() => {
    if (data.length > 0 && !selectedValue) {
        form.setFieldValue("shipping_option_code", data[0].id);
    }
  }, [data, selectedValue])

TanStack•2mo ago•

9 replies

sad-indigo

Syncing TanStack Query data with Form State without `useEffect`?

Hey all! I have a checkout flow where shipping options are fetched via

useSuspenseQuery

useSuspenseQuery

based on the user's address.
I need to auto-select the first shipping method as soon as the data is available. Since the data is dynamic (fetch-on-demand), I can't easily use

defaultValues

defaultValues

useForm

useForm

.
Is the standard pattern to just use a

useEffect

useEffect

inside the component that consumes the query? I feel like I'm "fighting" the state sync, but I don't see a

transform

transform

onSuccess

onSuccess

hook in the Form API that fits this.
Code snippet of my current sync logic:

  useEffect(() => {
    if (data.length > 0 && !selectedValue) {
        form.setFieldValue("shipping_option_code", data[0].id);
    }
  }, [data, selectedValue])

  useEffect(() => {
    if (data.length > 0 && !selectedValue) {
        form.setFieldValue("shipping_option_code", data[0].id);
    }
  }, [data, selectedValue])

Syncing TanStack Query data with Form State without `useEffect`?

Syncing TanStack Query data with Form State without `useEffect`?

Similar Threads