react query. How get response on get request? I get only after second submit

I am making a search component. I specify a name in the request, I get a response and immediately display it.

After the first input submit I get undefined in response, but after the second submit a get what I wanted.

I use react query -> useMutation hook, react-hook-form -> useForm, axios, M-UI

hook useMutation profile.mutation.ts:

import { getUsersList } from '@/services/profileService/profileService'
import { IGetUsersList } from '@/services/types'

const profileConfig = {
  getUsersList: {
    key: 'getUsersList',
    request: async (pageable: IGetUsersList) => {
      const response = await getUsersList(pageable)
      return response.data
    },
  },
}

export const useGetUsersListMutation = () => {
  const { getUsersList: config } = profileConfig
  const state = useMutation(config.request, {
    retry: 10,
    retryDelay: 1000,
    onError(error) {
      console.log('search error', error)
    },
  })
  return state
}

component Search.tsx with bug:

import React from 'react'
import InnerSearch from '@/components/search/InnerSearch'
import SettingsSVG from '@/assets/icons/Settings.svg'
import { Box, Container } from '@mui/material'
import { IGetUsersList } from '@/services/types'
import { useForm } from 'react-hook-form'
import { useGetUsersListMutation } from '@/query/profile/profile.mutation'

const Search = () => {
  const { register, handleSubmit } = useForm<IGetUsersList>();
  const { mutateAsync: mutateGetUsersList, isSuccess, data: resData } = useGetUsersListMutation();

  const onSubmit = (requestData: IGetUsersList) => {

    console.log(requestData); //Object { username: "A" }   always no problem

    mutateGetUsersList(requestData)

    console.log('isSuccess', isSuccess); //on first submit: isSuccess false, on second submit: isSuccess true

    console.log('resData', resData); //on first submit: resData on second submit: resData 'right request'

  };

  return (
    <Container disableGutters sx={{ padding: '0px 10px 0px 10px', }} >
      <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 4 }}>
        <InnerSearch register={register}
          handleSubmit={handleSubmit}
          onSubmit={onSubmit} />
        <SettingsSVG />
      </Box>
    </Container>
  )
}

export default Search

(component InnerSearch include: input and submit button)

I tried using onSubmit function acync&await.

tried add in mutation:

    retry: 10,
    retryDelay: 1000,

I tried to make a state:

const [userlistArray, setUserlistArray] = useState([])
mutateGetUsersList(requestData).then((res)=>{setUserlistArray(res)})

But if I execute console.log, then I get the correct result in then! But userlistArray is undefined. again, in the second submit everything is in order.

upd. Thank you for help! (Also I needed add state) My result:

const Search = () => {
  const [userlistArray, setUserlistArray] = useState([])

  const { register, handleSubmit } = useForm<IGetUsersList>();
  const { mutateAsync: mutateGetUsersList, data: resData } = useGetUsersListMutation();

  const onSubmit = (requestData: IGetUsersList) => {
    mutateGetUsersList(requestData)
  };

  useEffect(()=>{
		setUserlistArray(resData && resData.content);
	}, [resData])


  console.log('userlistArray____', userlistArray); //now it's work!

  return (
    <Container></Container>
  )
}

export default Search

The reason why 'isSuccess' and 'resData' are not immediately updated is due to the nature of the useMutation hook itself. useMutation is asynchronous, and thus isSuccess and resData will not be updated in time to be logged directly after the mutateAsync call within the same onSubmit function.

You should instead rely on the onSuccess callback of useMutation to handle the data when it is actually available, and React Query's status flags (isLoading, isSuccess, isError, etc.) to handle UI changes.

export const useGetUsersListMutation = () => {
  const { getUsersList: config } = profileConfig
  const state = useMutation(config.request, {
    retry: 10,
    retryDelay: 1000,
    onError(error) {
      console.log('search error', error)
    },
    // add this to handle success
    onSuccess(data) {
      console.log('resData', data);
    }
  })
  return state
}

const onSubmit = (requestData: IGetUsersList) => {
    console.log(requestData);
    mutateGetUsersList(requestData);
    // removed console logs here because isSuccess and resData are not updated yet
};

RiQts answer is correct in that due to the requests asynchrony the console logs do not immediately show the result. However once the request responses successfully resData should trigger a re-render of the component, so console logging in the Search function should show that there is no need to trigger the mutation again but that the data gets filled after the request successfully finishes

Somewhat reproduced and working https://codesandbox.io/s/zen-sunset-8r5389?file=/src/index.js

const Search = () => {
  const { register, handleSubmit } = useForm<IGetUsersList>();
  const { mutateAsync: mutateGetUsersList, isSuccess, data: resData } = useGetUsersListMutation();

  const onSubmit = (requestData: IGetUsersList) => {

    console.log(requestData); //Object { username: "A" }   always no problem

    mutateGetUsersList(requestData)
  };

  // isSuccess and resData should automatically update after success
  console.log('isSuccess', isSuccess); 
  console.log('resData', resData);

  return (
    <Container disableGutters sx={{ padding: '0px 10px 0px 10px', }} >
      <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 4 }}>
        <InnerSearch register={register}
          handleSubmit={handleSubmit}
          onSubmit={onSubmit} />
        <SettingsSVG />
      </Box>
    </Container>
  )
}

Edit: I know I'm a bit off topic here, but here is an alternate way to write the mutation hook, use a state to manage the triggering of the useQuery, anyway just my two cents. Looking good in any case

const Search = () => {
  // spread this state to any component that needs the userListData
  const [searchQueryData, setSearchQueryData] = useState<IGetUserList>(null);

  const { isSuccess, data: resData } = useGetUsersListQuery(serchQueryData);

  // ... update the searchQueryData in the form to refetch
  return (
    // ...
  );
}

const useGetUsersListQuery = (serchQueryData) => {
  return useQuery({
    queryKey: ['profilesList', serchQueryData],
    queryFn: async () => { const response = await getUsersList(searchQueryData); return response.data; },
    keepPreviousData: true,
    enabled: searchQueryData !== null,
  });
};