@tanstack/angular-query-experimental 5.103.2 → 5.104.0

package/src/__tests__/inject-mutation-state.test.ts

@@ -0,0 +1,198 @@
+import {
+  Component,
+  Injector,
+  input,
+  provideZonelessChangeDetection,
+  signal,
+} from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { By } from '@angular/platform-browser'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import {
+  QueryClient,
+  injectMutation,
+  injectMutationState,
+  provideTanStackQuery,
+} from '..'
+import { setFixtureSignalInputs } from './test-utils'
+
+describe('injectMutationState', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient()
+    vi.useFakeTimers()
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
+    })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  describe('injectMutationState', () => {
+    it('should return variables after calling mutate 1', () => {
+      const mutationKey = queryKey()
+      const variables = 'foo123'
+
+      const mutation = TestBed.runInInjectionContext(() => {
+        return injectMutation(() => ({
+          mutationKey: mutationKey,
+          mutationFn: (params: string) => sleep(0).then(() => params),
+        }))
+      })
+
+      mutation.mutate(variables)
+
+      const mutationState = TestBed.runInInjectionContext(() => {
+        return injectMutationState(() => ({
+          filters: { mutationKey, status: 'pending' },
+          select: (m) => m.state.variables,
+        }))
+      })
+
+      expect(mutationState()).toEqual([variables])
+    })
+
+    it('should update injectMutationState when reactive options change', () => {
+      const mutationKey1 = queryKey()
+      const mutationKey2 = queryKey()
+      const variables1 = 'foo123'
+      const variables2 = 'bar234'
+
+      const [mutation1, mutation2] = TestBed.runInInjectionContext(() => {
+        return [
+          injectMutation(() => ({
+            mutationKey: mutationKey1,
+            mutationFn: (params: string) => sleep(0).then(() => params),
+          })),
+          injectMutation(() => ({
+            mutationKey: mutationKey2,
+            mutationFn: (params: string) => sleep(0).then(() => params),
+          })),
+        ]
+      })
+
+      mutation1.mutate(variables1)
+      mutation2.mutate(variables2)
+
+      const filterKey = signal(mutationKey1)
+
+      const mutationState = TestBed.runInInjectionContext(() => {
+        return injectMutationState(() => ({
+          filters: { mutationKey: filterKey(), status: 'pending' },
+          select: (m) => m.state.variables,
+        }))
+      })
+
+      expect(mutationState()).toEqual([variables1])
+
+      filterKey.set(mutationKey2)
+      expect(mutationState()).toEqual([variables2])
+    })
+
+    it('should return variables after calling mutate 2', () => {
+      queryClient.clear()
+      const mutationKey = queryKey()
+      const variables = 'bar234'
+
+      const mutation = TestBed.runInInjectionContext(() => {
+        return injectMutation(() => ({
+          mutationKey: mutationKey,
+          mutationFn: (params: string) => sleep(0).then(() => params),
+        }))
+      })
+
+      mutation.mutate(variables)
+
+      const mutationState = TestBed.runInInjectionContext(() => {
+        return injectMutationState()
+      })
+
+      expect(mutationState()[0]?.variables).toEqual(variables)
+    })
+
+    it('should support required signal inputs', async () => {
+      queryClient.clear()
+      const fakeName = 'name1'
+      const mutationKey1 = ['fake', fakeName]
+
+      const mutations = TestBed.runInInjectionContext(() => {
+        return [
+          injectMutation(() => ({
+            mutationKey: mutationKey1,
+            mutationFn: () => sleep(10).then(() => 'myValue'),
+          })),
+          injectMutation(() => ({
+            mutationKey: mutationKey1,
+            mutationFn: () =>
+              sleep(10).then(() => Promise.reject(new Error('myValue2'))),
+          })),
+        ]
+      })
+
+      mutations.forEach((mutation) => mutation.mutate())
+
+      @Component({
+        selector: 'app-fake',
+        template: `
+          @for (mutation of mutationState(); track $index) {
+            <span>{{ mutation.status }}</span>
+          }
+        `,
+      })
+      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 })
+      await vi.advanceTimersByTimeAsync(0)
+
+      let spans = debugElement
+        .queryAll(By.css('span'))
+        .map((span) => span.nativeNode.textContent)
+
+      expect(spans).toEqual(['pending', 'pending'])
+
+      await vi.advanceTimersByTimeAsync(11)
+      fixture.detectChanges()
+
+      spans = debugElement
+        .queryAll(By.css('span'))
+        .map((span) => span.nativeNode.textContent)
+
+      expect(spans).toEqual(['success', 'error'])
+    })
+
+    describe('injection context', () => {
+      it('should throw NG0203 with descriptive error outside injection context', () => {
+        expect(() => {
+          injectMutationState()
+        }).toThrow(/NG0203(.*?)injectMutationState/)
+      })
+
+      it('should be usable outside injection context when passing an injector', () => {
+        const injector = TestBed.inject(Injector)
+        expect(
+          injectMutationState(undefined, {
+            injector,
+          }),
+        ).not.toThrow()
+      })
+    })
+  })
+})

package/src/__tests__/inject-mutation.test-d.ts

@@ -0,0 +1,158 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { sleep } from '@tanstack/query-test-utils'
+import { injectMutation } from '..'
+import type { Signal } from '@angular/core'
+import type {
+  MutationFunctionContext,
+  MutationKey,
+  QueryClient,
+} from '@tanstack/query-core'
+
+describe('injectMutation', () => {
+  describe('Discriminated union return type', () => {
+    it('data should be possibly undefined by default', () => {
+      const mutation = injectMutation(() => ({
+        mutationFn: () => sleep(0).then(() => 'string'),
+      }))
+
+      expectTypeOf(mutation.data).toEqualTypeOf<Signal<string | undefined>>()
+    })
+
+    it('data should be defined when mutation is success', () => {
+      const mutation = injectMutation(() => ({
+        mutationFn: () => sleep(0).then(() => 'string'),
+      }))
+
+      if (mutation.isSuccess()) {
+        expectTypeOf(mutation.data).toEqualTypeOf<Signal<string>>()
+      }
+    })
+
+    it('error should be null when mutation is success', () => {
+      const mutation = injectMutation(() => ({
+        mutationFn: () => sleep(0).then(() => 'string'),
+      }))
+
+      if (mutation.isSuccess()) {
+        expectTypeOf(mutation.error).toEqualTypeOf<Signal<null>>()
+      }
+    })
+
+    it('data should be undefined when mutation is pending', () => {
+      const mutation = injectMutation(() => ({
+        mutationFn: () => sleep(0).then(() => 'string'),
+      }))
+
+      if (mutation.isPending()) {
+        expectTypeOf(mutation.data).toEqualTypeOf<Signal<undefined>>()
+      }
+    })
+
+    it('error should be defined when mutation is error', () => {
+      const mutation = injectMutation(() => ({
+        mutationFn: () => sleep(0).then(() => 'string'),
+      }))
+
+      if (mutation.isError()) {
+        expectTypeOf(mutation.error).toEqualTypeOf<Signal<Error>>()
+      }
+    })
+
+    it('should narrow variables', () => {
+      const mutation = injectMutation(() => ({
+        mutationFn: (_variables: string) => sleep(0).then(() => 'string'),
+      }))
+
+      if (mutation.isIdle()) {
+        expectTypeOf(mutation.variables).toEqualTypeOf<Signal<undefined>>()
+      }
+      if (mutation.isPending()) {
+        expectTypeOf(mutation.variables).toEqualTypeOf<Signal<string>>()
+      }
+      if (mutation.isSuccess()) {
+        expectTypeOf(mutation.variables).toEqualTypeOf<Signal<string>>()
+      }
+      expectTypeOf(mutation.variables).toEqualTypeOf<
+        Signal<string | undefined>
+      >()
+    })
+  })
+
+  it('should infer TOnMutateResult from onMutate return type', () => {
+    injectMutation(() => ({
+      mutationFn: () => sleep(0).then(() => 'string'),
+      onMutate: () => {
+        return { token: 'abc' }
+      },
+      onSuccess: (_data, _variables, onMutateResult) => {
+        expectTypeOf(onMutateResult).toEqualTypeOf<{ token: string }>()
+      },
+      onError: (_error, _variables, onMutateResult) => {
+        expectTypeOf(onMutateResult).toEqualTypeOf<
+          { token: string } | undefined
+        >()
+      },
+    }))
+  })
+
+  it('should allow calling mutate with no arguments when TVariables is optional undefinable', () => {
+    const mutation = injectMutation(() => ({
+      mutationFn: (_variables: number | undefined) => sleep(0).then(() => 1),
+    }))
+
+    expectTypeOf(mutation.mutate).toBeCallableWith()
+    expectTypeOf(mutation.mutateAsync).toBeCallableWith()
+  })
+
+  it('should type context as the last argument for mutationFn and every hook-level callback', () => {
+    injectMutation(() => ({
+      mutationFn: (_variables, context) => {
+        expectTypeOf(context).toEqualTypeOf<MutationFunctionContext>()
+        expectTypeOf(context.client).toEqualTypeOf<QueryClient>()
+        return Promise.resolve('data')
+      },
+      onMutate: (_variables, context) => {
+        expectTypeOf(context).toEqualTypeOf<MutationFunctionContext>()
+      },
+      onSuccess: (_data, _variables, _onMutateResult, context) => {
+        expectTypeOf(context).toEqualTypeOf<MutationFunctionContext>()
+      },
+      onError: (_error, _variables, _onMutateResult, context) => {
+        expectTypeOf(context).toEqualTypeOf<MutationFunctionContext>()
+      },
+      onSettled: (_data, _error, _variables, _onMutateResult, context) => {
+        expectTypeOf(context).toEqualTypeOf<MutationFunctionContext>()
+      },
+    }))
+  })
+
+  it('should type context as the last argument for every per-call mutate option', () => {
+    const mutation = injectMutation(() => ({
+      mutationFn: () => Promise.resolve('data'),
+    }))
+
+    mutation.mutate(undefined, {
+      onSuccess: (_data, _variables, _onMutateResult, context) => {
+        expectTypeOf(context).toEqualTypeOf<MutationFunctionContext>()
+      },
+      onError: (_error, _variables, _onMutateResult, context) => {
+        expectTypeOf(context).toEqualTypeOf<MutationFunctionContext>()
+      },
+      onSettled: (_data, _error, _variables, _onMutateResult, context) => {
+        expectTypeOf(context).toEqualTypeOf<MutationFunctionContext>()
+      },
+    })
+  })
+
+  it('should type context.mutationKey as MutationKey', () => {
+    injectMutation(() => ({
+      mutationKey: ['todos', 'add'] as const,
+      mutationFn: () => Promise.resolve('data'),
+      onSuccess: (_data, _variables, _onMutateResult, context) => {
+        expectTypeOf(context.mutationKey).toEqualTypeOf<
+          MutationKey | undefined
+        >()
+      },
+    }))
+  })
+})