Description
Describe the bug
It seems like injectInfiniteQuery
that depends on some signal-based param, like query()
for the queryKey/queryFn, is not working as expected when we use the .refetch()
directly after updating the query signal, something like:
Edit: seems like relevant for injectQuery
as well
query = signal('');
postsQuery = injectInfiniteQuery(() => ({
queryKey: ['posts', this.query()],
queryFn: ({ pageParam = 0 }) =>
firstValueFrom(this.postsService.getPosts(pageParam, this.query())),
initialPageParam: 0,
getNextPageParam: (lastPage) => lastPage.nextId,
getPreviousPageParam: (firstPage) => firstPage.previousId,
enabled: false,
placeholderData: keepPreviousData,
}));
then
search() {
this.query.set('foo')
this.postsQuery.refetch()
}
This isn't working (view stackblitz)
The solution is to delay the refetch call:
search() {
this.query.set('foo')
setTimeout(() => this.postsQuery.refetch())
}
Your minimal, reproducible example
Steps to reproduce
-
type
sit
in the search input -
press
Search
button -
this will trigger a
.refetch()
with the updated search term and show the results as expected -
remove the
setTimeout()
in the end of the file, and callrefetch()
directly
this.postsQuery.refetch();
//setTimeout(() => this.postsQuery.refetch());
- this is no longer works as expected
Expected behavior
refetch()
should work as expected without setTimeout()
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
- OS: macOS 15.5
- Browser: latest chrome
Tanstack Query adapter
angular-query
TanStack Query version
v5.76.0
TypeScript version
v5.8.2
Additional context
in my environment with v5.51.15
, the HTTP call is made with the wrong param (the previous query() value)
and I tried to repro it with stackblitz, where it behaves differently (probably because of different versions) - but still not as expected.