Theo's Typesafe Cult•3y ago

[SOLVED] How to get data using useQuery, then update it using useMutation without reseting inputs?

I'm using React-hook-forms in combination with T3v10 and I've come to a problem I don't have a solution to.... It's essentially a user profile form. I want to get the user's data with useQuery, then set those values as the default ones for the inputs, and when it's saved with useMutation it should keep the new data. Which is basically this part:

const methods = useForm({
    resolver: zodResolver(UpdateUserFinanceSettingSchema),
  })

  const getCoachData = trpc.coaches.getCoachSettings.useQuery();

  const updateSettingsMutation = trpc.users.updateFinanceSettings.useMutation();

  const handleSaveChangeSettings = async (e: FieldValues) => {
    e.preventDefault();

    if (!methods.formState.errors) {
      updateSettingsMutation.mutate({
        iban: methods.getValues("iban"),
        swift: methods.getValues("swift"),
        company_name: methods.getValues("company_name"),
        country: methods.getValues("country"),
        county: methods.getValues("county"),
        city: methods.getValues("city"),
        company_address: methods.getValues("company_address"),
        company_address2: methods.getValues("company_address2"),
        zipCode: methods.getValues("zipCode"),
        ceo: methods.getValues("ceo"),
        company_phone: methods.getValues("company_phone"),
        vat: methods.getValues("vat"),
      })
    } 
  };

const methods = useForm({
    resolver: zodResolver(UpdateUserFinanceSettingSchema),
  })

  const getCoachData = trpc.coaches.getCoachSettings.useQuery();

  const updateSettingsMutation = trpc.users.updateFinanceSettings.useMutation();

  const handleSaveChangeSettings = async (e: FieldValues) => {
    e.preventDefault();

    if (!methods.formState.errors) {
      updateSettingsMutation.mutate({
        iban: methods.getValues("iban"),
        swift: methods.getValues("swift"),
        company_name: methods.getValues("company_name"),
        country: methods.getValues("country"),
        county: methods.getValues("county"),
        city: methods.getValues("city"),
        company_address: methods.getValues("company_address"),
        company_address2: methods.getValues("company_address2"),
        zipCode: methods.getValues("zipCode"),
        ceo: methods.getValues("ceo"),
        company_phone: methods.getValues("company_phone"),
        vat: methods.getValues("vat"),
      })
    } 
  };

Firstly, although it's not essentially T3, does anyone know how to set the default data? And secondly, with the way I did it when I submit the form it sets the data back to the one it got from useQuery, even if it fails because of incorrect params, which should only show error message.

1 Reply

JulieCezar•3y ago

Solved it! I followed this post and it worked https://stackoverflow.com/questions/62242657/how-to-change-react-hook-form-defaultvalue-with-useeffect It boils down to React hook forms, where you need to set the default values. But the problem is you don't get the data immediately from useQuery, so you need to listen to changes to it and then reset the form.

const getUserPasswordSettings = trpc.auth.getPassword.useQuery();

  const methods = useForm({
    resolver: zodResolver(UpdateUserPasswordSettingSchema),
    defaultValues: useMemo(() => {
      return {
        password: getUserPasswordSettings.data,
        confirmPassword: ""
      }
    }, [getUserPasswordSettings.data])
  })

  useEffect(() => {
    methods.reset({
      password: getUserPasswordSettings.data,
      confirmPassword: ""
    });
  }, [getUserPasswordSettings.data, methods]);

const getUserPasswordSettings = trpc.auth.getPassword.useQuery();

  const methods = useForm({
    resolver: zodResolver(UpdateUserPasswordSettingSchema),
    defaultValues: useMemo(() => {
      return {
        password: getUserPasswordSettings.data,
        confirmPassword: ""
      }
    }, [getUserPasswordSettings.data])
  })

  useEffect(() => {
    methods.reset({
      password: getUserPasswordSettings.data,
      confirmPassword: ""
    });
  }, [getUserPasswordSettings.data, methods]);

Stack Overflow

How to change React-Hook-Form defaultValue with useEffect()?

I am creating a page for user to update personal data with React-Hook-Form. Once paged is loaded, I use useEffect to fetch the user's current personal data and set them into default value of the fo...

Gaming

Programming

[SOLVED] How to get data using useQuery, then update it using useMutation without reseting inputs?