useMutate, onSuccess gives me undefined as data

[LXDamm]

Is there a gotcha involved with the onSuccess callback in useMutate?

I'm using useMutate to post a message to the backend. In Network in Chrome I get a response I'm expecting, but in the onSuccess callback data is still undefined. I looked around the net and it looks like I'm using it correctly but still no actual data in data.

  const { mutate: mutateMessage} = useMutation(({message}) => {
    if (state.originalMessageId) {
      replyByMessageId(state.originalMessageId, message)
    } else { 
      chatMessage(message)
    }
  },
  {
    onSuccess: data => {
      const nextState = {...state, originalMessageId: data?.data.id}
      setState(nextState)
      console.log(data)
    },
    onError: (error) => {
      console.error(error)
    },
    mutationKey: 'replyMessageById'
  })

  useEffect(() => {
    setState({...state, originalMessageId: 1})
  }, [])

  useEffect(() => {
    console.log(state)
  }, [state])

The console.log(data) prints undefined and even the state doesn't seem to get updated with an actual id, only undefined.
This is my first project working with React Query and someone else initially used it in the project so I may be missing something, but I tried a lot of things now and I can't find anything on the net about my problem except in issue here.

I'm using this code in a custom hook.

[TkDodo]

The gotcha is that your mutation function doesn't return anything:

{message}) => {
    if (state.originalMessageId) {
      replyByMessageId(state.originalMessageId, message)
    } else { 
      chatMessage(message)
    }
  }

if a function doesn't return anything, it returns undefined implicitly, which is what you'll then get. So you need to return the Promise from your data fetching function to react-query for it to work.

[LXDamm]

Ah, I see, the original code probably did that part right and I missed that part when I refactored, Thanks, hopefully this is the last puzzle on my project.

[LXDamm]

it works now, Thanks for the help.

[Asinging]

The gotcha is that your mutation function doesn't return anything:

{message}) => {
    if (state.originalMessageId) {
      replyByMessageId(state.originalMessageId, message)
    } else { 
      chatMessage(message)
    }
  }

if a function doesn't return anything, it returns undefined implicitly, which is what you'll then get. So you need to return the Promise from your data fetching function to react-query for it to work.

Thank you so much! finally fix an issue that has taken me 2days of thorough web searching

[jrnxf]

damn this just got me good 😆

[javierguzman]

I get this problem if I use invalidateQueries inside onSuccess. Is this the expected behavior?

const useCreateConversation = () => {
  const queryClient = useQueryClient();
  return useMutation(
    (conversationProps: CreateConversationProps) =>
      createConversation(conversationProps),
    {
      onSuccess: () => {
        queryClient.invalidateQueries(['conversations']);
      }
    }
  );
};

If I remove the invalidateQueries then data is filled with data.

[louis-young]

Hi 👋

Please open a new discussion with more context and ideally a minimal reproducible example so we can try and help you 🙂