T
TanStack•3y ago
sensitive-blue

Validation in Formik of data coming from React Query

I've got a controlled Dropdown component where options and a possibly selected (default) value comes from my backend. So after retrieving the options and selection those values are stored in react query. Now I want to validate this dropdown (has an option been selected or not) via formik which holds its own data store for validation. So I have two competing stores: react query and formik which needs me to utilize its own store for validation. What is the idiomatic solution to solve this? Do I have to use a useEffect to sync the state from react query to formik or is there another, more elegant way? My useEffect would look something like this: 
const {data} = useQuery(['options'], async () => api.retrieveOptions())

useEffect(() => {
  if(data.selected) setFormikValue("selectedOption", selected)
}, [data, setFormikValue])
const {data} = useQuery(['options'], async () => api.retrieveOptions())

useEffect(() => {
  if(data.selected) setFormikValue("selectedOption", selected)
}, [data, setFormikValue])
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?