Data refresh don't trigger useEffect
Can someone please explain why in below example when I invalidate or call refetch, It calls the API but don't trigger the
useEffect on line 112.
https://codesandbox.io/s/epic-bird-dr9sw2?file=/src/index.jsCodeSandbox
epic-bird-dr9sw2 - CodeSandbox
epic-bird-dr9sw2 using axios, broadcast-channel, react, react-dom, react-query, react-scripts, stop-runaway-react-effects, styled-components
3 Replies
extended-salmonOP•3y ago
@Tanner Linsley
flat-fuchsia•3y ago
Because the data does not change at all?
See structural sharing. Disable it in the useQuery and you will trigger the effect
other-emerald•3y ago
In your example couple of points to note.
* You don't need to use refetch if you are invalidating the query.
* You are not correctly invalidating the query key. You've fetched the post as
["posts", postId] but you are invalidating ["post", postId]. These are not the same.
See the docs about query invalidation, this can be easily messed up.
https://tanstack.com/query/v4/docs/react/guides/query-invalidationQuery Invalidation | TanStack Query Docs
Waiting for queries to become stale before they are fetched again doesn't always work, especially when you know for a fact that a query's data is out of date because of something the user has done. For that purpose, the QueryClient has an invalidateQueries method that lets you intelligently mark queries as stale and potentially refetch them too!