trafficstars

Hey there! 👋🏻

This PR changes the watcher mode for useQueries from sync to post. 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:

https://github.com/vuejs/core/issues/2291
https://github.com/vuejs/core/issues/7030
https://github.com/vuejs/router/issues/1945
https://github.com/vuejs/vue-router/issues/3393
https://github.com/posva/unplugin-vue-router/issues/86

Currently, 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.

const route = useRoute();
const paramId = computed(() => +route.params.id);

const queries = useMyViewData(paramId)

When going from /players to /players/1, TanStack Query will trigger a fetch for Player 1 (expected).
When going from /players/1 to /players, TanStack Query will trigger a fetch for Player undefined (unexpected).
When going from /players/1 to /transfers/12345, TanStack Query will trigger a fetch for Player 12345 (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.

Aug 22 '24 11:08 RomainLanz

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();

Aug 23 '24 09:08 RomainLanz

We deployed this patch to production on Monday and found no issues for the moment.

Aug 28 '24 09:08 RomainLanz

☁️ Nx Cloud Report

CI is running/has finished running commands for commit c6443c43bef35bf6fcbdd8d4fdc48516499a66c3. 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 targets

Sent with 💌 from NxCloud.

Aug 30 '24 11:08 nx-cloud[bot]

commit: c6443c4

@tanstack/angular-query-devtools-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@7942

@tanstack/angular-query-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-experimental@7942

@tanstack/eslint-plugin-query

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-query@7942

@tanstack/query-async-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-async-storage-persister@7942

@tanstack/query-broadcast-client-experimental

pnpm add https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@7942

@tanstack/query-core

pnpm add https://pkg.pr.new/@tanstack/query-core@7942

@tanstack/query-devtools

pnpm add https://pkg.pr.new/@tanstack/query-devtools@7942

@tanstack/query-persist-client-core

pnpm add https://pkg.pr.new/@tanstack/query-persist-client-core@7942

@tanstack/query-sync-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-sync-storage-persister@7942

@tanstack/react-query

pnpm add https://pkg.pr.new/@tanstack/react-query@7942

@tanstack/react-query-devtools

pnpm add https://pkg.pr.new/@tanstack/react-query-devtools@7942

@tanstack/react-query-next-experimental

pnpm add https://pkg.pr.new/@tanstack/react-query-next-experimental@7942

@tanstack/react-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/react-query-persist-client@7942

@tanstack/solid-query

pnpm add https://pkg.pr.new/@tanstack/solid-query@7942

@tanstack/solid-query-devtools

pnpm add https://pkg.pr.new/@tanstack/solid-query-devtools@7942

@tanstack/solid-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/solid-query-persist-client@7942

@tanstack/svelte-query

pnpm add https://pkg.pr.new/@tanstack/svelte-query@7942

@tanstack/svelte-query-devtools

pnpm add https://pkg.pr.new/@tanstack/svelte-query-devtools@7942

@tanstack/svelte-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/svelte-query-persist-client@7942

@tanstack/vue-query

pnpm add https://pkg.pr.new/@tanstack/vue-query@7942

@tanstack/vue-query-devtools

pnpm add https://pkg.pr.new/@tanstack/vue-query-devtools@7942

Open in Stackblitz

More templates

Aug 30 '24 11:08 pkg-pr-new[bot]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 71.42%. Comparing base (c7fb5fd) to head (c6443c4). Report is 270 commits behind head on main.

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

Components	Coverage Δ
@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-codemods	`∅ <ø> (∅)`
@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	`71.42% <ø> (ø)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

Aug 30 '24 11:08 codecov[bot]

We could potentially remove sync watcher entirely. We did it for other hooks some time ago.

https://github.com/TanStack/query/pull/6043

Aug 30 '24 17:08 DamianOsipiuk

I'm not entirely sure about the implications either. If removing this watch statement is the only change, I can create another patch and test how my application behaves.

Sep 02 '24 07:09 RomainLanz

You would also need to override refetch to update observer options before actual refetch is called.

Sep 02 '24 08:09 DamianOsipiuk

Then we could merge that one first and work towards removing all watchers in a follow-up PR/issue.

Sep 02 '24 09:09 RomainLanz

I do not think merging this and immediately changing solution in a follow-up is the way to go.
Better way would be to fix it properly and add automated test that verifies the fix.
For the mean time, you can patch the package locally, as you already did.

Sep 03 '24 20:09 DamianOsipiuk

I might be misunderstanding, but I think we’re talking about different things.

This PR is updating a watcher for the useQueries hook, and there’s no refetch concept involved at this level. The refetch system is handled within the underlying QueriesObserver layer.

Oct 16 '24 09:10 RomainLanz

Could someone review this again?

This issue affects all Vue applications using useQueries. It's a significant problem that shouldn't be disregarded.

Nov 25 '24 10:11 RomainLanz

Could someone review this again?

This issue affects all Vue applications using useQueries. It's a significant problem that shouldn't be disregarded.

As mentioned before i do not think this change should be merged as it will introduce another bug in specific cases where states would not be properly synced up when calling refetch.

There is a similar PR that handled that for other hooks, and this MR should be adjusted to follow similar pattern. https://github.com/TanStack/query/pull/6043

In that MR you could see additional block that patches refetch function returned from observer - https://github.com/TanStack/query/pull/6043/files#diff-996721944b77ab3155cb5f86364575311132aeaaff8f7f715755bfcc9fc09108R124-R128

Nov 25 '24 11:11 DamianOsipiuk

I have opened a PR(#8443) to address this issue. If there are any areas where I may have overlooked something, please kindly let me know.

Thank you!

Dec 17 '24 12:12 Mini-ghost

query
query copied to clipboard

fix(vue-query): mark the watcher as post flush

☁️ Nx Cloud Report

Codecov Report

query query copied to clipboard

fix(vue-query): mark the watcher as post flush

☁️ Nx Cloud Report

Codecov Report

query
query copied to clipboard