diff --git a/packages/angular-query-experimental/src/__tests__/inject-queries.test.ts b/packages/angular-query-experimental/src/__tests__/inject-queries.test.ts index 523bda69f06..0154cc7ff28 100644 --- a/packages/angular-query-experimental/src/__tests__/inject-queries.test.ts +++ b/packages/angular-query-experimental/src/__tests__/inject-queries.test.ts @@ -180,6 +180,46 @@ describe('injectQueries', () => { expect(rendered.getByText('status2: success, data2: 2')).toBeInTheDocument() }) + it('should reflect query list changes after subscriber results exist', async () => { + const key = queryKey() + + @Component({ + template: ` +
+ count: {{ result().length }}, data: + {{ dataText() }} +
+ `, + }) + class Page { + readonly ids = signal([1]) + readonly result = injectQueries(() => ({ + queries: this.ids().map((id) => ({ + queryKey: [...key, id], + queryFn: () => sleep(10).then(() => id), + })), + })) + + dataText() { + return this.result() + .map((query) => query.data() ?? 'none') + .join(',') + } + } + + const rendered = await render(Page) + + await vi.advanceTimersByTimeAsync(11) + rendered.fixture.detectChanges() + + expect(rendered.getByText('count: 1, data: 1')).toBeInTheDocument() + + rendered.fixture.componentInstance.ids.set([]) + rendered.fixture.detectChanges() + + expect(rendered.getByText('count: 0, data:')).toBeInTheDocument() + }) + describe('isRestoring', () => { it('should not fetch for the duration of the restoring period when isRestoring is true', async () => { const key1 = queryKey() diff --git a/packages/angular-query-experimental/src/inject-queries.ts b/packages/angular-query-experimental/src/inject-queries.ts index 2f201799e74..14cff42fc62 100644 --- a/packages/angular-query-experimental/src/inject-queries.ts +++ b/packages/angular-query-experimental/src/inject-queries.ts @@ -274,13 +274,17 @@ export function injectQueries< ), ) + const resultFromSubscriberSignal = signal(null) + // Do not notify on updates because of changes in the options because // these changes should already be reflected in the optimistic result. effect(() => { - observerSignal().setQueries( - defaultedQueries(), - optionsSignal() as QueriesObserverOptions, - ) + const observer = observerSignal() + const defaulted = defaultedQueries() + const options = optionsSignal() as QueriesObserverOptions + + resultFromSubscriberSignal.set(null) + observer.setQueries(defaulted, options) }) const optimisticCombinedResultSignal = computed(() => { @@ -289,8 +293,6 @@ export function injectQueries< return getCombinedResult(trackResult()) }) - const resultFromSubscriberSignal = signal(null) - effect(() => { const observer = observerSignal() const [_optimisticResult, getCombinedResult] = optimisticResultSignal()