How do I declare useMutation return type in react query?

Question

I am making an api to post the new recruit announcement and use the response to proceed further actions.

interface PostRecruitResponse {
  message: string
}

const postRecruitAPICall = async ({ clubId, data, date }: PostRecruitParams, token: string) => {
  const response = await axios.post<PostRecruitResponse>(
    `${process.env.REACT_APP_APIHOST}/club/${clubId}/recruit?semester=${date.semester}&year=${date.year}`,
    data,
    {
      headers: { Authorization: token }
    }
  )
  return response.data.message
}

export const useCreateRecruit = ()  => {
  const { enqueueSnackbar } = useSnackbar()
  const token = useAuthHeader()()
  const queryClient = useQueryClient()

  return useMutation(
    'postRecruit',
    async (values: PostRecruitParams) => {
      const response = await postRecruitAPICall(values, token)
      return response
    }, 
    { onSuccess: () => {
      queryClient.invalidateQueries('recruits')
    },
    onError: error => {
      if (error instanceof AxiosError) {
        const errorMessage = error.response?.data?.message || COMMON_MESSAGE.ADD_FAIL
        enqueueSnackbar(errorMessage, { variant: 'error' })
      } else {
        enqueueSnackbar(COMMON_MESSAGE.UNKNOWN_ERROR, { variant: 'error' })
      }
    }
  })
}

I declared the API like this.

I wanted to use it like

const response = createRecruit.mutate({
      clubId,
      data: { ...utcNewRecruitInfo, contents: editorRef.current?.getInstance().getHTML() ?? '' },
      date
    })
if (response === 'ok') ...

but it says that 'This comparison appears to be unintentional because the types 'void' and 'string' have no overlap.'

Answer 1

Response from the mutation function is stored in mutation.data, or in your code's case, createRecruit.data. There are more examples in ReactQuery's Mutations documentation.

function onClick() {
  createRecruit.mutate(/* ... */);
}

return (
  <>{createRecruit.isSuccess ? createRecruit.data : "not success yet"}</>;
);