T
TanStack17mo ago
ambitious-aqua

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
}
})
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
}
})
No description
1 Reply
correct-apricot
correct-apricot17mo ago
.catch((error) => console.log("heb error")) transforms your promise into a Promise<void> that returns undefined https://tkdodo.eu/blog/react-query-fa-qs#logging
React Query FAQs
Answering the most frequently asked React Query questions

Did you find this page helpful?