fix(vue-query): avoid use sync watchers that cause frequent requests

[Mini-ghost]

Linked issue

resolves #5996

Description

Starting from v4.34.3, there is an issue where the queryFn is erroneously triggered under the following conditions:

1. When the enabled property is set to false, the queryFn should not be called, but the following code still triggers it:

import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useQuery } from '@tanstack/vue-query';

const route = useRoute();

const postId = computed(() => ({
  id: route.params.id ? Number(route.params.id) : undefined,
}));

const enabled = computed(() => {
  return !!postId.value.id && postId.value.id < 10;
});

const { data } = useQuery({
  queryKey: ['POST', postId],
  queryFn() {
    return Promise.resolve(Date.now());
  },
  enabled,
});

reproduce: https://stackblitz.com/edit/vitejs-vite-q1vdvf?file=src%2Fpages%2FPost.vue

2. Modifying the queryKey in the following way causes the queryFn to be called multiple times:

import { ref } from 'vue';
import { useQuery } from '@tanstack/vue-query';

const params = ref({
  page: 1,
  perPage: 20,
});

const { data } = useQuery({
  queryKey: ['PAGE', params],
  queryFn() {
    return Promise.resolve(Date.now());
  },
});

const onReset = () => {
  params.value.page += 1;
  params.value.perPage += 1;
};

reproduce: https://stackblitz.com/edit/vitejs-vite-j5dldg?file=src%2FApp.vue

The reason for this behavior is that when the watch configuration is set to { flush: 'sync' }, the watch callback is synchronously invoked every time there is a modification.

You can find the relevant code in the source file here:

query/packages/vue-query/src/useBaseQuery.ts

Lines 109 to 116 in 22b2860

	watch(
	defaultedOptions,
	() => {
	observer.setOptions(defaultedOptions.value)
	updateState(state, observer.getCurrentResult())
	},
	{ flush: 'sync' },
	)

And this piece of code was introduced at that time to address this issue: #5910

So, this PR attempts to avoid using { flush: 'sync' } and instead, it rewraps refetch to ensure that the observer is correctly updated.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Sep 27, 2023 0:53am

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d750bd1. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 2 targets

• nx affected --targets=test:eslint,test:lib,test:types,test:build
• nx affected --targets=test:lib --base=22b286000c5431655af9d9fea9ef9d5d8ad3ed47

---

Sent with 💌 from NxCloud.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d750bd1:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[codecov-commenter]

Codecov Report

All modified lines are covered by tests ✅

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Files	Coverage Δ
packages/vue-query/src/useBaseQuery.ts	96.20% <100.00%> (ø)
packages/vue-query/src/useInfiniteQuery.ts	100.00% <100.00%> (ø)
packages/vue-query/src/useIsFetching.ts	92.85% <100.00%> (ø)
packages/vue-query/src/useIsMutating.ts	92.85% <100.00%> (ø)
packages/vue-query/src/useMutation.ts	93.47% <100.00%> (ø)
packages/vue-query/src/useQuery.ts	100.00% <100.00%> (ø)

... and 9 files with indirect coverage changes

📢 Thoughts on this report? Let us know!.

[DamianOsipiuk]

@Mini-ghost could you get this to rc branch as well?

[Mini-ghost]

@DamianOsipiuk Sure! I will give it a try in the next few days.