@tanstack/angular-query-experimental 5.103.2 → 5.104.0

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

@@ -0,0 +1,196 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { queryKey } from '@tanstack/query-test-utils'
+import { skipToken } from '..'
+import { injectQueries } from '../inject-queries'
+import { queryOptions } from '../query-options'
+import type { CreateQueryOptions, CreateQueryResult, OmitKeyof } from '..'
+import type { Signal } from '@angular/core'
+
+describe('injectQueries', () => {
+  describe('config object overload', () => {
+    it('TData should always be defined when initialData is provided as an object', () => {
+      const key1 = queryKey()
+      const key2 = queryKey()
+      const key3 = queryKey()
+
+      const query1 = {
+        queryKey: key1,
+        queryFn: () => {
+          return {
+            wow: true,
+          }
+        },
+        initialData: {
+          wow: false,
+        },
+      }
+
+      const query2 = {
+        queryKey: key2,
+        queryFn: () => 'Query Data',
+        initialData: 'initial data',
+      }
+
+      const query3 = {
+        queryKey: key3,
+        queryFn: () => 'Query Data',
+      }
+
+      const queryResults = injectQueries(() => ({
+        queries: [query1, query2, query3],
+      }))
+
+      const query1Data = queryResults()[0].data()
+      const query2Data = queryResults()[1].data()
+      const query3Data = queryResults()[2].data()
+
+      expectTypeOf(query1Data).toEqualTypeOf<{ wow: boolean }>()
+      expectTypeOf(query2Data).toEqualTypeOf<string>()
+      expectTypeOf(query3Data).toEqualTypeOf<string | undefined>()
+    })
+
+    it('TData should be defined when passed through queryOptions', () => {
+      const key = queryKey()
+      const options = queryOptions({
+        queryKey: key,
+        queryFn: () => {
+          return {
+            wow: true,
+          }
+        },
+        initialData: {
+          wow: true,
+        },
+      })
+      const queryResults = injectQueries(() => ({ queries: [options] }))
+
+      const data = queryResults()[0].data()
+
+      expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
+    })
+
+    it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into injectQuery', () => {
+      const key1 = queryKey()
+      const key2 = queryKey()
+
+      const query1 = queryOptions({
+        queryKey: key1,
+        queryFn: () => Promise.resolve(1),
+        select: (data) => data > 1,
+      })
+
+      const query2 = {
+        queryKey: key2,
+        queryFn: () => Promise.resolve(1),
+        select: (data: number) => data > 1,
+      }
+
+      const queryResults = injectQueries(() => ({ queries: [query1, query2] }))
+      const query1Data = queryResults()[0].data()
+      const query2Data = queryResults()[1].data()
+
+      expectTypeOf(query1Data).toEqualTypeOf<boolean | undefined>()
+      expectTypeOf(query2Data).toEqualTypeOf<boolean | undefined>()
+    })
+
+    it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
+      const key = queryKey()
+      const queryResults = injectQueries(() => ({
+        queries: [
+          {
+            queryKey: key,
+            queryFn: () => {
+              return {
+                wow: true,
+              }
+            },
+            initialData: () => undefined as { wow: boolean } | undefined,
+          },
+        ],
+      }))
+
+      const data = queryResults()[0].data()
+
+      expectTypeOf(data).toEqualTypeOf<{ wow: boolean } | undefined>()
+    })
+
+    describe('custom injectable', () => {
+      it('should allow custom hooks using UseQueryOptions', () => {
+        type Data = string
+        const key = queryKey()
+
+        const injectCustomQueries = (
+          options?: OmitKeyof<CreateQueryOptions<Data>, 'queryKey' | 'queryFn'>,
+        ) => {
+          return injectQueries(() => ({
+            queries: [
+              {
+                ...options,
+                queryKey: key,
+                queryFn: () => Promise.resolve('data'),
+              },
+            ],
+          }))
+        }
+
+        const queryResults = injectCustomQueries()
+        const data = queryResults()[0].data()
+
+        expectTypeOf(data).toEqualTypeOf<Data | undefined>()
+      })
+    })
+
+    it('TData should have correct type when conditional skipToken is passed', () => {
+      const key = queryKey()
+      const queryResults = injectQueries(() => ({
+        queries: [
+          {
+            queryKey: key,
+            queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+          },
+        ],
+      }))
+
+      const firstResult = queryResults()[0]
+
+      expectTypeOf(firstResult).toEqualTypeOf<
+        CreateQueryResult<number, Error>
+      >()
+      expectTypeOf(firstResult.data()).toEqualTypeOf<number | undefined>()
+    })
+
+    it('should return correct data for dynamic queries with mixed result types', () => {
+      const key1 = queryKey()
+      const key2 = queryKey()
+
+      const Queries1 = {
+        get: () =>
+          queryOptions({
+            queryKey: key1,
+            queryFn: () => Promise.resolve(1),
+          }),
+      }
+      const Queries2 = {
+        get: () =>
+          queryOptions({
+            queryKey: key2,
+            queryFn: () => Promise.resolve(true),
+          }),
+      }
+
+      const queries1List = [1, 2, 3].map(() => ({ ...Queries1.get() }))
+      const result = injectQueries(() => ({
+        queries: [...queries1List, { ...Queries2.get() }],
+      }))
+
+      expectTypeOf(result).branded.toEqualTypeOf<
+        Signal<
+          [
+            ...Array<CreateQueryResult<number, Error>>,
+            CreateQueryResult<boolean, Error>,
+          ]
+        >
+      >()
+    })
+  })
+})

package/src/__tests__/inject-queries.test.ts

@@ -0,0 +1,240 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  Component,
+  effect,
+  provideZonelessChangeDetection,
+  signal,
+} from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { render } from '@testing-library/angular'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import { QueryClient, provideIsRestoring, provideTanStackQuery } from '..'
+import { injectQueries } from '../inject-queries'
+
+describe('injectQueries', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    queryClient = new QueryClient()
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
+    })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should return the correct states', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const results: Array<Array<Record<string, any>>> = []
+
+    @Component({
+      template: `
+        <div>
+          <div>
+            data1: {{ result()[0].data() ?? 'null' }}, data2:
+            {{ result()[1].data() ?? 'null' }}
+          </div>
+        </div>
+      `,
+    })
+    class Page {
+      readonly result = injectQueries(() => ({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: () => sleep(10).then(() => 1),
+          },
+          {
+            queryKey: key2,
+            queryFn: () => sleep(100).then(() => 2),
+          },
+        ],
+      }))
+
+      constructor() {
+        effect(() => {
+          const snapshot = this.result().map((q) => ({ data: q.data() }))
+          results.push(snapshot)
+        })
+      }
+    }
+
+    const rendered = await render(Page)
+
+    await vi.advanceTimersByTimeAsync(101)
+    rendered.fixture.detectChanges()
+
+    expect(rendered.getByText('data1: 1, data2: 2')).toBeInTheDocument()
+
+    expect(results.length).toBe(3)
+    expect(results[0]).toMatchObject([{ data: undefined }, { data: undefined }])
+    expect(results[1]).toMatchObject([{ data: 1 }, { data: undefined }])
+    expect(results[2]).toMatchObject([{ data: 1 }, { data: 2 }])
+  })
+
+  it('should return the combined result when combine is provided', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const results: Array<Record<string, any>> = []
+
+    @Component({
+      template: `
+        <div>data: {{ combined().data.join(',') }}</div>
+        <div>isPending: {{ combined().isPending }}</div>
+      `,
+    })
+    class Page {
+      readonly combined = injectQueries(() => ({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: () => sleep(10).then(() => 1),
+          },
+          {
+            queryKey: key2,
+            queryFn: () => sleep(10).then(() => 2),
+          },
+        ],
+        combine: (queries) => ({
+          data: queries.map((q) => q.data),
+          isPending: queries.some((q) => q.isPending),
+        }),
+      }))
+
+      constructor() {
+        effect(() => {
+          results.push({ ...this.combined() })
+        })
+      }
+    }
+
+    const rendered = await render(Page)
+
+    expect(rendered.getByText('data: ,')).toBeInTheDocument()
+    expect(rendered.getByText('isPending: true')).toBeInTheDocument()
+    expect(results[0]).toMatchObject({
+      data: [undefined, undefined],
+      isPending: true,
+    })
+
+    await vi.advanceTimersByTimeAsync(11)
+    rendered.fixture.detectChanges()
+
+    expect(rendered.getByText('data: 1,2')).toBeInTheDocument()
+    expect(rendered.getByText('isPending: false')).toBeInTheDocument()
+    expect(results[results.length - 1]).toMatchObject({
+      data: [1, 2],
+      isPending: false,
+    })
+    expect(results.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('should reflect error state when one of the queries rejects', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    @Component({
+      template: `
+        <div>
+          status1: {{ result()[0].status() }}, error1:
+          {{ result()[0].error()?.message ?? 'none' }}
+        </div>
+        <div>
+          status2: {{ result()[1].status() }}, data2:
+          {{ result()[1].data() ?? 'none' }}
+        </div>
+      `,
+    })
+    class Page {
+      readonly result = injectQueries(() => ({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: () =>
+              sleep(10).then(() => Promise.reject(new Error('Some error'))),
+            retry: false,
+          },
+          {
+            queryKey: key2,
+            queryFn: () => sleep(10).then(() => 2),
+          },
+        ],
+      }))
+    }
+
+    const rendered = await render(Page)
+
+    await vi.advanceTimersByTimeAsync(11)
+    rendered.fixture.detectChanges()
+
+    expect(
+      rendered.getByText('status1: error, error1: Some error'),
+    ).toBeInTheDocument()
+    expect(rendered.getByText('status2: success, data2: 2')).toBeInTheDocument()
+  })
+
+  describe('isRestoring', () => {
+    it('should not fetch for the duration of the restoring period when isRestoring is true', async () => {
+      const key1 = queryKey()
+      const key2 = queryKey()
+      const queryFn1 = vi.fn().mockImplementation(() => sleep(10).then(() => 1))
+      const queryFn2 = vi.fn().mockImplementation(() => sleep(10).then(() => 2))
+
+      TestBed.configureTestingModule({
+        providers: [provideIsRestoring(signal(true).asReadonly())],
+      })
+
+      @Component({
+        template: `
+          <div>
+            status1: {{ queries()[0].status() }}, fetchStatus1:
+            {{ queries()[0].fetchStatus() }}
+          </div>
+          <div>
+            status2: {{ queries()[1].status() }}, fetchStatus2:
+            {{ queries()[1].fetchStatus() }}
+          </div>
+        `,
+      })
+      class Page {
+        readonly queries = injectQueries(() => ({
+          queries: [
+            { queryKey: key1, queryFn: queryFn1 },
+            { queryKey: key2, queryFn: queryFn2 },
+          ],
+        }))
+      }
+
+      const rendered = await render(Page)
+
+      await vi.advanceTimersByTimeAsync(0)
+      rendered.fixture.detectChanges()
+      expect(
+        rendered.getByText('status1: pending, fetchStatus1: idle'),
+      ).toBeInTheDocument()
+      expect(
+        rendered.getByText('status2: pending, fetchStatus2: idle'),
+      ).toBeInTheDocument()
+      expect(queryFn1).toHaveBeenCalledTimes(0)
+      expect(queryFn2).toHaveBeenCalledTimes(0)
+
+      await vi.advanceTimersByTimeAsync(11)
+      rendered.fixture.detectChanges()
+      expect(
+        rendered.getByText('status1: pending, fetchStatus1: idle'),
+      ).toBeInTheDocument()
+      expect(
+        rendered.getByText('status2: pending, fetchStatus2: idle'),
+      ).toBeInTheDocument()
+      expect(queryFn1).toHaveBeenCalledTimes(0)
+      expect(queryFn2).toHaveBeenCalledTimes(0)
+    })
+  })
+})