TanStackT
TanStack2y ago
1 reply
faint-white

useMutation optimization question

Why is my first render always undefined but not the next one

import { useMutation, useQuery } from '@tanstack/react-query';
import { Form, Formik } from 'formik';
import Link from 'next/link';
import { FormEvent, FormEventHandler, useState } from 'react'
import axios from 'axios'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'


interface MyFormValues {
  email: string;
  password: string;
}

export default function Login(){

    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    
    const initialValues: MyFormValues = {
      email: '',
      password: ''
    }

    const { mutate, data, isSuccess, isError } = useMutation({
      mutationFn: async () => {
        const authResponse = await axios.post('http://localhost:8080/auth/login', {
          email, password
        }).then((res) => res.data).catch((error) => console.log("heb error"))
        
        return authResponse
      }
    })
image.png
Was this page helpful?