invalidateQueries / setQueryData post mutation not triggering the rerender of all consumers
When I invalidateQuery or setQueryData post mutation only component that does the mutation getting the rerender. other components are not rerending.
https://codesandbox.io/p/sandbox/react-query-not-rerendering-on-data-change-fx3fw7?file=%2Fsrc%2Ftodo.tsx
I am not able to trigger rerender for all the consumers of the data.
5 Replies
ratty-blush•2y ago
seems to be a bug in how we inform components about needing to re-render. Your top component
Todo only "observes" loading and error, not data. Your components below observe data. I think both TodoName and CompleteTodo do not re-render because of query data being updated - CompleteTodo renders becaues of the mutation inside of it.
you can see that if you set notifyOnChangeProps: 'all' on your query, which opts out of the render optimization, that everything is rendered correctly.
it's really weird because it should work - lower components observe data, so they should be rendered.
can you please file an issue ?wise-whiteOP•2y ago
Yeah sure, Thanks.
wise-whiteOP•2y ago
Here we go with the issue: https://github.com/TanStack/query/issues/7169
GitHub
invalidateQueries / refetchQueries / setQueryData on mutation succe...
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 mi...
ratty-blush•2y ago
found out the root cause; it's not an issue 🙂
wise-whiteOP•2y ago
Thanks a lot for identifying. Sorry for messing around