How to fetch data to use in useForm initialValues?

[skorphil]

Hi, i was following @TkDodo article https://tkdodo.eu/blog/react-query-and-forms, but still couldn't figure out how to apply it in my case.
Can you help me implement this if i want to move useQuery logic outside of a component, which shows loading GUI state

Scenario:

1. MyFormProvider
   a. fetches data useQuery,
   b. creates FormContext where stores form values and my custom methods
   c. somehow set initialValues for form from fetched data and put it in FormContext so other components can access it
2. Form is getting state of fetch and draw GUI accordingly
3. InnerFormComponent uses initialValues, my custom methods and useForm default methods(updating values, registering field etc)

MyFormProvider
Component where I want to place most form logic: I want fetch here and i also want to create formContext here, which will contain form and some of my custom methods.

const [FormProvider, useFormContext, useForm] = createFormContext(); // I'm using Mantine form hook, but i believe it's very similar to traditional useForm

function MyFormProvider({ children }) {
// Here i want to fetch latestRecord which has to be used as initialState for my form
const { isLoading, error, data: latestRecord, isFetching, isSuccess } = useQuery({
    queryKey: ['latestRecord'],
    queryFn: () => getLatestRecord(),
    staleTime: Infinity,
  })

// --Variant1--
const form = useForm({initialValues: { recordInstitutions:latestRecord}}) // This is NOT WORKING, because latestRecord is undefined at this stage
// ----

// --Variant2--
const form = useForm()

useEffect(() => {
    if (isSuccess) {
      form.setInitialValues({
        recordInstitutions: latestRecord,
      });
      form.reset() // this executes infinite reloading of component
      // OR setValues also results in endless loop and Warning: Maximum update depth exceeded
      form.setValues({recordInstitutions: latestRecord})
    }
  }, [isSuccess, latestRecord, form]);
// ----

const contextData = {
	form,
	// Here i want my custom handlers, which will be used by form components
	addInstitution: () => addInstitution(form),
        deleteInstitution: (institutionId) => deleteInstitution(institutionId, form),
        restoreInstitution: (institutionId) => restoreInstitution(institutionId, form),
}

return (
    <FormProvider form={contextData}>
	    {children} // here will be my Form
    </FormProvider>
  )
}

Form
Root form component, which need to reflect state of fetching

const state = QueryClient.getQueryState(['latestRecord'])
if (state.status == 'success') { 
    // FormInnerElement will use data i.e: ({...form.getInputProps(`recordInstitutions.${institutionId}.institutionName`)})
    return (<FormInnerElement>)
} else (latestRecord still fetching or error etc) {
    // here will be some loading(error) GUI state
    return ('loading...')
}

InnerFormComponent
Component, which will use custom methods and data from useFormContext

...
const {
    form,
    deleteInstitution // my custom method from MyFormProvider
  } = useFormContext()
...
<Button onClick={() => deleteInstitution(institutionId)}>
Delete
</Button>
...
<TextInput label="Country" {...form.getInputProps(`recordInstitutions.${institutionId}.institutionCountry`)}/>

What is appropriate way of fetch data with ReactQuery and then pass it to useForm as initial values?

[skorphil]

Again noone answered so i came up to this solution with useEffect:
It seems that classic useForm has special prop value, however in Mantine's useForm there is no alternative. I used useEffect to update values:

useEffect(() => {
    if (isSuccess && latestRecord) {
      form.setValues({'recordInstitutions' : latestRecord});
      form.resetDirty({'recordInstitutions' : latestRecord});
    }
  }, [isSuccess, latestRecord]); // I removed `form` dependency to avoid infinite loop

[Gus007-BR]

Dude. You are my hero. This has been a total headache for me and your answer really helped. Thank you!

[TkDodo]

I would move handling the loading state up to the MyFormProvider and the form state down to another child of the Provider:

// Provider
const MyProvider = ({ children }) => {
  const { data, status } = useQuery(...)

  if ( status === 'success') {
    return <MyProviderWithData data={data}>{children}</MyProviderWithData>
  }

  return 'loading...'
}

const MyProviderWithData = ({ data, children }) => {
  const form = useForm({initialValues: { recordInstitutions:data}})

  ...

}

this is exactly the same as the "split it up" approach in the article, just on a provider level ...