useMutation's isPending stays on undefined after calling mutate

[Slmii]

I have upgraded from v4 to v5 and having trouble with getting the correct values from a useMutation. I have a simple mutation in my app

const { mutate, isPending, status } = useMutation({
		mutationFn: () => {
			return new Promise(resolve => {
				setTimeout(() => {
					resolve(10);
				}, 3000);
			});
		}
	});

when I run mutate the isPending stays on undefined and status becomes loading instead of pending. Strange thing is that when I run this on codesandbox it works as expected...

Is there something I am forgetting with an upgrade? I really cant figure this out.

[TkDodo]

Can you show a running reproduction?

[Slmii]

@TkDodo so I cannot reproduce this in a sandbox, but here's a video of it

Screen.Recording.2024-02-23.at.22.57.09.mov

Here's the code thats running, on version 5.22.2

const Test = () => {
	const { mutate, isPending, status } = useMutation({
		mutationFn: () => {
			return new Promise(resolve => {
				setTimeout(() => {
					resolve(10);
				}, 3000);
			});
		}
	});

	console.log({ isPending, status });

	return (
		<>
			<button onClick={() => mutate()}>TEST</button>
			<p>Typeof Pending: {typeof isPending}</p>
			<p>Boolean Pending: {isPending ? 'true' : 'false'}</p>
			<p>Status: {status}</p>
		</>
	);
};

Result in codesandbox, exact same code

[Slmii]

oh wow, it works now after a server restart 🙃

[osmancakir]

I also have the same issue now. isPending is undefined but isLoading works strangely fine. unfortunately restarting the server didn't help me

// login hook
const login = async ({username, password}) => {
  const {code_verifier, code_challenge} = await pkceChallenge()

  const dataToPost = {
    username,
    password,
    response_type: 'code',
    grant_type: 'authorization_code',
    client_id: CLIENT_ID,
    scope: 'openid profile',
    code_challenge,
    code_challenge_method: 'S256',
  }

  const res = await axios.post('/api/v1/auth/login', dataToPost, {
    maxRedirects: 0,
  })
  let code = new URLSearchParams(res.request?.responseURL.split('?')[1]).get('code')

  let token_data = {
    grant_type: 'authorization_code',
    scope: 'openid profile',
    code,
    client_id: CLIENT_ID,
    code_verifier,
  }
  const {data: tokenData} = await axios.post('/api/v1/oauth/token', token_data)
  setTokenData(tokenData)

  const {data: userData} = await axios.get('/api/v1/auth/me')
  const {data: preferencesData} = await axios.get(`/api/v1/preferences`)

  return {userData, preferencesData}
}

export const useLogin = () =>
  useMutation({
    mutationFn: login,
    onSuccess: ({userData, preferencesData}) => {
      store.dispatch(fetchMeSuccess(userData))
      setLanguagePreference(userData.preferred_language)
      setTimezonePreference(userData.preferred_timezone)
      const {table_configs, id} = preferencesData
      store.dispatch(setInitialTablePreferences({id, table_configs}))
      store.dispatch(loginSuccess())
      store.dispatch(updateLocation(getPrevLocation() || '/'))
    },
    onError: (error) => {
      store.dispatch(loginError(error))
    },
  })

and I call the hook in my FormLogin as const {mutate: login, isPending, error} = useLogin()
Versions:

• "@tanstack/react-query": "^5.24.1",
• "@tanstack/react-query-devtools": "^5.24.1",
  When I console.log "status" it is idle -> loading -> success.

[TkDodo]

if you have an issue, please show a codesandbox reproduction. There is no loading state for mutations in v5:

v5:

query/packages/query-core/src/types.ts

Line 692 in 61f4d74

export type MutationStatus = 'idle' | 'pending' | 'success' | 'error'

v4:

query/packages/query-core/src/types.ts

Line 555 in 716c5d8

export type MutationStatus = 'idle' | 'loading' | 'success' | 'error'