Data from React Query don't show in useForm's default values

[TomasBurianTheOne]

I have a page where I want to edit user's details and I download the user's data from React Query + axios. Then I have a Form with inputs where I want to show the downloaded data (name, address, etc), but when I tell the useForm that I want anything from this data in defaultValues, all the inputs show empty.
How can I overcome this and be able to show the data in each respective input for the user to edit?

[Sajarin-M]

You can use the reset function in RHF to reset the form after data arrives from the server.

const { data } = useQuery()
const { reset } = useForm()
useEffect(() => { 
  if (data) { 
    reset(data)
  } 
}, [data, reset])

[Moshyfawn]

For data that comes in "later" than the initial render/reactive values, which may change on background refetch, consider using the values prop instead.defaultValues is cached once and never changes unless the form is reset as mentioned in https://github.com/orgs/react-hook-form/discussions/11946#discussioncomment-9580865.

[GenhaoLi]

This should be a cleaner and better option than the useEffect and reset method. Thanks!

[riotrah]

Does values accept promises/async fns, such that when they're loading, isLoading is set to true? If not, that might be a no-go if someone wants to use isLoading to be the source of truth for a form's initial loading state (which is my org's case).

Also, passing the data from useQuery to values or with reset(data) in a useEffect, will mean that your form's values change every time data does, clobbering any changes from user input - which you might not want (in my use cases, I never do). You could maybe do a check for isDirty in the effect tho. And I don't know how values works well enough to know if values changes clobber user changes.

You could set your useQuery stale/cache times super high or prevent refetches otherwise, but that might not be what you want if you want to use up-to-date data for something in the component other than form initial state. For example, in one of our cases, we needed latest data for validation ("This name is already used by another Foo") but cached data for the initial form state.

If you want to continue to use default-values and useQuery, here's what I do:

apologies if my js pseudocode is incorrect, I only use r-h-f in a clojure wrapper

const queryArgs = { ... }
const { fetchQuery } = useQueryClient() ;; for default-values
const { data } = useQuery(queryArgs) ;; for up-to-date validation

const defaultValues = () => fetchQuery(queryArgs) ;; fetchQuery returns a promise
const resolver = (values) => data.includes(values.name) && "Name taken" ;; needs latest data

const { ... } = useForm({ defaultValues, resolver })

const { isLoading } = useFormState()

if (isLoading) {
	return <Spinner> Loading initial data... </Spinner>
} else {
	... ;; form is ready
}

[waynesbrain]

Note for anyone else looking: It seems like if you set async defaultValues AND values under a misguided conception that values will display briefly while waiting for defaultValues to finish and set isLoading to false... that is not how it works.

What I am seeing is that if you set async defaultValues AND values then isLoading stays true forever, the defaultValues() function never gets called and you will get errors when registering because it will try to set properties on the defaultValues() function for some reason which will show up as an error:

 Cannot assign to read only property 'name' of function <...your loader...>