useMutation(): different components are not re-rendered when cache is updated

[ashishjmeshram]

We are migrating from v3 to v4.

Our codes are starting to break where we are using useMutation and in onSuccess callback of useMutations we are trying to Optimistically update to the new value by using queryClient.setQueryData as shown below.

queryClient.setQueryData(USER_KEY, { ...previousUser });

This used to work in react query v3 but not working in react query v4.

Surprisingly, this code works if useQuery and mutate function are in same component but not in different component.

So, possible solution is to use structuralSharing:false or update the object in immutable way.

But I am confused and not getting as why it works in same component.

Below is an excerpt of the cache update code from sandbox

export const useUpdateSingleUser = (): any => {
  const queryClient = useQueryClient();

  const result: any = useMutation(
    async (updatedUser: any) => {
      const res = await fetch("https://jsonplaceholder.typicode.com/Users/1", {
        method: "PUT",
        body: JSON.stringify(updatedUser),
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
      });
      const data = res.json();
      return data;
    },
    {
      onSuccess: async (data: any, updatedUser: any) => {
        await queryClient.cancelQueries(USER_KEY);
        let previousUser = queryClient.getQueryData<any[]>(USER_KEY) || {};
        previousUser.website = data.website;
        queryClient.setQueryData(USER_KEY, { ...previousUser });
      },
    }
  );

Above code seems to work if useQuery and useMutation are called from a single component.

SingleUserUpdateAll.tsx

  const { data: user } = useGetUserById();
  const { mutateAsync: updateUser } = useUpdateSingleUser();

But it does not work if they are in the different component.

SingleUser.tsx

export default function SingleUser() {
  console.log("User rendered");
  const { data: user } = useGetUserById();

  return (
    <>
      {user && (
        <>
          {user.name} <br />
          {user.email} <br />
          {user.website} <br />
        </>
      )}
    </>
  );
}

SingleUserUpdate.tsx

export default function SingleUserUpdate() {
  const { mutateAsync: updateUser } = useUpdateSingleUser();

  return (
    <>
      <button
        onClick={() => {
          updateUser({
            email: "[email protected]",
            name: "John Doe",
            username: "johndoe007",
            id: 1,
            website: "www.gmail.com",
          });
        }}
      >
        Update User with ID 1
      </button>
      <br />
      <br />
    </>
  );
}

If I use structuralSharing:false in useQuery then it works.

export const useGetUserById = (): any => {
  const fetchUser = async () => {
    await delay(1000);
    const { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/users/1"
    );
    return data;
  };

  const result: any = useQuery({
    queryKey: USER_KEY,
    queryFn: fetchUser,
    structuralSharing: false,
  });

  return result;
};

So, without structuralSharing:false it does not re-render SingleUser.tsx component which displays updated user.

Now this particular behaviour is specific to react query v4. This works fine in v3 even without structuralSharing:false .

But, I see that structuralSharing:true by default even in react query v3.

So, whats breaking in v4?

[TkDodo]

you need to make updates in a fully immutable way. This is not an immutable update:

let previousUser = queryClient.getQueryData<any[]>(USER_KEY) || {};
previousUser.website = data.website;
queryClient.setQueryData(USER_KEY, { ...previousUser });

https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses#immutability