@tanstack/angular-query-experimental 5.103.1 → 5.103.3

package/src/__tests__/infinite-query-options.test-d.ts

@@ -0,0 +1,314 @@
+import { assertType, describe, expectTypeOf, it } from 'vitest'
+import { queryKey } from '@tanstack/query-test-utils'
+import { QueryClient, dataTagSymbol, skipToken } from '@tanstack/query-core'
+import { infiniteQueryOptions } from '../infinite-query-options'
+import { injectInfiniteQuery } from '../inject-infinite-query'
+import { injectQuery } from '../inject-query'
+import type {
+  DataTag,
+  InfiniteData,
+  InitialDataFunction,
+} from '@tanstack/query-core'
+
+// Regression test for exported infiniteQueryOptions inference under declaration emit.
+// TypeScript should be able to name the return type without expanding the
+// internal data tag symbols into the consumer's .d.ts output.
+export const exportedInfiniteQueryOptions = infiniteQueryOptions({
+  queryKey: ['invalid'],
+  getNextPageParam: () => 1,
+  initialPageParam: 1,
+})
+
+describe('infiniteQueryOptions', () => {
+  it('should not allow excess properties', () => {
+    const key = queryKey()
+    assertType(
+      infiniteQueryOptions({
+        queryKey: key,
+        queryFn: () => Promise.resolve('data'),
+        getNextPageParam: () => 1,
+        initialPageParam: 1,
+        // @ts-expect-error this is a good error, because stallTime does not exist!
+        stallTime: 1000,
+      }),
+    )
+  })
+  it('should infer types for callbacks', () => {
+    const key = queryKey()
+    infiniteQueryOptions({
+      queryKey: key,
+      queryFn: () => Promise.resolve('data'),
+      staleTime: 1000,
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+      select: (data) => {
+        expectTypeOf(data).toEqualTypeOf<InfiniteData<string, number>>()
+      },
+    })
+  })
+  it('should work when passed to useInfiniteQuery', () => {
+    const key = queryKey()
+    const options = infiniteQueryOptions({
+      queryKey: key,
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+
+    const { data } = injectInfiniteQuery(() => options)
+
+    // known issue: type of pageParams is unknown when returned from useInfiniteQuery
+    expectTypeOf(data()).toEqualTypeOf<
+      InfiniteData<string, unknown> | undefined
+    >()
+  })
+
+  it('should work when passed to fetchInfiniteQuery', async () => {
+    const key = queryKey()
+    const options = infiniteQueryOptions({
+      queryKey: key,
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+
+    // eslint-disable-next-line no-restricted-syntax -- grandfathered direct test
+    const data = await new QueryClient().fetchInfiniteQuery(options)
+
+    expectTypeOf(data).toEqualTypeOf<InfiniteData<string, number>>()
+  })
+
+  it('should work when passed to infiniteQuery', async () => {
+    const options = infiniteQueryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+
+    const data = await new QueryClient().infiniteQuery(options)
+
+    expectTypeOf(data).toEqualTypeOf<InfiniteData<string, number>>()
+  })
+
+  it('should work when passed to infiniteQuery with select', async () => {
+    const options = infiniteQueryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+      select: (data) => data.pages,
+    })
+
+    const data = await new QueryClient().infiniteQuery(options)
+
+    expectTypeOf(data).toEqualTypeOf<Array<string>>()
+  })
+
+  it('should work when passed to infiniteQuery with enabled: false', async () => {
+    const options = infiniteQueryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+      enabled: false,
+    })
+
+    const data = await new QueryClient().infiniteQuery(options)
+
+    expectTypeOf(data).toEqualTypeOf<InfiniteData<string, number>>()
+  })
+
+  it('should work when passed to infiniteQuery with skipToken', async () => {
+    const options = infiniteQueryOptions({
+      queryKey: ['key'],
+      queryFn: skipToken,
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+
+    const data = await new QueryClient().infiniteQuery(options)
+
+    expectTypeOf(data).toEqualTypeOf<InfiniteData<unknown, number>>()
+  })
+
+  it('should tag the queryKey with the result type of the QueryFn', () => {
+    const key = queryKey()
+    const { queryKey: tagged } = infiniteQueryOptions({
+      queryKey: key,
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+
+    expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
+  })
+  it('should tag the queryKey even if no promise is returned', () => {
+    const key = queryKey()
+    const { queryKey: tagged } = infiniteQueryOptions({
+      queryKey: key,
+      queryFn: () => 'string',
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+
+    expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
+  })
+  it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
+    const key = queryKey()
+    const { queryKey: tagged } = infiniteQueryOptions({
+      queryKey: key,
+      queryFn: () => Promise.resolve('string'),
+      select: (data) => data.pages,
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+
+    expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
+  })
+  it('should return the proper type when passed to getQueryData', () => {
+    const key = queryKey()
+    const { queryKey: tagged } = infiniteQueryOptions({
+      queryKey: key,
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+
+    const queryClient = new QueryClient()
+    const data = queryClient.getQueryData(tagged)
+
+    expectTypeOf(data).toEqualTypeOf<
+      InfiniteData<string, unknown> | undefined
+    >()
+  })
+  it('should properly type when passed to setQueryData', () => {
+    const key = queryKey()
+    const { queryKey: tagged } = infiniteQueryOptions({
+      queryKey: key,
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+
+    const queryClient = new QueryClient()
+    const data = queryClient.setQueryData(tagged, (prev) => {
+      expectTypeOf(prev).toEqualTypeOf<
+        InfiniteData<string, unknown> | undefined
+      >()
+      return prev
+    })
+
+    expectTypeOf(data).toEqualTypeOf<
+      InfiniteData<string, unknown> | undefined
+    >()
+  })
+
+  it('should not be allowed to be passed to non-infinite query functions', () => {
+    const key = queryKey()
+    const queryClient = new QueryClient()
+    const options = infiniteQueryOptions({
+      queryKey: key,
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+    assertType(
+      // @ts-expect-error cannot pass infinite options to non-infinite query functions
+      injectQuery(() => options),
+    )
+    assertType(
+      // @ts-expect-error cannot pass infinite options to non-infinite query functions
+      queryClient.query(options),
+    )
+
+    // deprecated methods below to be removed next major version
+    assertType(
+      // @ts-expect-error cannot pass infinite options to non-infinite query functions
+      // eslint-disable-next-line no-restricted-syntax -- grandfathered direct test
+      queryClient.ensureQueryData(options),
+    )
+    assertType(
+      // @ts-expect-error cannot pass infinite options to non-infinite query functions
+      // eslint-disable-next-line no-restricted-syntax -- grandfathered direct test
+      queryClient.fetchQuery(options),
+    )
+    assertType(
+      // @ts-expect-error cannot pass infinite options to non-infinite query functions
+      // eslint-disable-next-line no-restricted-syntax -- grandfathered direct test
+      queryClient.prefetchQuery(options),
+    )
+  })
+
+  it('should allow optional initialData function', () => {
+    const key = queryKey()
+    const initialData: { example: boolean } | undefined = { example: true }
+    const queryOptions = infiniteQueryOptions({
+      queryKey: key,
+      queryFn: () => initialData,
+      initialData: initialData
+        ? () => ({ pages: [initialData], pageParams: [] })
+        : undefined,
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+    expectTypeOf(queryOptions.initialData).toExtend<
+      | InitialDataFunction<InfiniteData<{ example: boolean }, number>>
+      | InfiniteData<{ example: boolean }, number>
+      | undefined
+    >()
+  })
+
+  it('should allow optional initialData object', () => {
+    const key = queryKey()
+    const initialData: { example: boolean } | undefined = { example: true }
+    const queryOptions = infiniteQueryOptions({
+      queryKey: key,
+      queryFn: () => initialData,
+      initialData: initialData
+        ? { pages: [initialData], pageParams: [] }
+        : undefined,
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+    expectTypeOf(queryOptions.initialData).toExtend<
+      | InitialDataFunction<InfiniteData<{ example: boolean }, number>>
+      | InfiniteData<{ example: boolean }, number>
+      | undefined
+    >()
+  })
+
+  it('should return a custom query key type', () => {
+    type MyQueryKey = [Array<string>, { type: 'foo' }]
+
+    const options = infiniteQueryOptions({
+      queryKey: [['key'], { type: 'foo' }] as MyQueryKey,
+      queryFn: () => Promise.resolve(1),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+
+    expectTypeOf(options.queryKey).toEqualTypeOf<
+      DataTag<MyQueryKey, InfiniteData<number>, Error>
+    >()
+  })
+
+  it('should return a custom query key type with datatag', () => {
+    type MyQueryKey = DataTag<
+      [Array<string>, { type: 'foo' }],
+      number,
+      Error & { myMessage: string }
+    >
+
+    const options = infiniteQueryOptions({
+      queryKey: [['key'], { type: 'foo' }] as MyQueryKey,
+      queryFn: () => Promise.resolve(1),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+    })
+
+    expectTypeOf(options.queryKey).toEqualTypeOf<
+      DataTag<MyQueryKey, InfiniteData<number>, Error & { myMessage: string }>
+    >()
+  })
+})

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

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { queryKey } from '@tanstack/query-test-utils'
+
+import { infiniteQueryOptions } from '../infinite-query-options'
+import type { CreateInfiniteQueryOptions } from '../types'
+
+describe('infiniteQueryOptions', () => {
+  it('should return the object received as a parameter without any modification.', () => {
+    const key = queryKey()
+    const object: CreateInfiniteQueryOptions = {
+      queryKey: key,
+      queryFn: () => Promise.resolve(5),
+      getNextPageParam: () => null,
+      initialPageParam: null,
+    }
+
+    expect(infiniteQueryOptions(object)).toBe(object)
+  })
+})

package/src/__tests__/inject-devtools-panel.test.ts

@@ -0,0 +1,196 @@
+import {
+  ElementRef,
+  provideZonelessChangeDetection,
+  signal,
+} from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { QueryClient } from '@tanstack/query-core'
+import { provideTanStackQuery } from '../providers'
+import { injectDevtoolsPanel } from '../devtools-panel'
+
+const mockDevtoolsPanelInstance = {
+  mount: vi.fn(),
+  unmount: vi.fn(),
+  setClient: vi.fn(),
+  setErrorTypes: vi.fn(),
+  setOnClose: vi.fn(),
+}
+
+const mocks = vi.hoisted(() => {
+  function MockTanstackQueryDevtoolsPanel() {
+    return mockDevtoolsPanelInstance
+  }
+
+  return {
+    mockTanstackQueryDevtoolsPanel: vi.fn(MockTanstackQueryDevtoolsPanel),
+  }
+})
+
+vi.mock('@tanstack/query-devtools', () => ({
+  TanstackQueryDevtoolsPanel: mocks.mockTanstackQueryDevtoolsPanel,
+}))
+
+describe('injectDevtoolsPanel', () => {
+  let queryClient: QueryClient
+  let mockElementRef: ElementRef
+
+  const waitForDevtoolsToBeCreated = async () => {
+    await vi.waitFor(() => {
+      expect(mocks.mockTanstackQueryDevtoolsPanel).toHaveBeenCalledTimes(1)
+    })
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    queryClient = new QueryClient()
+    mockElementRef = new ElementRef(document.createElement('div'))
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+        { provide: ElementRef, useValue: signal(mockElementRef) },
+      ],
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('should return a DevtoolsPanelRef', () => {
+    const result = TestBed.runInInjectionContext(() => {
+      return injectDevtoolsPanel(() => ({
+        hostElement: TestBed.inject(ElementRef),
+      }))
+    })
+
+    expect(result).toEqual({
+      destroy: expect.any(Function),
+    })
+  })
+
+  it('should initialize TanstackQueryDevtoolsPanel', async () => {
+    TestBed.runInInjectionContext(() => {
+      injectDevtoolsPanel(() => ({
+        hostElement: TestBed.inject(ElementRef),
+      }))
+    })
+
+    TestBed.tick()
+
+    await waitForDevtoolsToBeCreated()
+
+    expect(mockDevtoolsPanelInstance.mount).toHaveBeenCalledTimes(1)
+  })
+
+  it('should destroy TanstackQueryDevtoolsPanel', async () => {
+    const result = TestBed.runInInjectionContext(() => {
+      return injectDevtoolsPanel(() => ({
+        hostElement: TestBed.inject(ElementRef),
+      }))
+    })
+
+    TestBed.tick()
+
+    await waitForDevtoolsToBeCreated()
+
+    result.destroy()
+
+    expect(mockDevtoolsPanelInstance.unmount).toHaveBeenCalledTimes(1)
+  })
+
+  it('should destroy TanstackQueryDevtoolsPanel when hostElement is removed', async () => {
+    const hostElement = signal<ElementRef>(mockElementRef)
+
+    TestBed.runInInjectionContext(() => {
+      return injectDevtoolsPanel(() => ({
+        hostElement: hostElement(),
+      }))
+    })
+
+    TestBed.tick()
+
+    await waitForDevtoolsToBeCreated()
+
+    expect(mockDevtoolsPanelInstance.unmount).toHaveBeenCalledTimes(0)
+
+    hostElement.set(null as unknown as ElementRef)
+
+    TestBed.tick()
+
+    expect(mockDevtoolsPanelInstance.unmount).toHaveBeenCalledTimes(1)
+  })
+
+  it('should update client', async () => {
+    const client = signal(new QueryClient())
+
+    TestBed.runInInjectionContext(() => {
+      return injectDevtoolsPanel(() => ({
+        hostElement: TestBed.inject(ElementRef),
+        client: client(),
+      }))
+    })
+
+    TestBed.tick()
+
+    await waitForDevtoolsToBeCreated()
+
+    expect(mockDevtoolsPanelInstance.setClient).toHaveBeenCalledTimes(0)
+
+    client.set(new QueryClient())
+
+    TestBed.tick()
+
+    expect(mockDevtoolsPanelInstance.setClient).toHaveBeenCalledTimes(1)
+  })
+
+  it('should update error types', async () => {
+    const errorTypes = signal([])
+
+    TestBed.runInInjectionContext(() => {
+      return injectDevtoolsPanel(() => ({
+        hostElement: TestBed.inject(ElementRef),
+        errorTypes: errorTypes(),
+      }))
+    })
+
+    TestBed.tick()
+
+    await waitForDevtoolsToBeCreated()
+
+    expect(mockDevtoolsPanelInstance.setErrorTypes).toHaveBeenCalledTimes(0)
+
+    errorTypes.set([])
+
+    TestBed.tick()
+
+    expect(mockDevtoolsPanelInstance.setErrorTypes).toHaveBeenCalledTimes(1)
+  })
+
+  it('should update onclose', async () => {
+    const functionA = () => {}
+    const functionB = () => {}
+
+    const onClose = signal(functionA)
+
+    TestBed.runInInjectionContext(() => {
+      return injectDevtoolsPanel(() => ({
+        hostElement: TestBed.inject(ElementRef),
+        onClose: onClose(),
+      }))
+    })
+
+    TestBed.tick()
+
+    await waitForDevtoolsToBeCreated()
+
+    expect(mockDevtoolsPanelInstance.setOnClose).toHaveBeenCalledTimes(0)
+
+    onClose.set(functionB)
+
+    TestBed.tick()
+
+    expect(mockDevtoolsPanelInstance.setOnClose).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -0,0 +1,66 @@
+import { TestBed } from '@angular/core/testing'
+import { afterEach, beforeEach, describe, expectTypeOf, it, vi } from 'vitest'
+import { provideZonelessChangeDetection } from '@angular/core'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
+import {
+  QueryClient,
+  injectInfiniteQuery,
+  provideTanStackQuery,
+  skipToken,
+} from '..'
+import type { InfiniteData } from '@tanstack/query-core'
+
+describe('injectInfiniteQuery', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient()
+    vi.useFakeTimers()
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
+    })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should narrow type after isSuccess', () => {
+    const key = queryKey()
+    const query = TestBed.runInInjectionContext(() => {
+      return injectInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: ({ pageParam }) =>
+          sleep(0).then(() => 'data on page ' + pageParam),
+        initialPageParam: 0,
+        getNextPageParam: () => 12,
+      }))
+    })
+
+    if (query.isSuccess()) {
+      const data = query.data()
+      expectTypeOf(data).toEqualTypeOf<InfiniteData<string, unknown>>()
+    }
+  })
+
+  it('should work when queryFn is skipToken', () => {
+    const key = queryKey()
+    const query = TestBed.runInInjectionContext(() => {
+      return injectInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: skipToken,
+        initialPageParam: 0,
+        getNextPageParam: () => 1,
+      }))
+    })
+
+    // TPageParam falls back to `unknown` here (unlike `infiniteQueryOptions`, which infers
+    // `number` for the same options) because there's no skipToken-specific overload to carry it.
+    expectTypeOf(query.data()).toEqualTypeOf<
+      InfiniteData<unknown, unknown> | undefined
+    >()
+  })
+})