Formik: Recommended way to set initialValues from async api call

[dem0nbruce]

❓Question

What is the recommended/best practice way to set the forms values when loading data from an asynchronous api call?

My use case involves using redux to load data into my components props and binding it to initialValues:

<Formik enableReinitialize={true} initialValues={this.props.user}>
...
</Formik>

This however throws the following error because this.props.user is initially undefined:

Warning: A component is changing an uncontrolled input of type undefined to be controlled.

Is this the recommended/best practice way to load data into a form? If so, how would I resolve the error above?

[akhil-gautam]

Are you using this component inside some other component from where you are passing data?
It would be better if you initialize the form with empty values like below:
const initialData = { user: { email: '', name: '', } }
In this way, it won't throw any errors.

A bit more code block sample will make the community easy to understand.
Hope this works for you.

[jaredpalmer]

You pass them as props to initialValues

[akhil-gautam]

You pass them as props to initialValues

I think he is already using props but using Redux's HOC(connect).
Are you saying to pass the props from parent component?
Alternatively, he can initialize the _user_ in the reducer also if is sticking to redux.

[davemooreuws]

@dem0nbruce Just have a default value for user, so you will always have an object as initialValues.

const { user = {} } = this.props;
return (
<Formik enableReinitialize={true} initialValues={user}>
...
</Formik>
)

[dem0nbruce]

@davemooreuws Your solution defaulting the user field values worked for me.

[aleksey-pro]

What if I make update data in form? It's necessary to save last loaded input values in form as default values. In this case initial data will change, and cannot be empty.

[NKBelousov]

@davegahn yeah, I have similar case. Would like to have an ability to merge updated form with new initial values myself

@jaredpalmer is there a way to do that right now?

[zach-watrhub]

@aleksey-pro did you ever resolve that use case? I am running into the same issue at the moment - unable to keep field values from other fields when the API-dependent field is updated via initialValues with enableReinitialize

[john-dominguez]

@aleksey-pro did you ever resolve that use case? I am running into the same issue at the moment - unable to keep field values from other fields when the API-dependent field is updated via initialValues with enableReinitialize

I believe you have the same issue i had. I am fetching the initialized formik data onComponentMount, and was getting the stated error above.
I'm using Graphql/Apollo on my backend/frontend, data is the returned response from the server:

The following gets called when loading the component.

const { data, loading, refetch } = useQuery(query, {
    variables: { id }
  })

On the Formik Component i set the following:

initialValues={getData()}
enableReinitialize={true}

The key is getData:
const getData = () => data?.employee || tempData

Where tempData is just an object with the field value keys:
const tempData = {id: '', name''}

[fmozaffari]

@aleksey-pro did you ever resolve that use case? I am running into the same issue at the moment - unable to keep field values from other fields when the API-dependent field is updated via initialValues with enableReinitialize

I set the Formik's initial value to a local state and updated that state when I got new data to populate the form. It worked after I set enableReinitialize to True

[dagenius007]

I am using useFormik instead , how do I set the values from api call in my redux action passed as props to my component

[Andy-ZYA]

I really don't understand how it works...

[halberio]

const { user } = this.props; 

return ( 
<Formik 
enableReinitialize={true} 
initialValues={{
 name: user.name ? user.name : "",
 age: user.age ? user.age : ""
 }} 
> ... 
</Formik>

[kilinkis]

but how can you have default values for fields you don't know?
I mean, in a dynamic form for example, where you'll get the fields from an API.