Merge branch 'main' into ci/eslint/add-cspell-words

examples/angular/basic/package.json

@@ -17,7 +17,7 @@
     "@angular/platform-browser": "^17.1.3",
     "@angular/platform-browser-dynamic": "^17.1.3",
     "@angular/router": "^17.1.3",
-    "@tanstack/angular-query-experimental": "^5.25.0",
+    "@tanstack/angular-query-experimental": "^5.26.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.3"
@@ -26,7 +26,7 @@
     "@angular-devkit/build-angular": "^17.1.3",
     "@angular/cli": "^17.1.3",
     "@angular/compiler-cli": "^17.1.3",
-    "@tanstack/angular-query-devtools-experimental": "^5.25.0",
+    "@tanstack/angular-query-devtools-experimental": "^5.26.0",
     "typescript": "5.2.2"
   },
   "overrides": {

examples/angular/infinite-query-with-max-pages/package.json

@@ -17,7 +17,7 @@
     "@angular/platform-browser": "^17.1.3",
     "@angular/platform-browser-dynamic": "^17.1.3",
     "@angular/router": "^17.1.3",
-    "@tanstack/angular-query-experimental": "^5.25.0",
+    "@tanstack/angular-query-experimental": "^5.26.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.3"
@@ -26,7 +26,7 @@
     "@angular-devkit/build-angular": "^17.1.3",
     "@angular/cli": "^17.1.3",
     "@angular/compiler-cli": "^17.1.3",
-    "@tanstack/angular-query-devtools-experimental": "^5.25.0",
+    "@tanstack/angular-query-devtools-experimental": "^5.26.0",
     "typescript": "5.2.2"
   },
   "overrides": {

examples/angular/router/package.json

@@ -17,7 +17,7 @@
     "@angular/platform-browser": "^17.1.3",
     "@angular/platform-browser-dynamic": "^17.1.3",
     "@angular/router": "^17.1.3",
-    "@tanstack/angular-query-experimental": "^5.25.0",
+    "@tanstack/angular-query-experimental": "^5.26.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.3"
@@ -26,7 +26,7 @@
     "@angular-devkit/build-angular": "^17.1.3",
     "@angular/cli": "^17.1.3",
     "@angular/compiler-cli": "^17.1.3",
-    "@tanstack/angular-query-devtools-experimental": "^5.25.0",
+    "@tanstack/angular-query-devtools-experimental": "^5.26.0",
     "typescript": "5.2.2"
   },
   "overrides": {

examples/angular/simple/package.json

@@ -17,7 +17,7 @@
     "@angular/platform-browser": "^17.1.3",
     "@angular/platform-browser-dynamic": "^17.1.3",
     "@angular/router": "^17.1.3",
-    "@tanstack/angular-query-experimental": "^5.25.0",
+    "@tanstack/angular-query-experimental": "^5.26.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.3"
@@ -26,7 +26,7 @@
     "@angular-devkit/build-angular": "^17.1.3",
     "@angular/cli": "^17.1.3",
     "@angular/compiler-cli": "^17.1.3",
-    "@tanstack/angular-query-devtools-experimental": "^5.25.0",
+    "@tanstack/angular-query-devtools-experimental": "^5.26.0",
     "typescript": "5.2.2"
   },
   "overrides": {

packages/angular-query-devtools-experimental/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-query-devtools-experimental",
-  "version": "5.25.0",
+  "version": "5.26.0",
   "description": "Developer tools to interact with and visualize the TanStack/angular-query cache",
   "author": "Arnoud de Vries",
   "license": "MIT",

packages/angular-query-experimental/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-query-experimental",
-  "version": "5.25.0",
+  "version": "5.26.0",
   "description": "Signals for managing, caching and syncing asynchronous and remote data in Angular",
   "author": "Arnoud de Vries",
   "license": "MIT",

packages/angular-query-experimental/src/__tests__/inject-mutation-state.test.ts

@@ -1,11 +1,17 @@
-import { signal } from '@angular/core'
+import { Component, input, signal } from '@angular/core'
 import { QueryClient } from '@tanstack/query-core'
 import { TestBed } from '@angular/core/testing'
 import { describe, expect, test, vi } from 'vitest'
+import { By } from '@angular/platform-browser'
+import { JsonPipe } from '@angular/common'
 import { injectMutation } from '../inject-mutation'
 import { injectMutationState } from '../inject-mutation-state'
 import { provideAngularQuery } from '../providers'
-import { successMutator } from './test-utils'
+import { setFixtureSignalInputs, successMutator } from './test-utils'
+
+const MUTATION_DURATION = 1000
+
+const resolveMutations = () => vi.advanceTimersByTimeAsync(MUTATION_DURATION)
 
 describe('injectMutationState', () => {
   let queryClient: QueryClient
@@ -104,5 +110,68 @@ describe('injectMutationState', () => {
 
       expect(mutationState()[0]?.variables).toEqual(variables)
     })
+
+    test('should support required signal inputs', async () => {
+      queryClient.clear()
+      const fakeName = 'name1'
+      const mutationKey1 = ['fake', fakeName]
+
+      const mutations = TestBed.runInInjectionContext(() => {
+        return [
+          injectMutation(() => ({
+            mutationKey: mutationKey1,
+            mutationFn: () => Promise.resolve('myValue'),
+          })),
+          injectMutation(() => ({
+            mutationKey: mutationKey1,
+            mutationFn: () => Promise.reject('myValue2'),
+          })),
+        ]
+      })
+
+      mutations.forEach((mutation) => mutation.mutate())
+
+      @Component({
+        selector: 'app-fake',
+        template: `
+          @for (mutation of mutationState(); track mutation) {
+            <span>{{ mutation.status }}</span>
+          }
+        `,
+        standalone: true,
+        imports: [JsonPipe],
+      })
+      class FakeComponent {
+        name = input.required<string>()
+
+        mutationState = injectMutationState(() => ({
+          filters: {
+            mutationKey: ['fake', this.name()],
+            exact: true,
+          },
+        }))
+      }
+
+      const fixture = TestBed.createComponent(FakeComponent)
+      const { debugElement } = fixture
+      setFixtureSignalInputs(fixture, { name: fakeName })
+
+      fixture.detectChanges()
+
+      let spans = debugElement
+        .queryAll(By.css('span'))
+        .map((span) => span.nativeNode.textContent)
+
+      expect(spans).toEqual(['pending', 'pending'])
+
+      await resolveMutations()
+      fixture.detectChanges()
+
+      spans = debugElement
+        .queryAll(By.css('span'))
+        .map((span) => span.nativeNode.textContent)
+
+      expect(spans).toEqual(['success', 'error'])
+    })
   })
 })

packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts

@@ -1,10 +1,16 @@
-import { signal } from '@angular/core'
+import { Component, input, signal } from '@angular/core'
 import { QueryClient } from '@tanstack/query-core'
 import { TestBed } from '@angular/core/testing'
-import { expect, test, vi } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
+import { By } from '@angular/platform-browser'
 import { injectMutation } from '../inject-mutation'
 import { provideAngularQuery } from '../providers'
-import { errorMutator, expectSignals, successMutator } from './test-utils'
+import {
+  errorMutator,
+  expectSignals,
+  setFixtureSignalInputs,
+  successMutator,
+} from './test-utils'
 
 const MUTATION_DURATION = 1000
 
@@ -303,4 +309,97 @@ describe('injectMutation', () => {
       expect(onSettledOnFunction).toHaveBeenCalledTimes(1)
     })
   })
+
+  test('should support required signal inputs', async () => {
+    const mutationCache = queryClient.getMutationCache()
+
+    @Component({
+      selector: 'app-fake',
+      template: `
+        <button (click)="mutate()"></button>
+        <span>{{ mutation.data() }}</span>
+      `,
+      standalone: true,
+    })
+    class FakeComponent {
+      name = input.required<string>()
+
+      mutation = injectMutation(() => ({
+        mutationKey: ['fake', this.name()],
+        mutationFn: () => successMutator(this.name()),
+      }))
+
+      mutate(): void {
+        this.mutation.mutate()
+      }
+    }
+
+    const fixture = TestBed.createComponent(FakeComponent)
+    const { debugElement } = fixture
+    setFixtureSignalInputs(fixture, { name: 'value' })
+
+    const button = debugElement.query(By.css('button'))
+    button.triggerEventHandler('click')
+
+    await resolveMutations()
+    fixture.detectChanges()
+
+    const text = debugElement.query(By.css('span')).nativeElement.textContent
+    expect(text).toEqual('value')
+    const mutation = mutationCache.find({ mutationKey: ['fake', 'value'] })
+    expect(mutation).toBeDefined()
+    expect(mutation!.options.mutationKey).toStrictEqual(['fake', 'value'])
+  })
+
+  test('should update options on required signal input change', async () => {
+    const mutationCache = queryClient.getMutationCache()
+
+    @Component({
+      selector: 'app-fake',
+      template: `
+        <button (click)="mutate()"></button>
+        <span>{{ mutation.data() }}</span>
+      `,
+      standalone: true,
+    })
+    class FakeComponent {
+      name = input.required<string>()
+
+      mutation = injectMutation(() => ({
+        mutationKey: ['fake', this.name()],
+        mutationFn: () => successMutator(this.name()),
+      }))
+
+      mutate(): void {
+        this.mutation.mutate()
+      }
+    }
+
+    const fixture = TestBed.createComponent(FakeComponent)
+    const { debugElement } = fixture
+    setFixtureSignalInputs(fixture, { name: 'value' })
+
+    const button = debugElement.query(By.css('button'))
+    const span = debugElement.query(By.css('span'))
+
+    button.triggerEventHandler('click')
+    await resolveMutations()
+    fixture.detectChanges()
+
+    expect(span.nativeElement.textContent).toEqual('value')
+
+    setFixtureSignalInputs(fixture, { name: 'updatedValue' })
+
+    button.triggerEventHandler('click')
+    await resolveMutations()
+    fixture.detectChanges()
+
+    expect(span.nativeElement.textContent).toEqual('updatedValue')
+
+    const mutations = mutationCache.findAll()
+    expect(mutations.length).toBe(2)
+    const [mutation1, mutation2] = mutations
+    expect(mutation1!.options.mutationKey).toEqual(['fake', 'value'])
+    expect(mutation2!.options.mutationKey).toEqual(['fake', 'updatedValue'])
+  })
 })

packages/angular-query-experimental/src/__tests__/inject-query.test.ts

@@ -1,13 +1,14 @@
-import { computed, signal } from '@angular/core'
+import { Component, computed, input, signal } from '@angular/core'
 import { TestBed, fakeAsync, flush, tick } from '@angular/core/testing'
 import { QueryClient } from '@tanstack/query-core'
-import { expect, vi } from 'vitest'
+import { describe, expect, vi } from 'vitest'
 import { injectQuery } from '../inject-query'
 import { provideAngularQuery } from '../providers'
 import {
   delayedFetcher,
   getSimpleFetcherWithReturnData,
   rejectFetcher,
+  setSignalInputs,
   simpleFetcher,
 } from './test-utils'
 
@@ -215,4 +216,32 @@ describe('injectQuery', () => {
 
     expect(query.status()).toBe('error')
   }))
+
+  test('should render with required signal inputs', fakeAsync(async () => {
+    @Component({
+      selector: 'app-fake',
+      template: `{{ query.data() }}`,
+      standalone: true,
+    })
+    class FakeComponent {
+      name = input.required<string>()
+
+      query = injectQuery(() => ({
+        queryKey: ['fake', this.name()],
+        queryFn: () => Promise.resolve(this.name()),
+      }))
+    }
+
+    const fixture = TestBed.createComponent(FakeComponent)
+    setSignalInputs(fixture.componentInstance, {
+      name: 'signal-input-required-test',
+    })
+
+    flush()
+    await fixture.detectChanges()
+
+    expect(fixture.debugElement.nativeElement.textContent).toEqual(
+      'signal-input-required-test',
+    )
+  }))
 })