@tanstack/angular-query-experimental 5.103.2 → 5.104.0

package/src/__tests__/inject-infinite-query.test.ts

@@ -0,0 +1,227 @@
+import { TestBed } from '@angular/core/testing'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  Component,
+  Injector,
+  provideZonelessChangeDetection,
+  signal,
+} from '@angular/core'
+import { render } from '@testing-library/angular'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import {
+  QueryClient,
+  injectInfiniteQuery,
+  provideTanStackQuery,
+  skipToken,
+} from '..'
+
+describe('injectInfiniteQuery', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient()
+    vi.useFakeTimers()
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
+    })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should properly execute infinite query', async () => {
+    const key = queryKey()
+
+    @Component({
+      template: `
+        <div>status: {{ query.status() }}</div>
+        <div>pages: {{ query.data()?.pages?.join(', ') ?? 'none' }}</div>
+      `,
+    })
+    class Page {
+      readonly query = injectInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: ({ pageParam }) =>
+          sleep(10).then(() => 'data on page ' + pageParam),
+        initialPageParam: 0,
+        getNextPageParam: () => 12,
+      }))
+    }
+
+    const rendered = await render(Page)
+
+    expect(rendered.getByText('status: pending')).toBeInTheDocument()
+    expect(rendered.getByText('pages: none')).toBeInTheDocument()
+
+    await vi.advanceTimersByTimeAsync(11)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('status: success')).toBeInTheDocument()
+    expect(rendered.getByText('pages: data on page 0')).toBeInTheDocument()
+
+    rendered.fixture.componentInstance.query.fetchNextPage()
+
+    await vi.advanceTimersByTimeAsync(11)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('status: success')).toBeInTheDocument()
+    expect(
+      rendered.getByText('pages: data on page 0, data on page 12'),
+    ).toBeInTheDocument()
+  })
+
+  it('should reject and update signal', async () => {
+    const key = queryKey()
+
+    @Component({
+      template: `
+        <div>status: {{ query.status() }}</div>
+        <div>pages: {{ query.data()?.pages?.join(', ') ?? 'none' }}</div>
+        <div>error: {{ query.error()?.message ?? 'none' }}</div>
+        <div>isError: {{ query.isError() }}</div>
+        <div>failureCount: {{ query.failureCount() }}</div>
+      `,
+    })
+    class Page {
+      readonly query = injectInfiniteQuery(() => ({
+        retry: false,
+        queryKey: key,
+        queryFn: () =>
+          sleep(10).then(() => Promise.reject(new Error('Some error'))),
+        initialPageParam: 0,
+        getNextPageParam: () => 12,
+      }))
+    }
+
+    const rendered = await render(Page)
+
+    expect(rendered.getByText('status: pending')).toBeInTheDocument()
+    expect(rendered.getByText('pages: none')).toBeInTheDocument()
+
+    await vi.advanceTimersByTimeAsync(11)
+    rendered.fixture.detectChanges()
+
+    expect(rendered.getByText('status: error')).toBeInTheDocument()
+    expect(rendered.getByText('pages: none')).toBeInTheDocument()
+    expect(rendered.getByText('error: Some error')).toBeInTheDocument()
+    expect(rendered.getByText('isError: true')).toBeInTheDocument()
+    expect(rendered.getByText('failureCount: 1')).toBeInTheDocument()
+  })
+
+  it('should keep initialData visible alongside the error when a refetch fails', async () => {
+    const key = queryKey()
+
+    @Component({
+      template: `
+        <div>pages: {{ query.data().pages.join(', ') }}</div>
+        <div>isError: {{ query.isError() }}</div>
+      `,
+    })
+    class Page {
+      readonly query = injectInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: () =>
+          sleep(10).then(() => Promise.reject(new Error('Some error'))),
+        initialData: { pages: [1], pageParams: [1] },
+        getNextPageParam: (lastPage: number) => lastPage + 1,
+        initialPageParam: 0,
+        retry: false,
+      }))
+    }
+
+    const rendered = await render(Page)
+
+    expect(rendered.getByText('pages: 1')).toBeInTheDocument()
+    expect(rendered.getByText('isError: false')).toBeInTheDocument()
+
+    await vi.advanceTimersByTimeAsync(11)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('pages: 1')).toBeInTheDocument()
+    expect(rendered.getByText('isError: true')).toBeInTheDocument()
+  })
+
+  describe('skipToken', () => {
+    it('should not fetch when queryFn is skipToken, and fetch once it is replaced', async () => {
+      const key = queryKey()
+      const queryFn = vi.fn(({ pageParam }: { pageParam: number }) =>
+        sleep(10).then(() => `comments for 1 page ${pageParam}`),
+      )
+
+      @Component({
+        template: `
+          <div>status: {{ query.status() }}</div>
+          <div>isFetching: {{ query.isFetching() }}</div>
+          <div>pages: {{ query.data()?.pages?.join(', ') ?? 'none' }}</div>
+        `,
+      })
+      class Page {
+        postId = signal<string | undefined>(undefined)
+
+        readonly query = injectInfiniteQuery(() => ({
+          queryKey: key,
+          queryFn: this.postId() != null ? queryFn : skipToken,
+          initialPageParam: 0,
+          getNextPageParam: () => 12,
+        }))
+      }
+
+      const rendered = await render(Page)
+
+      expect(rendered.getByText('status: pending')).toBeInTheDocument()
+      expect(rendered.getByText('isFetching: false')).toBeInTheDocument()
+
+      await vi.advanceTimersByTimeAsync(11)
+      rendered.fixture.detectChanges()
+      expect(queryFn).not.toHaveBeenCalled()
+      expect(rendered.getByText('status: pending')).toBeInTheDocument()
+      expect(rendered.getByText('isFetching: false')).toBeInTheDocument()
+
+      rendered.fixture.componentInstance.postId.set('1')
+      rendered.fixture.detectChanges()
+      expect(rendered.getByText('isFetching: true')).toBeInTheDocument()
+
+      await vi.advanceTimersByTimeAsync(11)
+      rendered.fixture.detectChanges()
+      expect(queryFn).toHaveBeenCalledTimes(1)
+      expect(rendered.getByText('status: success')).toBeInTheDocument()
+      expect(
+        rendered.getByText('pages: comments for 1 page 0'),
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe('injection context', () => {
+    it('should throw NG0203 with descriptive error outside injection context', () => {
+      const key = queryKey()
+      expect(() => {
+        injectInfiniteQuery(() => ({
+          queryKey: key,
+          queryFn: ({ pageParam }) =>
+            sleep(0).then(() => 'data on page ' + pageParam),
+          initialPageParam: 0,
+          getNextPageParam: () => 12,
+        }))
+      }).toThrow(/NG0203(.*?)injectInfiniteQuery/)
+    })
+
+    it('should be usable outside injection context when passing an injector', () => {
+      const key = queryKey()
+      const query = injectInfiniteQuery(
+        () => ({
+          queryKey: key,
+          queryFn: ({ pageParam }) =>
+            sleep(0).then(() => 'data on page ' + pageParam),
+          initialPageParam: 0,
+          getNextPageParam: () => 12,
+        }),
+        {
+          injector: TestBed.inject(Injector),
+        },
+      )
+
+      expect(query.status()).toBe('pending')
+    })
+  })
+})

package/src/__tests__/inject-is-fetching.test.ts

@@ -0,0 +1,108 @@
+import { TestBed } from '@angular/core/testing'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  Component,
+  Injector,
+  provideZonelessChangeDetection,
+} from '@angular/core'
+import { render } from '@testing-library/angular'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import {
+  QueryClient,
+  injectIsFetching,
+  injectQuery,
+  provideTanStackQuery,
+} from '..'
+
+describe('injectIsFetching', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    queryClient = new QueryClient()
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
+    })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should return the number of fetching queries', async () => {
+    const key = queryKey()
+
+    @Component({
+      template: `<div>fetching: {{ isFetching() }}</div>`,
+    })
+    class Page {
+      readonly query = injectQuery(() => ({
+        queryKey: key,
+        queryFn: () => sleep(100).then(() => 'Some data'),
+      }))
+      readonly isFetching = injectIsFetching()
+    }
+
+    const rendered = await render(Page)
+
+    expect(rendered.getByText('fetching: 0')).toBeInTheDocument()
+
+    await vi.advanceTimersByTimeAsync(0)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('fetching: 1')).toBeInTheDocument()
+
+    await vi.advanceTimersByTimeAsync(101)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('fetching: 0')).toBeInTheDocument()
+  })
+
+  it('should be able to filter by queryKey', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    @Component({
+      template: `<div>fetching: {{ isFetching() }}</div>`,
+    })
+    class Page {
+      readonly query1 = injectQuery(() => ({
+        queryKey: key1,
+        queryFn: () => sleep(10).then(() => 'test1'),
+      }))
+      readonly query2 = injectQuery(() => ({
+        queryKey: key2,
+        queryFn: () => sleep(100).then(() => 'test2'),
+      }))
+      readonly isFetching = injectIsFetching({ queryKey: key1 })
+    }
+
+    const rendered = await render(Page)
+
+    await vi.advanceTimersByTimeAsync(0)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('fetching: 1')).toBeInTheDocument()
+
+    await vi.advanceTimersByTimeAsync(11)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('fetching: 0')).toBeInTheDocument()
+  })
+
+  describe('injection context', () => {
+    it('should throw NG0203 with descriptive error outside injection context', () => {
+      expect(() => {
+        injectIsFetching()
+      }).toThrow(/NG0203(.*?)injectIsFetching/)
+    })
+
+    it('should be usable outside injection context when passing an injector', () => {
+      expect(
+        injectIsFetching(undefined, {
+          injector: TestBed.inject(Injector),
+        }),
+      ).not.toThrow()
+    })
+  })
+})

package/src/__tests__/inject-is-mutating.test.ts

@@ -0,0 +1,113 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { TestBed } from '@angular/core/testing'
+import {
+  Component,
+  Injector,
+  provideZonelessChangeDetection,
+} from '@angular/core'
+import { render } from '@testing-library/angular'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import {
+  QueryClient,
+  injectIsMutating,
+  injectMutation,
+  provideTanStackQuery,
+} from '..'
+
+describe('injectIsMutating', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    queryClient = new QueryClient()
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
+    })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should properly return isMutating state', async () => {
+    const key = queryKey()
+
+    @Component({
+      template: `<div>mutating: {{ isMutating() }}</div>`,
+    })
+    class Page {
+      readonly mutation = injectMutation(() => ({
+        mutationKey: key,
+        mutationFn: (params: { par1: string }) => sleep(10).then(() => params),
+      }))
+      readonly isMutating = injectIsMutating()
+    }
+
+    const rendered = await render(Page)
+
+    expect(rendered.getByText('mutating: 0')).toBeInTheDocument()
+
+    rendered.fixture.componentInstance.mutation.mutate({ par1: 'par1' })
+
+    await vi.advanceTimersByTimeAsync(0)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('mutating: 1')).toBeInTheDocument()
+
+    await vi.advanceTimersByTimeAsync(11)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('mutating: 0')).toBeInTheDocument()
+  })
+
+  it('should be able to filter by mutationKey', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    @Component({
+      template: `<div>mutating: {{ isMutating() }}</div>`,
+    })
+    class Page {
+      readonly mutation1 = injectMutation(() => ({
+        mutationKey: key1,
+        mutationFn: () => sleep(10).then(() => 'data1'),
+      }))
+      readonly mutation2 = injectMutation(() => ({
+        mutationKey: key2,
+        mutationFn: () => sleep(100).then(() => 'data2'),
+      }))
+      readonly isMutating = injectIsMutating({ mutationKey: key1 })
+    }
+
+    const rendered = await render(Page)
+
+    rendered.fixture.componentInstance.mutation1.mutate()
+    rendered.fixture.componentInstance.mutation2.mutate()
+
+    await vi.advanceTimersByTimeAsync(0)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('mutating: 1')).toBeInTheDocument()
+
+    await vi.advanceTimersByTimeAsync(11)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('mutating: 0')).toBeInTheDocument()
+  })
+
+  describe('injection context', () => {
+    it('should throw NG0203 with descriptive error outside injection context', () => {
+      expect(() => {
+        injectIsMutating()
+      }).toThrow(/NG0203(.*?)injectIsMutating/)
+    })
+
+    it('should be usable outside injection context when passing an injector', () => {
+      expect(
+        injectIsMutating(undefined, {
+          injector: TestBed.inject(Injector),
+        }),
+      ).not.toThrow()
+    })
+  })
+})

package/src/__tests__/inject-is-restoring.test.ts

@@ -0,0 +1,93 @@
+import { TestBed } from '@angular/core/testing'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { Injector, provideZonelessChangeDetection, signal } from '@angular/core'
+import {
+  QueryClient,
+  injectIsRestoring,
+  provideIsRestoring,
+  provideTanStackQuery,
+} from '..'
+
+describe('injectIsRestoring', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient()
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
+    })
+  })
+
+  it('should return false by default when provideIsRestoring is not used', () => {
+    const isRestoring = TestBed.runInInjectionContext(() => {
+      return injectIsRestoring()
+    })
+
+    expect(isRestoring()).toBe(false)
+  })
+
+  it('should return the provided signal value when provideIsRestoring is used', () => {
+    const restoringSignal = signal(true)
+
+    TestBed.configureTestingModule({
+      providers: [provideIsRestoring(restoringSignal.asReadonly())],
+    })
+
+    const isRestoring = TestBed.runInInjectionContext(() => {
+      return injectIsRestoring()
+    })
+
+    expect(isRestoring()).toBe(true)
+  })
+
+  it('should reactively reflect changes to the provided signal', () => {
+    const restoringSignal = signal(true)
+
+    TestBed.configureTestingModule({
+      providers: [provideIsRestoring(restoringSignal.asReadonly())],
+    })
+
+    const isRestoring = TestBed.runInInjectionContext(() => {
+      return injectIsRestoring()
+    })
+
+    expect(isRestoring()).toBe(true)
+
+    restoringSignal.set(false)
+    expect(isRestoring()).toBe(false)
+
+    restoringSignal.set(true)
+    expect(isRestoring()).toBe(true)
+  })
+
+  it('should be usable outside injection context when passing an injector', () => {
+    const isRestoring = injectIsRestoring({
+      injector: TestBed.inject(Injector),
+    })
+
+    expect(isRestoring()).toBe(false)
+  })
+
+  it('should return the provided signal value when using injector option', () => {
+    const restoringSignal = signal(true)
+
+    TestBed.configureTestingModule({
+      providers: [provideIsRestoring(restoringSignal.asReadonly())],
+    })
+
+    const isRestoring = injectIsRestoring({
+      injector: TestBed.inject(Injector),
+    })
+
+    expect(isRestoring()).toBe(true)
+  })
+
+  it('should throw NG0203 with descriptive error outside injection context', () => {
+    expect(() => {
+      injectIsRestoring()
+    }).toThrow(/NG0203(.*?)injectIsRestoring/)
+  })
+})

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

@@ -0,0 +1,22 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { injectMutationState } from '..'
+import type { MutationState, MutationStatus } from '..'
+
+describe('injectMutationState', () => {
+  it('should default to QueryState', () => {
+    const result = injectMutationState(() => ({
+      filters: { status: 'pending' },
+    }))
+
+    expectTypeOf(result()).toEqualTypeOf<Array<MutationState>>()
+  })
+
+  it('should infer with select', () => {
+    const result = injectMutationState(() => ({
+      filters: { status: 'pending' },
+      select: (mutation) => mutation.state.status,
+    }))
+
+    expectTypeOf(result()).toEqualTypeOf<Array<MutationStatus>>()
+  })
+})