@tanstack/angular-query-experimental 5.12.1

package/src/injectQueries.ts

@@ -0,0 +1,249 @@
+import { QueriesObserver, notifyManager } from '@tanstack/query-core'
+import { DestroyRef, computed, effect, inject, signal } from '@angular/core'
+import { assertInjector } from 'ngxtension/assert-injector'
+import { injectQueryClient } from './injectQueryClient'
+import type { Injector, Signal } from '@angular/core'
+import type {
+  DefaultError,
+  QueriesObserverOptions,
+  QueriesPlaceholderDataFunction,
+  QueryFunction,
+  QueryKey,
+  QueryObserverOptions,
+  QueryObserverResult,
+  ThrowOnError,
+} from '@tanstack/query-core'
+
+// This defines the `CreateQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
+// `placeholderData` function does not have a parameter
+type QueryObserverOptionsForCreateQueries<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = Omit<
+  QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>,
+  'placeholderData'
+> & {
+  placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction<TQueryFnData>
+}
+
+// Avoid TS depth-limit error in case of large array literal
+type MAXIMUM_DEPTH = 20
+
+type GetOptions<T> =
+  // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }
+  T extends {
+    queryFnData: infer TQueryFnData
+    error?: infer TError
+    data: infer TData
+  }
+    ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError, TData>
+    : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
+      ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError>
+      : T extends { data: infer TData; error?: infer TError }
+        ? QueryObserverOptionsForCreateQueries<unknown, TError, TData>
+        : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]
+          T extends [infer TQueryFnData, infer TError, infer TData]
+          ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError, TData>
+          : T extends [infer TQueryFnData, infer TError]
+            ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError>
+            : T extends [infer TQueryFnData]
+              ? QueryObserverOptionsForCreateQueries<TQueryFnData>
+              : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided
+                T extends {
+                    queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey>
+                    select: (data: any) => infer TData
+                    throwOnError?: ThrowOnError<any, infer TError, any, any>
+                  }
+                ? QueryObserverOptionsForCreateQueries<
+                    TQueryFnData,
+                    TError,
+                    TData,
+                    TQueryKey
+                  >
+                : T extends {
+                      queryFn?: QueryFunction<
+                        infer TQueryFnData,
+                        infer TQueryKey
+                      >
+                      throwOnError?: ThrowOnError<any, infer TError, any, any>
+                    }
+                  ? QueryObserverOptionsForCreateQueries<
+                      TQueryFnData,
+                      TError,
+                      TQueryFnData,
+                      TQueryKey
+                    >
+                  : // Fallback
+                    QueryObserverOptionsForCreateQueries
+
+type GetResults<T> =
+  // Part 1: responsible for mapping explicit type parameter to function result, if object
+  T extends { queryFnData: any; error?: infer TError; data: infer TData }
+    ? QueryObserverResult<TData, TError>
+    : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
+      ? QueryObserverResult<TQueryFnData, TError>
+      : T extends { data: infer TData; error?: infer TError }
+        ? QueryObserverResult<TData, TError>
+        : // Part 2: responsible for mapping explicit type parameter to function result, if tuple
+          T extends [any, infer TError, infer TData]
+          ? QueryObserverResult<TData, TError>
+          : T extends [infer TQueryFnData, infer TError]
+            ? QueryObserverResult<TQueryFnData, TError>
+            : T extends [infer TQueryFnData]
+              ? QueryObserverResult<TQueryFnData>
+              : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided
+                T extends {
+                    queryFn?: QueryFunction<unknown, any>
+                    select: (data: any) => infer TData
+                    throwOnError?: ThrowOnError<any, infer TError, any, any>
+                  }
+                ? QueryObserverResult<
+                    TData,
+                    unknown extends TError ? DefaultError : TError
+                  >
+                : T extends {
+                      queryFn?: QueryFunction<infer TQueryFnData, any>
+                      throwOnError?: ThrowOnError<any, infer TError, any, any>
+                    }
+                  ? QueryObserverResult<
+                      TQueryFnData,
+                      unknown extends TError ? DefaultError : TError
+                    >
+                  : // Fallback
+                    QueryObserverResult
+
+/**
+ * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
+ */
+export type QueriesOptions<
+  T extends Array<any>,
+  Result extends Array<any> = [],
+  Depth extends ReadonlyArray<number> = [],
+> = Depth['length'] extends MAXIMUM_DEPTH
+  ? Array<QueryObserverOptionsForCreateQueries>
+  : T extends []
+    ? []
+    : T extends [infer Head]
+      ? [...Result, GetOptions<Head>]
+      : T extends [infer Head, ...infer Tail]
+        ? QueriesOptions<
+            [...Tail],
+            [...Result, GetOptions<Head>],
+            [...Depth, 1]
+          >
+        : Array<unknown> extends T
+          ? T
+          : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type!
+            // use this to infer the param types in the case of Array.map() argument
+            T extends Array<
+                QueryObserverOptionsForCreateQueries<
+                  infer TQueryFnData,
+                  infer TError,
+                  infer TData,
+                  infer TQueryKey
+                >
+              >
+            ? Array<
+                QueryObserverOptionsForCreateQueries<
+                  TQueryFnData,
+                  TError,
+                  TData,
+                  TQueryKey
+                >
+              >
+            : // Fallback
+              Array<QueryObserverOptionsForCreateQueries>
+
+/**
+ * QueriesResults reducer recursively maps type param to results
+ */
+export type QueriesResults<
+  T extends Array<any>,
+  Result extends Array<any> = [],
+  Depth extends ReadonlyArray<number> = [],
+> = Depth['length'] extends MAXIMUM_DEPTH
+  ? Array<QueryObserverResult>
+  : T extends []
+    ? []
+    : T extends [infer Head]
+      ? [...Result, GetResults<Head>]
+      : T extends [infer Head, ...infer Tail]
+        ? QueriesResults<
+            [...Tail],
+            [...Result, GetResults<Head>],
+            [...Depth, 1]
+          >
+        : T extends Array<
+              QueryObserverOptionsForCreateQueries<
+                infer TQueryFnData,
+                infer TError,
+                infer TData,
+                any
+              >
+            >
+          ? // Dynamic-size (homogenous) CreateQueryOptions array: map directly to array of results
+            Array<
+              QueryObserverResult<
+                unknown extends TData ? TQueryFnData : TData,
+                unknown extends TError ? DefaultError : TError
+              >
+            >
+          : // Fallback
+            Array<QueryObserverResult>
+
+export function injectQueries<
+  T extends Array<any>,
+  TCombinedResult = QueriesResults<T>,
+>(
+  {
+    queries,
+    ...options
+  }: {
+    queries: Signal<[...QueriesOptions<T>]>
+    combine?: (result: QueriesResults<T>) => TCombinedResult
+  },
+  injector?: Injector,
+): Signal<TCombinedResult> {
+  return assertInjector(injectQueries, injector, () => {
+    const queryClient = injectQueryClient()
+    const destroyRef = inject(DestroyRef)
+
+    const defaultedQueries = computed(() => {
+      return queries().map((opts) => {
+        const defaultedOptions = queryClient.defaultQueryOptions(opts)
+        // Make sure the results are already in fetching state before subscribing or updating options
+        defaultedOptions._optimisticResults = 'optimistic'
+
+        return defaultedOptions
+      })
+    })
+
+    const observer = new QueriesObserver<TCombinedResult>(
+      queryClient,
+      defaultedQueries(),
+      options as QueriesObserverOptions<TCombinedResult>,
+    )
+
+    // Do not notify on updates because of changes in the options because
+    // these changes should already be reflected in the optimistic result.
+    effect(() => {
+      observer.setQueries(
+        defaultedQueries(),
+        options as QueriesObserverOptions<TCombinedResult>,
+        { listeners: false },
+      )
+    })
+
+    const [, getCombinedResult] =
+      observer.getOptimisticResult(defaultedQueries())
+
+    const result = signal(getCombinedResult() as any)
+
+    const unsubscribe = observer.subscribe(notifyManager.batchCalls(result.set))
+    destroyRef.onDestroy(unsubscribe)
+
+    return result
+  })
+}

package/src/injectQuery.ts

@@ -0,0 +1,61 @@
+import { QueryObserver } from '@tanstack/query-core'
+import { assertInjector } from 'ngxtension/assert-injector'
+import { injectQueryClient } from './injectQueryClient'
+import { createBaseQuery } from './createBaseQuery'
+import type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'
+import type { Injector } from '@angular/core'
+import type {
+  CreateQueryOptions,
+  CreateQueryResult,
+  DefinedCreateQueryResult,
+} from './types'
+import type {
+  DefinedInitialDataOptions,
+  UndefinedInitialDataOptions,
+} from './queryOptions'
+
+/**
+ * Create a Query.
+ * @param options
+ * @param injector
+ */
+export function injectQuery<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: (
+    client: QueryClient,
+  ) => UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+  injector?: Injector,
+): CreateQueryResult<TData, TError>
+
+export function injectQuery<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: (
+    client: QueryClient,
+  ) => DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+  injector?: Injector,
+): DefinedCreateQueryResult<TData, TError>
+
+export function injectQuery<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: (
+    client: QueryClient,
+  ) => CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  injector?: Injector,
+) {
+  return assertInjector(injectQuery, injector, () => {
+    const queryClient = injectQueryClient()
+    return createBaseQuery(options, QueryObserver, queryClient)
+  })
+}

package/src/injectQueryClient.ts

@@ -0,0 +1,7 @@
+import { createNoopInjectionToken } from 'ngxtension/create-injection-token'
+import type { QueryClient } from '@tanstack/query-core'
+
+const [injectQueryClient, provideQueryClient, QUERY_CLIENT] =
+  createNoopInjectionToken<QueryClient>('QueryClientToken')
+
+export { injectQueryClient, provideQueryClient, QUERY_CLIENT }

package/src/providers.ts

@@ -0,0 +1,26 @@
+import {
+  DestroyRef,
+  ENVIRONMENT_INITIALIZER,
+  inject,
+  makeEnvironmentProviders,
+} from '@angular/core'
+import { provideQueryClient } from './injectQueryClient'
+import type { EnvironmentProviders } from '@angular/core'
+import type { QueryClient } from '@tanstack/query-core'
+
+export function provideAngularQuery(
+  queryClient: QueryClient,
+): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    provideQueryClient(queryClient),
+    {
+      provide: ENVIRONMENT_INITIALIZER,
+      multi: true,
+      useValue: () => {
+        queryClient.mount()
+        // Unmount the query client on application destroy
+        inject(DestroyRef).onDestroy(() => queryClient.unmount())
+      },
+    },
+  ])
+}

package/src/query-proxy.ts

@@ -0,0 +1,51 @@
+import { type Signal, computed, untracked } from '@angular/core'
+import type { DefaultError, QueryObserverResult } from '@tanstack/query-core'
+import type { CreateBaseQueryResult } from './types'
+
+export function createResultStateSignalProxy<
+  TData = unknown,
+  TError = DefaultError,
+  State = QueryObserverResult<TData, TError>,
+>(resultState: Signal<State>) {
+  const internalState = {} as CreateBaseQueryResult<TData, TError, State>
+
+  return new Proxy(internalState, {
+    get<Key extends keyof State>(
+      target: CreateBaseQueryResult<TData, TError, State>,
+      prop: Key | string | symbol,
+    ) {
+      // first check if we have it in our internal state and return it
+      const computedField = target[prop as Key]
+
+      // TODO: check if this if statement is necessary
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (computedField) return computedField
+
+      // then, check if it's a function on the resultState and return it
+      const targetField = untracked(resultState)[prop as Key]
+      if (typeof targetField === 'function') return targetField
+
+      // finally, create a computed field, store it and return it
+      // @ts-ignore
+      return (target[prop] = computed(() => resultState()[prop as Key]))
+    },
+    has<K extends keyof State>(
+      target: CreateBaseQueryResult<TData, TError, State>,
+      prop: K | string | symbol,
+    ) {
+      return !!target[prop as K]
+    },
+    ownKeys(target) {
+      return [...Reflect.ownKeys(target)]
+    },
+    getOwnPropertyDescriptor() {
+      return {
+        enumerable: true,
+        configurable: true,
+      }
+    },
+    set(): boolean {
+      return true
+    },
+  })
+}

package/src/queryOptions.ts

@@ -0,0 +1,46 @@
+import type { DefaultError, QueryKey } from '@tanstack/query-core'
+import type { CreateQueryOptions } from './types'
+
+export type UndefinedInitialDataOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  initialData?: undefined
+}
+
+type NonUndefinedGuard<T> = T extends undefined ? never : T
+
+export type DefinedInitialDataOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  initialData:
+    | NonUndefinedGuard<TQueryFnData>
+    | (() => NonUndefinedGuard<TQueryFnData>)
+}
+
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+
+export function queryOptions(options: unknown) {
+  return options
+}

package/src/test-setup.ts

@@ -0,0 +1,13 @@
+import '@analogjs/vite-plugin-angular/setup-vitest'
+import '@angular/compiler'
+
+import { TestBed } from '@angular/core/testing'
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing'
+
+TestBed.initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+)

package/src/tests/injectIsFetching.test.ts

@@ -0,0 +1,32 @@
+import { TestBed, fakeAsync, flush } from '@angular/core/testing'
+import { QueryClient } from '@tanstack/query-core'
+import { beforeEach, describe, expect } from 'vitest'
+import { injectIsFetching } from '../injectIsFetching'
+import { injectQuery } from '../injectQuery'
+import { provideAngularQuery } from '../providers'
+import { delayedFetcher } from './test-utils'
+
+describe('injectIsFetching', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient()
+
+    TestBed.configureTestingModule({
+      providers: [provideAngularQuery(queryClient)],
+    })
+  })
+
+  it('Returns number of fetching queries', fakeAsync(() => {
+    const isFetching = TestBed.runInInjectionContext(() => {
+      injectQuery(() => ({
+        queryKey: ['isFetching1'],
+        queryFn: delayedFetcher(100),
+      }))
+      return injectIsFetching()
+    })
+    expect(isFetching()).toStrictEqual(1)
+    flush()
+    expect(isFetching()).toStrictEqual(0)
+  }))
+})

package/src/tests/injectIsMutating.test.ts

@@ -0,0 +1,43 @@
+import { QueryClient } from '@tanstack/query-core'
+import { beforeEach, describe } from 'vitest'
+import { TestBed, fakeAsync, tick } from '@angular/core/testing'
+import { injectIsMutating } from '../injectIsMutating'
+import { injectMutation } from '../injectMutation'
+import { provideAngularQuery } from '../providers'
+import { successMutator } from './test-utils'
+
+describe('injectIsMutating', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient()
+
+    TestBed.configureTestingModule({
+      providers: [provideAngularQuery(queryClient)],
+    })
+  })
+
+  it('should properly return isMutating state', fakeAsync(() => {
+    TestBed.runInInjectionContext(() => {
+      const isMutating = injectIsMutating()
+      const mutation = injectMutation(() => ({
+        mutationKey: ['isMutating1'],
+        mutationFn: successMutator<{ par1: string }>,
+      }))
+
+      expect(isMutating()).toBe(0)
+
+      mutation().mutate({
+        par1: 'par1',
+      })
+
+      tick()
+
+      TestBed.flushEffects()
+
+      expect(isMutating()).toBe(1)
+
+      tick()
+    })
+  }))
+})

package/src/tests/injectMutation.test.ts

@@ -0,0 +1,52 @@
+import { TestBed, fakeAsync, flush } from '@angular/core/testing'
+import { QueryClient } from '@tanstack/query-core'
+import { vi } from 'vitest'
+import { expect } from 'vitest'
+import { injectMutation } from '../injectMutation'
+import { provideAngularQuery } from '../providers'
+import { QUERY_CLIENT } from '../injectQueryClient'
+
+describe('injectMutation', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideAngularQuery(new QueryClient())],
+    })
+
+    queryClient = TestBed.inject(QUERY_CLIENT)
+  })
+
+  it('should run mutation', fakeAsync(() => {
+    const mutationFn = vi.fn()
+
+    const mutation = TestBed.runInInjectionContext(() => {
+      return injectMutation(() => ({
+        mutationFn,
+      }))
+    })
+
+    mutation().mutate({
+      par1: 'par1',
+    })
+
+    flush()
+    expect(mutation().status).toBe('pending')
+  }))
+
+  it('can access client from options callback', fakeAsync(() => {
+    const mutation = TestBed.runInInjectionContext(() => {
+      return injectMutation((client) => ({
+        mutationFn: () => {
+          expect(client).toBe(queryClient)
+          return Promise.resolve()
+        },
+      }))
+    })
+
+    mutation().mutate()
+
+    flush()
+    expect(mutation().status).toBe('pending')
+  }))
+})