invalidateQueries / refetchQueries / setQueryData on mutation success not triggering the rerender of all consumers

[GokulnathP-TW]

Describe the bug

Triggering invalidateQuery or refetchQueries or setQueryData on success of mutation only rerender the component that does the mutation , other components are not rerending.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/react-query-not-rerendering-on-data-change-fx3fw7?file=%2Fsrc%2Ftodo.tsx

Steps to reproduce

1. Create 2 different components, one that consume the data and another one that updates the data.
2. On success of update (mutation) trigger any of the following function on queryClient (invalidateQuery, refetchQueries, setQueryData)
3. The data update is not triggering rerender of consumer of the data (it rerender the component that triggers the mutation)

Expected behavior

Expecting updation of data to rerender all the consumers of the data.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Mac
• Browser: Chrome 123.0.6312.58

Tanstack Query adapter

react-query

TanStack Query version

v5.28.6

TypeScript version

v4.4.4

Additional context

No response

[TkDodo]

okay I went into this a bit, and it works if I just setQueryData to a newly created todo. I think the problem is that your todo-service returns the same object references, so our structuralSharing sees them as equal and optimizes the re-render away.

If I change it to:

completeTodo: async () => {
  await wait(100);

  const newTodo = { ...todo };

  newTodo.completed = true;
  newTodo.completedBy = "John Doe";

  return newTodo;
},

everything works. I don't think this is an issue that you would get with real API requests.