@tanstack/solid-query 4.4.0

package/src/createBaseQuery.ts

@@ -0,0 +1,121 @@
+import type { QueryObserver } from '@tanstack/query-core'
+import type { QueryKey, QueryObserverResult } from '@tanstack/query-core'
+import type { CreateBaseQueryOptions } from './types'
+import { useQueryClient } from './QueryClientProvider'
+import {
+  onMount,
+  onCleanup,
+  createComputed,
+  createResource,
+  on,
+  batch,
+} from 'solid-js'
+import { createStore, unwrap } from 'solid-js/store'
+import { shouldThrowError } from './utils'
+
+// Base Query Function that is used to create the query.
+export function createBaseQuery<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryData,
+  TQueryKey extends QueryKey,
+>(
+  options: CreateBaseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >,
+  Observer: typeof QueryObserver,
+): QueryObserverResult<TData, TError> {
+  const queryClient = useQueryClient({ context: options.context })
+
+  const defaultedOptions = queryClient.defaultQueryOptions(options)
+  defaultedOptions._optimisticResults = 'optimistic'
+  const observer = new Observer(queryClient, defaultedOptions)
+
+  const [state, setState] = createStore<QueryObserverResult<TData, TError>>(
+    // @ts-ignore
+    observer.getOptimisticResult(defaultedOptions),
+  )
+
+  const [dataResource, { refetch, mutate }] = createResource<TData | undefined>(
+    () => {
+      return new Promise((resolve) => {
+        if (!(state.isFetching && state.isLoading)) {
+          resolve(unwrap(state.data))
+        }
+      })
+    },
+  )
+
+  batch(() => {
+    mutate(() => unwrap(state.data))
+    refetch()
+  })
+
+  let taskQueue: Array<() => void> = []
+
+  const unsubscribe = observer.subscribe((result) => {
+    taskQueue.push(() => {
+      batch(() => {
+        setState(unwrap(result))
+        mutate(() => unwrap(result.data))
+        refetch()
+      })
+    })
+
+    queueMicrotask(() => {
+      const taskToRun = taskQueue.pop()
+      if (taskToRun) {
+        taskToRun()
+      }
+      taskQueue = []
+    })
+  })
+
+  onCleanup(() => unsubscribe())
+
+  onMount(() => {
+    observer.setOptions(defaultedOptions, { listeners: false })
+  })
+
+  createComputed(() => {
+    const newDefaultedOptions = queryClient.defaultQueryOptions(options)
+    observer.setOptions(newDefaultedOptions)
+  })
+
+  createComputed(
+    on(
+      () => state.status,
+      () => {
+        if (
+          state.isError &&
+          !state.isFetching &&
+          shouldThrowError(observer.options.useErrorBoundary, [
+            state.error,
+            observer.getCurrentQuery(),
+          ])
+        ) {
+          throw state.error
+        }
+      },
+    ),
+  )
+
+  const handler = {
+    get(
+      target: QueryObserverResult<TData, TError>,
+      prop: keyof QueryObserverResult<TData, TError>,
+    ): any {
+      if (prop === 'data' && target.isLoading && target.isFetching) {
+        return dataResource()
+      }
+      return Reflect.get(target, prop)
+    },
+  }
+
+  return new Proxy(state, handler) as QueryObserverResult<TData, TError>
+}

package/src/createInfiniteQuery.ts

@@ -0,0 +1,116 @@
+import type {
+  QueryObserver,
+  QueryFunction,
+  QueryOptions,
+} from '@tanstack/query-core'
+import { InfiniteQueryObserver } from '@tanstack/query-core'
+import type {
+  CreateInfiniteQueryOptions,
+  CreateInfiniteQueryResult,
+  SolidQueryKey,
+} from './types'
+import { createBaseQuery } from './createBaseQuery'
+import { createComputed } from 'solid-js'
+import { createStore } from 'solid-js/store'
+import { parseQueryArgs } from './utils'
+
+export function createInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends SolidQueryKey = SolidQueryKey,
+>(
+  options: CreateInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey
+  >,
+): CreateInfiniteQueryResult<TData, TError>
+export function createInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends SolidQueryKey = SolidQueryKey,
+>(
+  queryKey: TQueryKey,
+  options?: Omit<
+    CreateInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryFnData,
+      TQueryKey
+    >,
+    'queryKey'
+  >,
+): CreateInfiniteQueryResult<TData, TError>
+export function createInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends SolidQueryKey = SolidQueryKey,
+>(
+  queryKey: TQueryKey,
+  queryFn: QueryFunction<TQueryFnData, ReturnType<TQueryKey>>,
+  options?: Omit<
+    CreateInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryFnData,
+      TQueryKey
+    >,
+    'queryKey' | 'queryFn'
+  >,
+): CreateInfiniteQueryResult<TData, TError>
+export function createInfiniteQuery<
+  TQueryFnData,
+  TError,
+  TData = TQueryFnData,
+  TQueryKey extends SolidQueryKey = SolidQueryKey,
+>(
+  arg1:
+    | TQueryKey
+    | CreateInfiniteQueryOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryFnData,
+        TQueryKey
+      >,
+  arg2?:
+    | QueryFunction<TQueryFnData, ReturnType<TQueryKey>>
+    | CreateInfiniteQueryOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryFnData,
+        TQueryKey
+      >,
+  arg3?: CreateInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey
+  >,
+): CreateInfiniteQueryResult<TData, TError> {
+  // The parseQuery Args functions helps normalize the arguments into the correct form.
+  // Whatever the parameters are, they are normalized into the correct form.
+  const [parsedOptions, setParsedOptions] = createStore(
+    parseQueryArgs(arg1, arg2, arg3),
+  )
+
+  // Watch for changes in the options and update the parsed options.
+  createComputed(() => {
+    const newParsedOptions = parseQueryArgs(arg1, arg2, arg3)
+    setParsedOptions(newParsedOptions)
+  })
+
+  return createBaseQuery(
+    parsedOptions as QueryOptions<any, any, any, ReturnType<TQueryKey>>,
+    InfiniteQueryObserver as typeof QueryObserver,
+  ) as CreateInfiniteQueryResult<TData, TError>
+}

package/src/createMutation.ts

@@ -0,0 +1,131 @@
+import type { MutationFunction, MutationKey } from '@tanstack/query-core'
+import { parseMutationArgs, MutationObserver } from '@tanstack/query-core'
+import { useQueryClient } from './QueryClientProvider'
+import type {
+  CreateMutateFunction,
+  CreateMutationOptions,
+  CreateMutationResult,
+} from './types'
+import { createComputed, onCleanup, on } from 'solid-js'
+import { createStore } from 'solid-js/store'
+import { shouldThrowError } from './utils'
+
+// HOOK
+export function createMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  options: CreateMutationOptions<TData, TError, TVariables, TContext>,
+): CreateMutationResult<TData, TError, TVariables, TContext>
+export function createMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  mutationFn: MutationFunction<TData, TVariables>,
+  options?: Omit<
+    CreateMutationOptions<TData, TError, TVariables, TContext>,
+    'mutationFn'
+  >,
+): CreateMutationResult<TData, TError, TVariables, TContext>
+export function createMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  mutationKey: MutationKey,
+  options?: Omit<
+    CreateMutationOptions<TData, TError, TVariables, TContext>,
+    'mutationKey'
+  >,
+): CreateMutationResult<TData, TError, TVariables, TContext>
+export function createMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  mutationKey: MutationKey,
+  mutationFn?: MutationFunction<TData, TVariables>,
+  options?: Omit<
+    CreateMutationOptions<TData, TError, TVariables, TContext>,
+    'mutationKey' | 'mutationFn'
+  >,
+): CreateMutationResult<TData, TError, TVariables, TContext>
+export function createMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  arg1:
+    | MutationKey
+    | MutationFunction<TData, TVariables>
+    | CreateMutationOptions<TData, TError, TVariables, TContext>,
+  arg2?:
+    | MutationFunction<TData, TVariables>
+    | CreateMutationOptions<TData, TError, TVariables, TContext>,
+  arg3?: CreateMutationOptions<TData, TError, TVariables, TContext>,
+): CreateMutationResult<TData, TError, TVariables, TContext> {
+  const [options, setOptions] = createStore(parseMutationArgs(arg1, arg2, arg3))
+  const queryClient = useQueryClient({ context: options.context })
+
+  const observer = new MutationObserver<TData, TError, TVariables, TContext>(
+    queryClient,
+    options,
+  )
+
+  const mutate: CreateMutateFunction<TData, TError, TVariables, TContext> = (
+    variables,
+    mutateOptions,
+  ) => {
+    observer.mutate(variables, mutateOptions).catch(noop)
+  }
+
+  const [state, setState] = createStore<
+    CreateMutationResult<TData, TError, TVariables, TContext>
+  >({
+    ...observer.getCurrentResult(),
+    mutate,
+    mutateAsync: observer.getCurrentResult().mutate,
+  })
+
+  createComputed(() => {
+    const newParsedOptions = parseMutationArgs(arg1, arg2, arg3)
+    setOptions(newParsedOptions)
+    observer.setOptions(newParsedOptions)
+  })
+
+  createComputed(
+    on(
+      () => state.status,
+      () => {
+        if (
+          state.isError &&
+          shouldThrowError(observer.options.useErrorBoundary, [state.error])
+        ) {
+          throw state.error
+        }
+      },
+    ),
+  )
+
+  const unsubscribe = observer.subscribe((result) => {
+    setState({
+      ...result,
+      mutate,
+      mutateAsync: result.mutate,
+    })
+  })
+
+  onCleanup(unsubscribe)
+
+  return state
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() {}

package/src/createQueries.ts

@@ -0,0 +1,203 @@
+import { createComputed, onCleanup, onMount } from 'solid-js'
+import type { QueryFunction } from '@tanstack/query-core'
+import { QueriesObserver } from '@tanstack/query-core'
+import { useQueryClient } from './QueryClientProvider'
+import type {
+  CreateQueryOptions,
+  CreateQueryResult,
+  SolidQueryKey,
+} from './types'
+import { createStore, unwrap } from 'solid-js/store'
+import { scheduleMicrotask } from './utils'
+
+// This defines the `UseQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
+// - `context` is omitted as it is passed as a root-level option to `useQueries` instead.
+type CreateQueryOptionsForCreateQueries<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends SolidQueryKey = SolidQueryKey,
+> = Omit<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'context'>
+
+// 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
+  }
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError, TData>
+    : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError>
+    : T extends { data: infer TData; error?: infer TError }
+    ? CreateQueryOptionsForCreateQueries<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]
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError, TData>
+    : T extends [infer TQueryFnData, infer TError]
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError>
+    : T extends [infer TQueryFnData]
+    ? CreateQueryOptionsForCreateQueries<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
+      }
+    ? CreateQueryOptionsForCreateQueries<
+        TQueryFnData,
+        unknown,
+        TData,
+        () => TQueryKey
+      >
+    : T extends { queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey> }
+    ? CreateQueryOptionsForCreateQueries<
+        TQueryFnData,
+        unknown,
+        TQueryFnData,
+        () => TQueryKey
+      >
+    : // Fallback
+      CreateQueryOptionsForCreateQueries
+
+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 }
+    ? CreateQueryResult<TData, TError>
+    : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
+    ? CreateQueryResult<TQueryFnData, TError>
+    : T extends { data: infer TData; error?: infer TError }
+    ? CreateQueryResult<TData, TError>
+    : // Part 2: responsible for mapping explicit type parameter to function result, if tuple
+    T extends [any, infer TError, infer TData]
+    ? CreateQueryResult<TData, TError>
+    : T extends [infer TQueryFnData, infer TError]
+    ? CreateQueryResult<TQueryFnData, TError>
+    : T extends [infer TQueryFnData]
+    ? CreateQueryResult<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
+      }
+    ? CreateQueryResult<TData>
+    : T extends { queryFn?: QueryFunction<infer TQueryFnData, any> }
+    ? CreateQueryResult<TQueryFnData>
+    : // Fallback
+      CreateQueryResult
+
+/**
+ * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
+ */
+export type QueriesOptions<
+  T extends any[],
+  Result extends any[] = [],
+  Depth extends ReadonlyArray<number> = [],
+> = Depth['length'] extends MAXIMUM_DEPTH
+  ? CreateQueryOptionsForCreateQueries[]
+  : T extends []
+  ? []
+  : T extends [infer Head]
+  ? [...Result, GetOptions<Head>]
+  : T extends [infer Head, ...infer Tail]
+  ? QueriesOptions<[...Tail], [...Result, GetOptions<Head>], [...Depth, 1]>
+  : 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 CreateQueryOptionsForCreateQueries<
+      infer TQueryFnData,
+      infer TError,
+      infer TData,
+      infer TQueryKey
+    >[]
+  ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError, TData, TQueryKey>[]
+  : // Fallback
+    CreateQueryOptionsForCreateQueries[]
+
+/**
+ * QueriesResults reducer recursively maps type param to results
+ */
+export type QueriesResults<
+  T extends any[],
+  Result extends any[] = [],
+  Depth extends ReadonlyArray<number> = [],
+> = Depth['length'] extends MAXIMUM_DEPTH
+  ? CreateQueryResult[]
+  : T extends []
+  ? []
+  : T extends [infer Head]
+  ? [...Result, GetResults<Head>]
+  : T extends [infer Head, ...infer Tail]
+  ? QueriesResults<[...Tail], [...Result, GetResults<Head>], [...Depth, 1]>
+  : T extends CreateQueryOptionsForCreateQueries<
+      infer TQueryFnData,
+      infer TError,
+      infer TData,
+      any
+    >[]
+  ? // Dynamic-size (homogenous) UseQueryOptions array: map directly to array of results
+    CreateQueryResult<unknown extends TData ? TQueryFnData : TData, TError>[]
+  : // Fallback
+    CreateQueryResult[]
+
+type ArrType<T> = T extends (infer U)[] ? U : never
+
+export function createQueries<T extends any[]>(queriesOptions: {
+  queries: readonly [...QueriesOptions<T>]
+  context?: CreateQueryOptions['context']
+}): QueriesResults<T> {
+  const queryClient = useQueryClient({ context: queriesOptions.context })
+
+  const normalizeOptions = (
+    options: ArrType<typeof queriesOptions.queries>,
+  ) => {
+    const normalizedOptions = { ...options, queryKey: options.queryKey?.() }
+    const defaultedOptions = queryClient.defaultQueryOptions(normalizedOptions)
+    defaultedOptions._optimisticResults = 'optimistic'
+    return defaultedOptions
+  }
+
+  const defaultedQueries = queriesOptions.queries.map((options) =>
+    normalizeOptions(options),
+  )
+
+  const observer = new QueriesObserver(queryClient, defaultedQueries)
+
+  const [state, setState] = createStore(
+    observer.getOptimisticResult(defaultedQueries),
+  )
+
+  const taskQueue: Array<() => void> = []
+
+  const unsubscribe = observer.subscribe((result) => {
+    taskQueue.push(() => {
+      setState(unwrap(result))
+    })
+
+    scheduleMicrotask(() => {
+      const taskToRun = taskQueue.pop()
+      if (taskToRun) {
+        taskToRun()
+        taskQueue.splice(0, taskQueue.length)
+      }
+    })
+  })
+
+  onCleanup(unsubscribe)
+
+  onMount(() => {
+    observer.setQueries(defaultedQueries, { listeners: false })
+  })
+
+  createComputed(() => {
+    const updateDefaultedQueries = queriesOptions.queries.map((options) =>
+      normalizeOptions(options),
+    )
+    observer.setQueries(updateDefaultedQueries)
+  })
+
+  return state as QueriesResults<T>
+}