React Query v3 to v4

[ashishjmeshram]

We are trying to migrate from react. query v3 to react query v4.

Following same code is working differently in v3 and v4.

in v4 console output is like below

refresh called
MutateDemo.tsx:24 {data: Array(100), status: 200, statusText: '', headers: AxiosHeaders, config: {…}, …}
MutateDemo.tsx:25 setting data in refresh
MutateDemo.tsx:9 useEffect called
MutateDemo.tsx:10 isSuccess true
MutateDemo.tsx:11 data null
MutateDemo.tsx:15 in else - Resetting data

and in v3 console output is like below.

refresh called
MutateDemo.tsx:24 {data: Array(100), status: 200, statusText: '', headers: AxiosHeaders, config: {…}, …}
MutateDemo.tsx:25 setting data in refresh
MutateDemo.tsx:9 useEffect called
MutateDemo.tsx:10 isSuccess true
MutateDemo.tsx:11 data [object Object]
MutateDemo.tsx:13 in if

In v4, data is not getting set because of which in v4 flow does not go to if block. It always goes to else block.

If you see last two lines of output console. you will see the difference.

Why such behavior in v4?

import { useMutation } from "@tanstack/react-query";
import axios from "axios";

export const useUpdate = (): any => {
  const result = useMutation(async () => {
    const updateResponse = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    return updateResponse;
  });
  return result;
};

import React from "react";
import { useUpdate } from "./use-update";

export default function MutateDemo() {
  const { mutateAsync: update, isSuccess } = useUpdate();
  const [data, setData] = React.useState<any>(null);

  React.useEffect(() => {
    console.log("useEffect called");
    console.log("isSuccess " + isSuccess);
    console.log("data " + data);
    if (isSuccess && data) {
      console.log("in if");
    } else {
      console.log("in else - Resetting data ");
      setData(null);
    }
  }, [data, update, isSuccess]);

  const refresh = async () => {
    console.log("refresh called ");
    try {
      const data = await update();
      console.log(data);
      console.log("setting data in refresh");
      setData(data);
    } catch (e) {
      throw new Error(`${e}`);
    }
  };

  return <button onClick={() => refresh()}>Click me</button>;
}

https://codesandbox.io/p/sandbox/frosty-dan-wnfssc

[TkDodo]

hard to say, different batching probably. I'm not sure what you're trying to achieve with that code though. Are you aware that useMutation returns a data field that will be the data returned from the mutationFn ?

[ashishjmeshram]

Its a legacy code. I am trying to upgrade from v3 to v4 and then this legacy code is breaking.

I also suspect its something to do with batching.

One thing I noticed, if I use following code then it breaks. This is basically React 18 way to render using createRoot.

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

But if I use older way before react 18 like below, then it works

render(<App />, document.getElementById("root"));

So, may be something to do with React 18 being used.