perf(vue-query): reduce unnecessary computed()

[Mini-ghost]

In the current beta version, useIsFetching will internally run cloneDeepUnref in computed for deep clone the parameter of fetchingFilters and unwrap the ref.

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

Line 15 in 13b17ee

const filters = computed(() => cloneDeepUnref(fetchingFilters))

Then isFetching of QueryClient will run cloneDeepUnref again.

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

Lines 44 to 46 in 13b17ee

	isFetching(filters: MaybeRefDeep<QueryFilters> = {}): number {
	return super.isFetching(cloneDeepUnref(filters))
	}

Here, We don’t need to repeatedly execute cloneDeepUnref, it seems that the cloneDeepUnref only need to be triggered when the listener of subscribe is called.

const unsubscribe = client.getQueryCache().subscribe(() => {
  isFetching.value = client.isFetching(fetchingFilters)
})

In the end, use the watchSyncEffect instead of watch so, we can remove the filters computed property.

const listener = () => {
  isFetching.value = client.isFetching(fetchingFilters)
}

const unsubscribe = client.getQueryCache().subscribe(listener)

watchSyncEffect(listener)

[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		Aug 24, 2023 3:50am

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 3d214bb. 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 1 target

• nx affected --targets=test:eslint,test:lib,test:types,test:build,test:bundle

---

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 3d214bb:

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