-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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.
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
vue-query
client invalidateQueries
doesn't invalidate immediately
#7694
Comments
Your approach was very effective. I simplified the implementation based on your solution: export class QueryClient extends QC
invalidateQueries(
filters: MaybeRefDeep<InvalidateQueryFilters> = {},
options: MaybeRefDeep<InvalidateOptions> = {},
): Promise<void> {
const filtersCloned = cloneDeepUnref(filters)
const optionsCloned = cloneDeepUnref(options)
super.invalidateQueries({ ...filtersCloned, refetchType: 'none' }, optionsCloned)
return nextTick().then(() => {
return super.refetchQueries(filtersCloned, optionsCloned)
})
}
} What do you think? cc @@DamianOsipiuk |
I think |
query/packages/query-core/src/types.ts Lines 505 to 507 in 14d9c49
query/packages/query-core/src/queryClient.ts Lines 288 to 290 in 14d9c49
It seems that This approach only defers |
Hi, I'm not sure if its related or not to your issue but I'm seeing successive calls to clientQuery.invalidateQueries take 4 times longer than the last. ie: I have a query that lists all entities, I have a mutator that add another entity, I await for that to complete then call invalidateQueries passing in the queryKey, if I do that the timings increase ~4 fold. 0.052secs Could be user error (I'm new to tanstack) - happy to create a new issue/reproducer |
@Mini-ghost if the goal is to perform the marking as query/packages/vue-query/src/queryClient.ts Lines 178 to 179 in febbde6
I can only assume that what needs to be deferred is the refetch, not the mark as invalidated, because only the refetch itself runs the sadly, in the PR that introduced the fix, we didn't add a test case: So I'm unsure what still needs to "work" after the fix. But maybe we can add a test case now and look at the original issue posted in: @Mini-ghost would you like to PR that? |
The
This implementation ignores the
In order to support those two functionalities offered by the
query/packages/query-core/src/queryClient.ts Lines 288 to 290 in 14d9c49
query/packages/query-core/src/queryClient.ts Lines 291 to 294 in 14d9c49
|
@TkDodo Thank you for your response. I am happy to address this issue and will review various operation combinations to add test cases for these scenarios. |
@kazcw After reviewing the core code implementation, I realize you are correct. I will check if |
Issue is that reactive values in vue are queued in the event loop, because we have to update the observer options
This produces inconsistency if const foo = ref('foo');
useQuery({
queryKey: ['foo', foo],
queryFn: async ({ queryKey }) => {
console.log(queryKey[1], foo.value);
return {};
},
});
const queryClient = useQueryClient();
setTimeout(() => {
foo.value = 'bar';
queryClient.invalidateQueries();
}, 2000); In this case And yes, the solution to this might be to re-implement invalidate function to defer only |
Describe the bug
The Vue implementation of
QueryClient.invalidateQueries
does not invalidate queries "immediately", as described in the documentation.Your minimal, reproducible example
https://codesandbox.io/p/devbox/vue-query-query-invalidation-w2kn9y
Steps to reproduce
Run the CodeSandbox; the rendered page shows the difference in behavior between the Vue QueryClient and the base implementation (the latter seems more consistent with the documentation).
Expected behavior
The documentation for QueryClient.invalidateQueries says that "By default, all matching queries are immediately marked as invalid and active queries are refetched in the background." I understand this to mean that, after calling the function, matched queries should be seen to be invalidated, even if the function's returned
Promise
was not awaited. This is the case when using the baseQueryClient
of@tanstack/query-core
.How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Tanstack Query adapter
vue-query
TanStack Query version
v5.51.0
TypeScript version
No response
Additional context
A workaround I'm using is to override
invalidateQueries
with an implementation that performs the invalidations immediately, deferring only the query refetches (as required to fix #6414).The text was updated successfully, but these errors were encountered: