React query useMutation + axios post keeps returning data as "undefined"

Question

I'm new to react-query. I'm trying to use it along with axios to post data, and while the data in the backend is updated successfully, react query keeps outputting data as undefined which is a problem because I'm trying to get feedback from the API call

const {mutate, isLoading} = useMutation(() => {postFunction(rowData)}, {

      onSuccess: data => {
        console.log(data)
        alert(data['message'])
      },
      onError: data => {
        alert(data['message'])
      }
  })

For context the axios function used to post the data looks like the following:

 async function editEventLines(data){
      const response = await axios.post(`/api/saleOrders/updateEvent`, {data: data, pk:id})
      console.log(response.data)
      return response.data
    }

The mutate function from useMutation is called via a button component in React:

<Button loading = {isLoading} disabled = {disabled} onClick = {mutate}> Save Changes </Button>

If you see the console.log statements, it seems as though console.log in the useMutation function is called before the console.log in the axios function on the console, which is why I think data is coming out as undefined. Do you guys know why I'm having this issue?

Tomas Vancoillie · Accepted Answer · 2022-09-02 06:29:21Z

1

You should return your mutation function in the useMutation hook. By wrapping it in brackets, the function doens't return a promise and it should as described in the docs.

... = useMutation(() => postFunction(rowData), ...

answered Sep 2, 2022 at 6:29

Tomas Vancoillie

3,8682 gold badges36 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rodd · Accepted Answer · 2023-10-16 15:57:54Z

0

You should always return from your mutationFn.

const {mutate, isLoading} = useMutation({
    mutationfn : (rowdata) => {
        return postFunction(rowdata)
    },
    // Or just write :
    // mutationFn : postFunction,

    onSuccess: data => {
        console.log(data)
        alert(data['message'])
    },

    onError: data => {
        alert(data['message'])
    }
  })

answered Oct 16, 2023 at 15:57

rodd

112 bronze badges

Collectives™ on Stack Overflow

React query useMutation + axios post keeps returning data as "undefined"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related