fix(vue-query): mark the watcher as post flush #7942
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
pnpm patch for the one who wants to test it: diff --git a/build/modern/useQueries.js b/build/modern/useQueries.js
index c172ecd85df4646ab4869411725cc028ccc0e7e1..ec584988a4ecb9f24c073eb94a4b5cbc9e8eb255 100644
--- a/build/modern/useQueries.js
+++ b/build/modern/useQueries.js
@@ -81,7 +81,7 @@ function useQueries({
);
state.value = getCombinedResultPersisted();
},
- { flush: "sync" }
+ { flush: "post" }
);
onScopeDispose(() => {
unsubscribe();
|
|
We deployed this patch to production on Monday and found no issues for the moment. |
RomainLanz
changed the title
☁️ Nx Cloud ReportCI is running/has finished running commands for commit c6443c4. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 2 targetsSent with 💌 from NxCloud. |
|
commit: @tanstack/angular-query-devtools-experimental
@tanstack/angular-query-experimental
@tanstack/eslint-plugin-query
@tanstack/query-async-storage-persister
@tanstack/query-broadcast-client-experimental
@tanstack/query-core
@tanstack/query-devtools
@tanstack/query-persist-client-core
@tanstack/query-sync-storage-persister
@tanstack/react-query
@tanstack/react-query-devtools
@tanstack/react-query-next-experimental
@tanstack/react-query-persist-client
@tanstack/solid-query
@tanstack/solid-query-devtools
@tanstack/solid-query-persist-client
@tanstack/svelte-query
@tanstack/svelte-query-devtools
@tanstack/svelte-query-persist-client
@tanstack/vue-query
@tanstack/vue-query-devtools
More templates
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7942 +/- ##
===========================================
+ Coverage 44.64% 71.42% +26.78%
===========================================
Files 187 19 -168
Lines 7090 462 -6628
Branches 1575 119 -1456
===========================================
- Hits 3165 330 -2835
+ Misses 3562 102 -3460
+ Partials 363 30 -333
|
|
We could potentially remove sync watcher entirely. |
|
I'm not entirely sure about the implications either. If removing this |
|
You would also need to override |
|
Then we could merge that one first and work towards removing all watchers in a follow-up PR/issue. |
|
I do not think merging this and immediately changing solution in a follow-up is the way to go. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hey there! 👋🏻
This PR changes the watcher mode for
useQueriesfromsynctopost.The change is needed to avoid having the watcher run during component unmount.
Note
This change will probably be needed on
useBaseQuery, but I haven't tested it yet.Related VueJS issues:
watchruns while the component is being unmounted vuejs/core#7030undefinedposva/unplugin-vue-router#86Currently, using the route params to define some query params triggers a new fetch when leaving a route.
For example, let's say we have the following code that runs when we are on
/players/:id./playersto/players/1, TanStack Query will trigger a fetch for Player1(expected)./players/1to/players, TanStack Query will trigger a fetch for Playerundefined(unexpected)./players/1to/transfers/12345, TanStack Query will trigger a fetch for Player12345(unexpected).This is due to the watcher running when the page changes.
I haven't created an easy and sharable reproduction. Let me know if it is needed.