Skip to content

.refetch() is not working as expected after signal update when using injectInfiniteQuery #9174

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

Open
tomer953 opened this issue May 22, 2025 · 2 comments

Comments

@tomer953
Copy link

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:

  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

https://stackblitz.com/edit/sb1-6pedarrr?file=src%2Fapp%2Fcomponents%2Fposts-list%2Fposts-list.component.ts

Steps to reproduce

  1. type sit in the search input

  2. press Search button

  3. this will trigger a .refetch() with the updated search term and show the results as expected

  4. remove the setTimeout() in the end of the file, and call refetch() directly

    this.postsQuery.refetch();
    //setTimeout(() => this.postsQuery.refetch());
  1. 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.

@ThiloAschebrock
Copy link

That seems to be a behavior that is not specific to injectInfiniteQuery but would also be present for injectQuery.

@ThiloAschebrock
Copy link

This likely a consequence of using effect in the definition of the injection function as effect unlike computed will only run eventually after the dependencies have been updated. As a fix, one could, therefore, consider removing the effects as proposed for injectMutation in #9098.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants