Mhl
Mhl

Reputation: 1

Tanstack options don't work in useMutation

I am trying to call a useMutation functon, but options like 'onSuccess' and others don't work. May be I have some problems with syntax or something else, but I can't find it. This function don't return anything.

mutate function:

      const [type, setType] = useState('login')

      const {register, handleSubmit, formState: {errors}, reset} = 
    useForm({
        mode: 'onChange'
      })

      const {mutate, isLoading} = useMutation(['auth'], 
      ({email, password}) => authService.main(email, password, type), 
      {
        onSuccess: (data) => {
          alert('success')
          reset()
        }
      })

onSubmit:

      const onSubmit = (data) => {
      mutate()
      }

Auth service:

    import Cookies from 'js-cookie'
    import { $axios } from '../api'

    class authService {
      async main(email, password, type) {
        try {
          const { data } = await $axios.post(`/auth/${type}`, {
            email,
            password
          })

          if (data.token) Cookies.set('red', data.token)
      // alert('Success!')
          return data
        } catch (error) {
          alert('Wrong email or password!')
          throw new Error(error)
        }
      }
    }

    export default new authService()

console error

I tryed to redo this function in many ways, but all of them don't work. I am expecting to get alert 'success' if function successed and to mutate the data.

my unlucky tries:

    const {mutate, isLoading} = useMutation({
      ['auth'] : ({email, password}) => AuthService.main(email, password, type),
      onSuccess: data => {
        alert('success')
        reset()
      }
    })

    const {mutate, isLoading} = useMutation({
      ['auth'] : (email, password) => authService.main(email, password, type),
      onSuccess: data => {
        alert('success')
        reset()
      }
    })

    const {mutate, isLoading} = useMutation({
      mtKey: ['auth'],
      mtFunc: ({email, password}) => authService.main(email, password, type),
      onSuccess(data) {
        alert('success')
        reset()
      }
    })

    const {mutate, isLoading} = useMutation({
      ['auth'] : authService.main(email, password, type), 
      onSuccess: (data) => {
        alert('success')
        reset()
      }
    })

    authService.main('[email protected]', '123456', 'login')
      const {mutate, isLoading} = useMutation({
      mtFunc: mutation,
      onSuccess: (data) =>{
        alert('success')
        reset()
      }
    })

    const mutation = () => {authService.main('[email protected]', '123456', 'login')}
  
    const {mutate, isLoading} = useMutation({
      mtFunc: mutation,
      onSuccess(data) {
        alert('success')
        reset()
      }
    })

Upvotes: 0

Views: 1345

Answers (1)

Mhl
Mhl

Reputation: 1

Keys solved the problem

const {mutate, isLoading} = useMutation({
  mutationKey: ['auth'],
  mutationFn: ({email, password}) => {authService.main(email, password, 
  type)},
  onSuccess: (data) => {
    alert('success')
    reset()
  }
})

Upvotes: 0

Related Questions