Using a suspending query for initial form data

[codebutler]

Hi,

I am trying to figure out the best practice for using tanstack-query + suspend + react-hook-form.

Here is the problem. Given code like:

export const MyPage: React.FC = () => {
  const { data } = useQuery(myFetchFn, { query: { suspense: true, staleTime: 0, cacheTime: 0 } }); 

  const myForm = useForm({
    defaultValues: data, // This only reads the value once
  });

  // etc...
}

On first load this works great. The page suspends before the useForm and then resumes once data is ready. This is very nice DX - no need to deal with any loading states.

However, if you navigate away from this page and back, the query will re-fire as expected, but it doesn't suspend. This causes the form to load the old data and ignore the updated data (because defaultValues is only read once).

Both of these related discussions explain that there's no way to force a suspend:

• Do not use stale cached data on mount of fresh observer #5695
• Allow to trigger Suspense on every fetch request #4021

How do you recommend handling this case?

Ty!

[TkDodo]

you can use the reactive values api from react-hook-form:

export const MyPage: React.FC = () => {
  const { data } = useQuery(myFetchFn, { query: { suspense: true, staleTime: 0, cacheTime: 0 } }); 

  const myForm = useForm({
    values: data, // This is reactive
  });

  // etc...
}

https://react-hook-form.com/docs/useform#values

[codebutler]

Thanks for looking into this. I mistakenly thought values would overwrite any user input on the form any time the query was re-triggered (or the component re-rendered), but looks like that doesn't happen unless the response data (object instance) changes.

[Cigan12]

How can I use useForm({ values }) with useQuery() when the query depends on form values without causing a circular dependency?
export default function MyPage() {
const form = useForm({
values: data, // data comes from query below
});

const id = form.watch('id'); // query depends on this

const { data } = useQuery({
queryKey: ['product', id],
queryFn: () => fetchProduct(id),
enabled: !!id,
});

return <input {...form.register('id')} />;
}

[TkDodo]

I don’t think you can, you’d need to split up id and put it in a different form

[Cigan12]

Thank you, but with an onSuccess callback, I wouldn't need to handle two different forms — I could just use setValue or reset functions. But now, it seems like using a useEffect that depends on the query data and then resets the form is a better solution.