feat(react-query): allow useQuery and useQueries to unsubscribe from the query cache with an option #8348
Conversation
…the query cache with an option
|
View your CI Pipeline Execution ↗ for commit 1cb4bff.
☁️ Nx Cloud last updated this comment at |
|
@hirbod could you help me re-vamp the React Native docs page if we ship this? |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #8348 +/- ##
===========================================
+ Coverage 46.25% 84.29% +38.04%
===========================================
Files 199 26 -173
Lines 7530 363 -7167
Branches 1719 103 -1616
===========================================
- Hits 3483 306 -3177
+ Misses 3668 48 -3620
+ Partials 379 9 -370
|
|
@TkDodo Sure. How should we proceed? Should we keep what we have, replace it, or additionally add the new solution? I love that plugin |
|
Yeah there are some mentions about devtools on the top of the page, as well as on the devtools page: https://tanstack.com/query/v5/docs/framework/react/devtools I think what I would want is:
Regarding the sections, I think we should do:
The new thing should cover what you can do with subscribe, maybe show the standard example with react-navigation, maybe show a more advanced example with the react-native stack (e.g. keep the top two screen subscribed) I don’t think we need these anymore:
if we can cover everything with the |
|
Yes, so far I can't think of a scenario that wouldn't work with the new subscribed prop. |
|
There’s a new prop: |
|
so: where |
|
Well, basically, If we want to keep both the second and the topmost Untested, something like this: const isTopScreen = useNavigationState((state) => {
const currentRouteKey = route.key;
const topRouteKey = state.routes[state.routes.length - 1].key;
return currentRouteKey === topRouteKey;
});
const isSecondScreen = useNavigationState((state) => {
if (state.routes.length > 1) {
const secondRouteKey = state.routes[state.routes.length - 2].key;
return route.key === secondRouteKey;
}
return false;
});IMO, it's overkill. Since focus should ideally trigger a refetchOnWindowFocus, a disabled subscription would be re-enabled the moment useIsFocused changes again, which I believe is sufficient. |
|
Great to see that the experience with focused screens in React Native is improving. Would an imperative function do the job instead? Currently, I’m doing something like this, but I’m encountering issues with the isStale() function retuning false while it's actualy stale. export const useEnabledOnFocus = (enabled = true): ((query: Query) => boolean) => {
const isFocused = useRef(false);
const query = useRef<Query<unknown, Error, unknown, QueryKey>>();
useFocusEffect(
React.useCallback(() => {
isFocused.current = true;
const task = InteractionManager.runAfterInteractions(() => {
if (
enabled &&
((query.current?.state.status === "pending" &&
query.current?.state.fetchStatus === "idle") ||
query.current?.isStale())
) {
query.current?.fetch();
}
});
return () => {
isFocused.current = false;
task.cancel();
};
}, [])
);
return (_query: Query<unknown, Error, unknown, QueryKey>) => {
query.current = _query;
const computedEnabled = enabled && isFocused.current;
return computedEnabled;
};
};Usage: useQuery({
...,
enabled: useEnabledOnFocus()
}) |
|
FYI, runAfterInteractions does not fire in native-stack, only in the JS stack. And since the native-stack is the recommended way, re-renders are not a concern, as the navigation runs on the UI thread. |
|
Ok, thanks for the explanation ! Can't wait to try the new api |
|
@hirbod did you have some time to try out the preview build? |
|
@TkDodo will do this weekend. The week was very tough with our release and hotfixes :D |
|
@flodlc There’s one with nearly 100% feature parity and React Navigation adapters (also works with Expo Router): https://github.com/okwasniewski/react-native-bottom-tabs. Either way, bottom tabs simply switch screens without animation, so there’s no such thing as jank with them. @TkDodo finally have so time, pulling now and testing |
|
@TkDodo Also, check Discord, but FYI: I gave it a thorough test—it works perfectly fine. LGTM! |
|
Actually I was thinking about the react navigation implementation that allows "shift" animation. |
|
Hi there! Wishing you the best for 2025 🍾 |
|
Sure! I'll work on it today :) |
|
@TkDodo Sorry! The holidays and a few other OSS tasks I've been working on lately completely blocked me, and I forgot about the docs. The feature is definitely ready and already tested. If @flodlc wants to finish the docs, that'd be great. Otherwise, I'll try to free up a bit of time tomorrow. We basically just need to explain how to use this new prop correctly in React Native, using available hooks like |
|
Here it is: #8506 |
* update the doc * update the doc --------- Co-authored-by: Dominik Dorfmeister <[email protected]>
github-actions
bot
added
the
documentation
No description provided.