Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(vue-query): avoid use sync for watch that cause unnecessary requests #8443

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(vue-query): avoid use sync for watch that cause unnecessary requests #8443

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fa13942
fix: ensure `queryKey` match the current value of ref used inside
Mini-ghost Dec 16, 2024
0452035
Merge branch 'main' into fix/ensure-queryKey-match
Mini-ghost Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 35 additions & 31 deletions packages/vue-query/src/useQueries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,11 +297,31 @@
defaultedQueries.value,
options as QueriesObserverOptions<TCombinedResult>,
)
const [, getCombinedResult] = observer.getOptimisticResult(
defaultedQueries.value,
(options as QueriesObserverOptions<TCombinedResult>).combine,
)
const state = shallowRef(getCombinedResult())

const getOptimisticResult = () => {
const [results, getCombinedResult] = observer.getOptimisticResult(
defaultedQueries.value,
(options as QueriesObserverOptions<TCombinedResult>).combine,
)

return getCombinedResult(
results.map((result, index) => {
return {
...result,
refetch: async (...args: Array<any>) => {
const [{ [index]: query }] = observer.getOptimisticResult(

Check warning on line 312 in packages/vue-query/src/useQueries.ts

View check run for this annotation

Codecov / codecov/patch

packages/vue-query/src/useQueries.ts#L311-L312 

Added lines #L311 - L312 were not covered by tests
defaultedQueries.value,
(options as QueriesObserverOptions<TCombinedResult>).combine,
)

return query!.refetch(...args)

Check warning on line 317 in packages/vue-query/src/useQueries.ts

View check run for this annotation

Codecov / codecov/patch

packages/vue-query/src/useQueries.ts#L317 

Added line #L317 was not covered by tests
},
}
}),
)
}

const state = shallowRef(getOptimisticResult())

let unsubscribe = () => {
// noop
Expand All @@ -313,38 +333,22 @@
if (!isRestoring) {
unsubscribe()
unsubscribe = observer.subscribe(() => {
const [, getCombinedResultRestoring] = observer.getOptimisticResult(
defaultedQueries.value,
(options as QueriesObserverOptions<TCombinedResult>).combine,
)
state.value = getCombinedResultRestoring()
state.value = getOptimisticResult()
})
// Subscription would not fire for persisted results
const [, getCombinedResultPersisted] = observer.getOptimisticResult(
defaultedQueries.value,
(options as QueriesObserverOptions<TCombinedResult>).combine,
)
state.value = getCombinedResultPersisted()

state.value = getOptimisticResult()
}
},
{ immediate: true },
)

watch(
defaultedQueries,
() => {
observer.setQueries(
defaultedQueries.value,
options as QueriesObserverOptions<TCombinedResult>,
)
const [, getCombinedResultPersisted] = observer.getOptimisticResult(
defaultedQueries.value,
(options as QueriesObserverOptions<TCombinedResult>).combine,
)
state.value = getCombinedResultPersisted()
},
{ flush: 'sync' },
)
watch(defaultedQueries, (queriesValue) => {
observer.setQueries(
queriesValue,
options as QueriesObserverOptions<TCombinedResult>,
)
state.value = getOptimisticResult()
})

onScopeDispose(() => {
unsubscribe()
Expand Down
Loading