How to intialize default values when using with Tanstack Query

[michaelkremenetsky]

In react-hook-form I was going about it like this:

  const { register, handleSubmit, reset } = useForm({
    defaultValues: { sharing: defaults },
  });

  useEffect(() => {
    reset({
      sharing: defaults,
    });
  }, [reset, defaults]);

Any idea how to go about using Tanstack Fom with Tanstack Query?

[morrisseybr]

You can pass the data to de default value with a conditional for when the data is undefined. If the form has not been touched yet, when the data comes, the default value of the form will be updated to the data from react-query.

const { data } = useQuery({
    queryFn: //...
});
const form = useForm({
    defaultValues: {
        value: data ?? "";
    }
};

In this exemple, while data is undefined, the empty string will be used. When the data comes, the value received will be used as default instead. However, if the user type anything on your input before the data comes, the field will be touched and de defaultValue will not be updated (I think it's a good behavior).

[clintonb]

I'm trying to reuse a form for creating and editing. I'm passing defined values for edits, but want to reset the form to an empty state for creation. How can I achieve this?