Skip to content

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

Open
@tomer953

Description

@tomer953

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

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.

Activity

ThiloAschebrock

ThiloAschebrock commented on May 23, 2025

@ThiloAschebrock

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

ThiloAschebrock

ThiloAschebrock commented on May 24, 2025

@ThiloAschebrock

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.

changed the title [-].refetch() is not working as expected after signal update when using injectInfiniteQuery[/-] [+].refetch() is not working as expected after signal update when using injectQuery[/+] on Jun 8, 2025
tomer953

tomer953 commented on Jun 22, 2025

@tomer953
Author

Hi :)

Any work regarding this issue?
Its getting messy really quick once we go setTimeout the template has many potential glitches and invalid states caused by the internal use of effect

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @TkDodo@tomer953@ThiloAschebrock

        Issue actions

          .refetch() is not working as expected after signal update when using injectQuery · Issue #9174 · TanStack/query