useQuery does not re-render when using in 2 separate components at the same time
I have 2 components, in the tree they live at the same time (not always, but by default, they do).
One component call it the "header", lives always, and when a prop changes, it triggers the useQuery hook and fetches data. All good here.
Second component, call it "consumer", lives sometimes, and needs access to that fetched data. This one calls useQuery with "enabled" set to false and has the same queryKey as the
header does. The problem is, when header finishes fetching, consumer doesn't re-render, it doesn't get the newly fetched data until I manually remount it after header finished fetching.
Been trying to solve this for 3 hours and I am out of ideas... plz help12 Replies
fair-rose•10mo ago
This one calls useQuery with "enabled" set to false and has the same queryKey as the header does.That doesn't sound right… can you share some code?
genetic-orangeOP•10mo ago
genetic-orangeOP•10mo ago
this is the main useQuery
that fetches data in
headergenetic-orangeOP•10mo ago
this is the
consumer. Simplified to the maximum so that I can debug the issue
genetic-orangeOP•10mo ago
i've been trying with "refetchOnMount" instead of enabled but nothing. At this point im trying things blindly
If i remove enabled, but keep staletime, the query will fetch twice
fair-rose•10mo ago
I would just declare the
containerBaseData once and use it in both componentsoptimistic-gold•10mo ago
please don't create useQuery instances without a queryFn. Extract at least key and fn, possibly also
staleTime to some shared options and re-use those
enabled: false seems unnecessary, especially with staleTime: Infinity
If i remove enabled, but keep staletime, the query will fetch twicethis is fishy because with
staleTime: Infinity, you'll always get cached data without a refetch if it exists. Maybe you have an unstable query cache, hard to say. But this is definitely not how react-query should behave. I can take a deeper look at a standalone reproduction (stackblitz, codesandbox)genetic-orangeOP•10mo ago
I am really sorry, I figured out the issue. The problem was I declared
const queryClient = new QueryClient(); inside the component instead of outside.. I was probably rushing or tired.. Once I put it outside the component everything is good and I can go back to how react query is supposed to be used
I thought about it, but first I wanted to find the root cause for my issue as I know react query shouldn't behave as it was. All fixed now
also thanks @TkDodo 🔮 for the tips!optimistic-gold•10mo ago
we have a lint rule for that because it's so common. Please use it:
https://tanstack.com/query/v5/docs/eslint/stable-query-client
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
genetic-orangeOP•10mo ago
you guys think of everything lol, I just thought "there probably should be a rule for idiots like me"
optimistic-gold•10mo ago
sorry to say but usually, the overlap between people who get this wrong and people who know about the lint rules is converging towards zero 😅
which makes the rule a bit unnecessary but yeah, we have it 🚀
genetic-orangeOP•10mo ago
awesome, thanks again! It's funny because I know it was supposed to be stable, but I just didn't do it for unknown reasons