@tanstack/preact-query 0.0.1 → 5.91.0

package/src/useSuspenseQueries.ts

@@ -0,0 +1,211 @@
+import { skipToken } from '@tanstack/query-core'
+import type {
+  DefaultError,
+  QueryClient,
+  QueryFunction,
+  ThrowOnError,
+} from '@tanstack/query-core'
+
+import { defaultThrowOnError } from './suspense'
+import type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'
+import { useQueries } from './useQueries'
+
+// Avoid TS depth-limit error in case of large array literal
+type MAXIMUM_DEPTH = 20
+
+// Widen the type of the symbol to enable type inference even if skipToken is not immutable.
+type SkipTokenForUseQueries = symbol
+
+type GetUseSuspenseQueryOptions<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
+  }
+    ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>
+    : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
+      ? UseSuspenseQueryOptions<TQueryFnData, TError>
+      : T extends { data: infer TData; error?: infer TError }
+        ? UseSuspenseQueryOptions<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]
+          ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>
+          : T extends [infer TQueryFnData, infer TError]
+            ? UseSuspenseQueryOptions<TQueryFnData, TError>
+            : T extends [infer TQueryFnData]
+              ? UseSuspenseQueryOptions<TQueryFnData>
+              : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided
+                T extends {
+                    queryFn?:
+                      | QueryFunction<infer TQueryFnData, infer TQueryKey>
+                      | SkipTokenForUseQueries
+                    select?: (data: any) => infer TData
+                    throwOnError?: ThrowOnError<any, infer TError, any, any>
+                  }
+                ? UseSuspenseQueryOptions<
+                    TQueryFnData,
+                    TError,
+                    TData,
+                    TQueryKey
+                  >
+                : T extends {
+                      queryFn?:
+                        | QueryFunction<infer TQueryFnData, infer TQueryKey>
+                        | SkipTokenForUseQueries
+                      throwOnError?: ThrowOnError<any, infer TError, any, any>
+                    }
+                  ? UseSuspenseQueryOptions<
+                      TQueryFnData,
+                      TError,
+                      TQueryFnData,
+                      TQueryKey
+                    >
+                  : // Fallback
+                    UseSuspenseQueryOptions
+
+type GetUseSuspenseQueryResult<T> =
+  // Part 1: responsible for mapping explicit type parameter to function result, if object
+  T extends { queryFnData: any; error?: infer TError; data: infer TData }
+    ? UseSuspenseQueryResult<TData, TError>
+    : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
+      ? UseSuspenseQueryResult<TQueryFnData, TError>
+      : T extends { data: infer TData; error?: infer TError }
+        ? UseSuspenseQueryResult<TData, TError>
+        : // Part 2: responsible for mapping explicit type parameter to function result, if tuple
+          T extends [any, infer TError, infer TData]
+          ? UseSuspenseQueryResult<TData, TError>
+          : T extends [infer TQueryFnData, infer TError]
+            ? UseSuspenseQueryResult<TQueryFnData, TError>
+            : T extends [infer TQueryFnData]
+              ? UseSuspenseQueryResult<TQueryFnData>
+              : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided
+                T extends {
+                    queryFn?:
+                      | QueryFunction<infer TQueryFnData, any>
+                      | SkipTokenForUseQueries
+                    select?: (data: any) => infer TData
+                    throwOnError?: ThrowOnError<any, infer TError, any, any>
+                  }
+                ? UseSuspenseQueryResult<
+                    unknown extends TData ? TQueryFnData : TData,
+                    unknown extends TError ? DefaultError : TError
+                  >
+                : T extends {
+                      queryFn?:
+                        | QueryFunction<infer TQueryFnData, any>
+                        | SkipTokenForUseQueries
+                      throwOnError?: ThrowOnError<any, infer TError, any, any>
+                    }
+                  ? UseSuspenseQueryResult<
+                      TQueryFnData,
+                      unknown extends TError ? DefaultError : TError
+                    >
+                  : // Fallback
+                    UseSuspenseQueryResult
+
+/**
+ * SuspenseQueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
+ */
+export type SuspenseQueriesOptions<
+  T extends Array<any>,
+  TResults extends Array<any> = [],
+  TDepth extends ReadonlyArray<number> = [],
+> = TDepth['length'] extends MAXIMUM_DEPTH
+  ? Array<UseSuspenseQueryOptions>
+  : T extends []
+    ? []
+    : T extends [infer Head]
+      ? [...TResults, GetUseSuspenseQueryOptions<Head>]
+      : T extends [infer Head, ...infer Tails]
+        ? SuspenseQueriesOptions<
+            [...Tails],
+            [...TResults, GetUseSuspenseQueryOptions<Head>],
+            [...TDepth, 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<
+                UseSuspenseQueryOptions<
+                  infer TQueryFnData,
+                  infer TError,
+                  infer TData,
+                  infer TQueryKey
+                >
+              >
+            ? Array<
+                UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+              >
+            : // Fallback
+              Array<UseSuspenseQueryOptions>
+
+/**
+ * SuspenseQueriesResults reducer recursively maps type param to results
+ */
+export type SuspenseQueriesResults<
+  T extends Array<any>,
+  TResults extends Array<any> = [],
+  TDepth extends ReadonlyArray<number> = [],
+> = TDepth['length'] extends MAXIMUM_DEPTH
+  ? Array<UseSuspenseQueryResult>
+  : T extends []
+    ? []
+    : T extends [infer Head]
+      ? [...TResults, GetUseSuspenseQueryResult<Head>]
+      : T extends [infer Head, ...infer Tails]
+        ? SuspenseQueriesResults<
+            [...Tails],
+            [...TResults, GetUseSuspenseQueryResult<Head>],
+            [...TDepth, 1]
+          >
+        : { [K in keyof T]: GetUseSuspenseQueryResult<T[K]> }
+
+export function useSuspenseQueries<
+  T extends Array<any>,
+  TCombinedResult = SuspenseQueriesResults<T>,
+>(
+  options: {
+    queries:
+      | readonly [...SuspenseQueriesOptions<T>]
+      | readonly [...{ [K in keyof T]: GetUseSuspenseQueryOptions<T[K]> }]
+    combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult
+  },
+  queryClient?: QueryClient,
+): TCombinedResult
+
+export function useSuspenseQueries<
+  T extends Array<any>,
+  TCombinedResult = SuspenseQueriesResults<T>,
+>(
+  options: {
+    queries: readonly [...SuspenseQueriesOptions<T>]
+    combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult
+  },
+  queryClient?: QueryClient,
+): TCombinedResult
+
+export function useSuspenseQueries(options: any, queryClient?: QueryClient) {
+  return useQueries(
+    {
+      ...options,
+      queries: options.queries.map((query: any) => {
+        if (process.env.NODE_ENV !== 'production') {
+          if (query.queryFn === skipToken) {
+            console.error('skipToken is not allowed for useSuspenseQueries')
+          }
+        }
+
+        return {
+          ...query,
+          suspense: true,
+          throwOnError: defaultThrowOnError,
+          enabled: true,
+          placeholderData: undefined,
+        }
+      }),
+    },
+    queryClient,
+  )
+}

package/src/useSuspenseQuery.ts

@@ -0,0 +1,34 @@
+import { QueryObserver, skipToken } from '@tanstack/query-core'
+import type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'
+
+import { defaultThrowOnError } from './suspense'
+import type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'
+import { useBaseQuery } from './useBaseQuery'
+
+export function useSuspenseQuery<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  queryClient?: QueryClient,
+): UseSuspenseQueryResult<TData, TError> {
+  if (process.env.NODE_ENV !== 'production') {
+    if ((options.queryFn as any) === skipToken) {
+      console.error('skipToken is not allowed for useSuspenseQuery')
+    }
+  }
+
+  return useBaseQuery(
+    {
+      ...options,
+      enabled: true,
+      suspense: true,
+      throwOnError: defaultThrowOnError,
+      placeholderData: undefined,
+    },
+    QueryObserver,
+    queryClient,
+  ) as UseSuspenseQueryResult<TData, TError>
+}

package/src/utils.ts

@@ -0,0 +1,88 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'
+
+/**
+ * This is taken from https://github.com/preactjs/preact/blob/main/compat/src/hooks.js#L8-L54
+ * which is taken from https://github.com/facebook/react/blob/main/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L84
+ * on a high level this cuts out the warnings, ... and attempts a smaller implementation.
+ * This way we don't have to import preact/compat with side effects
+ */
+type InternalStore = {
+  _value: any
+  _getSnapshot: () => any
+}
+type StoreRef = {
+  _instance: InternalStore
+}
+export function useSyncExternalStore(
+  subscribe: (onStoreChange: () => void) => () => void,
+  getSnapshot: () => any,
+) {
+  const value = getSnapshot()
+
+  const [{ _instance }, forceUpdate] = useState<StoreRef>({
+    _instance: { _value: value, _getSnapshot: getSnapshot },
+  })
+
+  useLayoutEffect(() => {
+    _instance._value = value
+    _instance._getSnapshot = getSnapshot
+
+    if (didSnapshotChange(_instance)) {
+      forceUpdate({ _instance })
+    }
+  }, [subscribe, value, getSnapshot])
+
+  useEffect(() => {
+    if (didSnapshotChange(_instance)) {
+      forceUpdate({ _instance })
+    }
+
+    return subscribe(() => {
+      if (didSnapshotChange(_instance)) {
+        forceUpdate({ _instance })
+      }
+    })
+  }, [subscribe])
+
+  return value
+}
+
+function didSnapshotChange(inst: {
+  _getSnapshot: () => any
+  _value: any
+}): boolean {
+  const latestGetSnapshot = inst._getSnapshot
+  const prevValue = inst._value
+  try {
+    const nextValue = latestGetSnapshot()
+    return !Object.is(prevValue, nextValue)
+    // eslint-disable-next-line no-unused-vars
+  } catch (_error) {
+    return true
+  }
+}
+
+export function useSyncExternalStoreWithSelector<TSnapshot, TSelected>(
+  subscribe: (onStoreChange: () => void) => () => void,
+  getSnapshot: () => TSnapshot,
+  selector: (snapshot: TSnapshot) => TSelected,
+  isEqual: (a: TSelected, b: TSelected) => boolean,
+): TSelected {
+  const selectedSnapshotRef = useRef<TSelected | undefined>()
+
+  const getSelectedSnapshot = () => {
+    const snapshot = getSnapshot()
+    const selected = selector(snapshot)
+
+    if (
+      selectedSnapshotRef.current === undefined ||
+      !isEqual(selectedSnapshotRef.current, selected)
+    ) {
+      selectedSnapshotRef.current = selected
+    }
+
+    return selectedSnapshotRef.current
+  }
+
+  return useSyncExternalStore(subscribe, getSelectedSnapshot)
+}