@tanstack/solid-query 4.24.9 → 5.0.0-alpha.0

package/src/createBaseQuery.ts

@@ -1,16 +1,28 @@
-import type { QueryObserver } from '@tanstack/query-core'
-import type { QueryKey, QueryObserverResult } from '@tanstack/query-core'
-import type { CreateBaseQueryOptions } from './types'
-import { useQueryClient } from './QueryClientProvider'
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+// Had to disable the lint rule because isServer type is defined as false
+// in solid-js/web package. I'll create a GitHub issue with them to see
+// why that happens.
+import type {
+  QueryClient,
+  QueryKey,
+  QueryObserver,
+  QueryObserverResult,
+} from '@tanstack/query-core'
+import { hydrate } from '@tanstack/query-core'
+import { notifyManager } from '@tanstack/query-core'
+import type { Accessor } from 'solid-js'
+import { isServer } from 'solid-js/web'
 import {
-  onMount,
-  onCleanup,
   createComputed,
+  createMemo,
   createResource,
   on,
-  batch,
+  onCleanup,
+  onMount,
 } from 'solid-js'
 import { createStore, unwrap } from 'solid-js/store'
+import { useQueryClient } from './QueryClientProvider'
+import type { CreateBaseQueryOptions } from './types'
 import { shouldThrowError } from './utils'
 
 // Base Query Function that is used to create the query.
@@ -21,81 +33,157 @@ export function createBaseQuery<
   TQueryData,
   TQueryKey extends QueryKey,
 >(
-  options: CreateBaseQueryOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryData,
-    TQueryKey
+  options: Accessor<
+    CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
   >,
   Observer: typeof QueryObserver,
-): QueryObserverResult<TData, TError> {
-  const queryClient = useQueryClient({ context: options.context })
-  const emptyData = Symbol('empty')
-  const defaultedOptions = queryClient.defaultQueryOptions(options)
+  queryClient?: () => QueryClient,
+) {
+  const client = createMemo(() => useQueryClient(queryClient?.()))
+
+  const defaultedOptions = client().defaultQueryOptions(options())
   defaultedOptions._optimisticResults = 'optimistic'
-  const observer = new Observer(queryClient, defaultedOptions)
+  if (isServer) {
+    defaultedOptions.retry = false
+    defaultedOptions.throwErrors = true
+  }
+  const observer = new Observer(client(), defaultedOptions)
 
   const [state, setState] = createStore<QueryObserverResult<TData, TError>>(
-    // @ts-ignore
     observer.getOptimisticResult(defaultedOptions),
   )
 
-  const [dataResource, { refetch, mutate }] = createResource<TData | undefined>(
+  const createServerSubscriber = (
+    resolve: (
+      data:
+        | QueryObserverResult<TData, TError>
+        | PromiseLike<QueryObserverResult<TData, TError> | undefined>
+        | undefined,
+    ) => void,
+    reject: (reason?: any) => void,
+  ) => {
+    return observer.subscribe((result) => {
+      notifyManager.batchCalls(() => {
+        const unwrappedResult = { ...unwrap(result) }
+        if (unwrappedResult.isError) {
+          if (process.env['NODE_ENV'] === 'development') {
+            console.error(unwrappedResult.error)
+          }
+          reject(unwrappedResult.error)
+        }
+        if (unwrappedResult.isSuccess) {
+          resolve(unwrappedResult)
+        }
+      })()
+    })
+  }
+
+  const createClientSubscriber = () => {
+    return observer.subscribe((result) => {
+      notifyManager.batchCalls(() => {
+        const unwrappedResult = { ...unwrap(result) }
+        // If the query has data we dont suspend but instead mutate the resource
+        // This could happen when placeholderData/initialData is defined
+        if (
+          queryResource()?.data &&
+          unwrappedResult.data &&
+          !queryResource.loading
+        ) {
+          setState(unwrappedResult)
+          mutate(state)
+        } else {
+          setState(unwrappedResult)
+          refetch()
+        }
+      })()
+    })
+  }
+
+  /**
+   * Unsubscribe is set lazily, so that we can subscribe after hydration when needed.
+   */
+  let unsubscribe: (() => void) | null = null
+
+  const [queryResource, { refetch, mutate }] = createResource<
+    QueryObserverResult<TData, TError> | undefined
+  >(
     () => {
-      return new Promise((resolve) => {
-        if (!(state.isFetching && state.isLoading)) {
-          if (unwrap(state.data) === emptyData) {
-            resolve(undefined)
+      return new Promise((resolve, reject) => {
+        if (isServer) {
+          unsubscribe = createServerSubscriber(resolve, reject)
+        } else {
+          if (!unsubscribe) {
+            unsubscribe = createClientSubscriber()
           }
-          resolve(unwrap(state.data))
+        }
+        if (!state.isLoading) {
+          resolve(state)
         }
       })
     },
-  )
+    {
+      initialValue: state,
 
-  batch(() => {
-    mutate(() => unwrap(state.data))
-    refetch()
-  })
+      // If initialData is provided, we resolve the resource immediately
+      ssrLoadFrom: options().initialData ? 'initial' : 'server',
 
-  let taskQueue: Array<() => void> = []
+      get deferStream() {
+        return options().deferStream
+      },
 
-  const unsubscribe = observer.subscribe((result) => {
-    taskQueue.push(() => {
-      batch(() => {
-        const unwrappedResult = { ...unwrap(result) }
-        if (unwrappedResult.data === undefined) {
-          // This is a hack to prevent Solid
-          // from deleting the data property when it is `undefined`
-          // ref: https://www.solidjs.com/docs/latest/api#updating-stores
-          // @ts-ignore
-          unwrappedResult.data = emptyData
+      /**
+       * If this resource was populated on the server (either sync render, or streamed in over time), onHydrated
+       * will be called. This is the point at which we can hydrate the query cache state, and setup the query subscriber.
+       *
+       * Leveraging onHydrated allows us to plug into the async and streaming support that solidjs resources already support.
+       *
+       * Note that this is only invoked on the client, for queries that were originally run on the server.
+       */
+      onHydrated(_k, info) {
+        if (info.value) {
+          hydrate(client(), {
+            queries: [
+              {
+                queryKey: defaultedOptions.queryKey,
+                queryHash: defaultedOptions.queryHash,
+                state: info.value,
+              },
+            ],
+          })
         }
-        setState(unwrap(unwrappedResult))
-        mutate(() => unwrap(result.data))
-        refetch()
-      })
-    })
 
-    queueMicrotask(() => {
-      const taskToRun = taskQueue.pop()
-      if (taskToRun) {
-        taskToRun()
-      }
-      taskQueue = []
-    })
-  })
+        if (!unsubscribe) {
+          /**
+           * Do not refetch query on mount if query was fetched on server,
+           * even if `staleTime` is not set.
+           */
+          const newOptions = { ...defaultedOptions }
+          if (defaultedOptions.staleTime || !defaultedOptions.initialData) {
+            newOptions.refetchOnMount = false
+          }
+          // Setting the options as an immutable object to prevent
+          // wonky behavior with observer subscriptions
+          observer.setOptions(newOptions)
+          setState(observer.getOptimisticResult(newOptions))
+          unsubscribe = createClientSubscriber()
+        }
+      },
+    },
+  )
 
-  onCleanup(() => unsubscribe())
+  onCleanup(() => {
+    if (unsubscribe) {
+      unsubscribe()
+      unsubscribe = null
+    }
+  })
 
   onMount(() => {
     observer.setOptions(defaultedOptions, { listeners: false })
   })
 
   createComputed(() => {
-    const newDefaultedOptions = queryClient.defaultQueryOptions(options)
-    observer.setOptions(newDefaultedOptions)
+    observer.setOptions(client().defaultQueryOptions(options()))
   })
 
   createComputed(
@@ -105,7 +193,7 @@ export function createBaseQuery<
         if (
           state.isError &&
           !state.isFetching &&
-          shouldThrowError(observer.options.useErrorBoundary, [
+          shouldThrowError(observer.options.throwErrors, [
             state.error,
             observer.getCurrentQuery(),
           ])
@@ -122,11 +210,11 @@ export function createBaseQuery<
       prop: keyof QueryObserverResult<TData, TError>,
     ): any {
       if (prop === 'data') {
-        return dataResource()
+        return queryResource()?.data
       }
       return Reflect.get(target, prop)
     },
   }
 
-  return new Proxy(state, handler) as QueryObserverResult<TData, TError>
+  return new Proxy(state, handler)
 }

package/src/createInfiniteQuery.ts

@@ -1,116 +1,37 @@
 import type {
   QueryObserver,
-  QueryFunction,
-  QueryOptions,
+  QueryKey,
+  QueryClient,
+  RegisteredError,
+  InfiniteData,
 } 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'
+import { createMemo } from 'solid-js'
 
-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,
+  TError = RegisteredError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
 >(
-  arg1:
-    | TQueryKey
-    | CreateInfiniteQueryOptions<
-        TQueryFnData,
-        TError,
-        TData,
-        TQueryFnData,
-        TQueryKey
-      >,
-  arg2?:
-    | QueryFunction<TQueryFnData, ReturnType<TQueryKey>>
-    | CreateInfiniteQueryOptions<
-        TQueryFnData,
-        TError,
-        TData,
-        TQueryFnData,
-        TQueryKey
-      >,
-  arg3?: CreateInfiniteQueryOptions<
+  options: CreateInfiniteQueryOptions<
     TQueryFnData,
     TError,
     TData,
-    TQueryFnData,
-    TQueryKey
+    TQueryKey,
+    TPageParam
   >,
+  queryClient?: () => QueryClient,
 ): 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>>,
+    createMemo(() => options()),
     InfiniteQueryObserver as typeof QueryObserver,
+    queryClient,
   ) as CreateInfiniteQueryResult<TData, TError>
 }

package/src/createMutation.ts

@@ -1,5 +1,5 @@
-import type { MutationFunction, MutationKey } from '@tanstack/query-core'
-import { parseMutationArgs, MutationObserver } from '@tanstack/query-core'
+import type { QueryClient, RegisteredError } from '@tanstack/query-core'
+import { MutationObserver } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
 import type {
   CreateMutateFunction,
@@ -13,70 +13,18 @@ import { shouldThrowError } from './utils'
 // HOOK
 export function createMutation<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   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>,
+  queryClient?: () => QueryClient,
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
-  const [options, setOptions] = createStore(parseMutationArgs(arg1, arg2, arg3))
-  const queryClient = useQueryClient({ context: options.context })
+  const client = useQueryClient(queryClient?.())
 
   const observer = new MutationObserver<TData, TError, TVariables, TContext>(
-    queryClient,
-    options,
+    client,
+    options(),
   )
 
   const mutate: CreateMutateFunction<TData, TError, TVariables, TContext> = (
@@ -95,9 +43,7 @@ export function createMutation<
   })
 
   createComputed(() => {
-    const newParsedOptions = parseMutationArgs(arg1, arg2, arg3)
-    setOptions(newParsedOptions)
-    observer.setOptions(newParsedOptions)
+    observer.setOptions(options())
   })
 
   createComputed(
@@ -106,7 +52,7 @@ export function createMutation<
       () => {
         if (
           state.isError &&
-          shouldThrowError(observer.options.useErrorBoundary, [state.error])
+          shouldThrowError(observer.options.throwErrors, [state.error])
         ) {
           throw state.error
         }

package/src/createQueries.ts

@@ -1,23 +1,29 @@
-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'
+  QueriesPlaceholderDataFunction,
+  QueryClient,
+  QueryFunction,
+  QueryKey,
+  RegisteredError,
+} from '@tanstack/query-core'
+import { notifyManager, QueriesObserver } from '@tanstack/query-core'
+import { createComputed, onCleanup, onMount } from 'solid-js'
 import { createStore, unwrap } from 'solid-js/store'
-import { scheduleMicrotask } from './utils'
+import { useQueryClient } from './QueryClientProvider'
+import type { CreateQueryResult, SolidQueryOptions } from './types'
 
 // 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.
+// `placeholderData` function does not have a parameter
 type CreateQueryOptionsForCreateQueries<
   TQueryFnData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TData = TQueryFnData,
-  TQueryKey extends SolidQueryKey = SolidQueryKey,
-> = Omit<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'context'>
+  TQueryKey extends QueryKey = QueryKey,
+> = Omit<
+  SolidQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  'placeholderData'
+> & {
+  placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction<TQueryFnData>
+}
 
 // Avoid TS depth-limit error in case of large array literal
 type MAXIMUM_DEPTH = 20
@@ -46,18 +52,13 @@ type GetOptions<T> =
         queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey>
         select: (data: any) => infer TData
       }
-    ? CreateQueryOptionsForCreateQueries<
-        TQueryFnData,
-        unknown,
-        TData,
-        () => TQueryKey
-      >
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData, Error, TData, TQueryKey>
     : T extends { queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey> }
     ? CreateQueryOptionsForCreateQueries<
         TQueryFnData,
-        unknown,
+        Error,
         TQueryFnData,
-        () => TQueryKey
+        TQueryKey
       >
     : // Fallback
       CreateQueryOptionsForCreateQueries
@@ -139,30 +140,26 @@ export type QueriesResults<
       any
     >[]
   ? // Dynamic-size (homogenous) UseQueryOptions array: map directly to array of results
-    CreateQueryResult<unknown extends TData ? TQueryFnData : TData, TError>[]
+    CreateQueryResult<
+      unknown extends TData ? TQueryFnData : TData,
+      unknown extends TError ? RegisteredError : 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 })
+export function createQueries<T extends any[]>(
+  queriesOptions: () => {
+    queries: readonly [...QueriesOptions<T>]
+    queryClient?: QueryClient
+  },
+): QueriesResults<T> {
+  const queryClient = useQueryClient(queriesOptions().queryClient)
 
-  const normalizeOptions = (
-    options: ArrType<typeof queriesOptions.queries>,
-  ) => {
-    const normalizedOptions = { ...options, queryKey: options.queryKey?.() }
-    const defaultedOptions = queryClient.defaultQueryOptions(normalizedOptions)
+  const defaultedQueries = queriesOptions().queries.map((options) => {
+    const defaultedOptions = queryClient.defaultQueryOptions(options)
     defaultedOptions._optimisticResults = 'optimistic'
     return defaultedOptions
-  }
-
-  const defaultedQueries = queriesOptions.queries.map((options) =>
-    normalizeOptions(options),
-  )
+  })
 
   const observer = new QueriesObserver(queryClient, defaultedQueries)
 
@@ -170,20 +167,10 @@ export function createQueries<T extends any[]>(queriesOptions: {
     observer.getOptimisticResult(defaultedQueries),
   )
 
-  const taskQueue: Array<() => void> = []
-
   const unsubscribe = observer.subscribe((result) => {
-    taskQueue.push(() => {
+    notifyManager.batchCalls(() => {
       setState(unwrap(result))
-    })
-
-    scheduleMicrotask(() => {
-      const taskToRun = taskQueue.pop()
-      if (taskToRun) {
-        taskToRun()
-        taskQueue.splice(0, taskQueue.length)
-      }
-    })
+    })()
   })
 
   onCleanup(unsubscribe)
@@ -193,10 +180,12 @@ export function createQueries<T extends any[]>(queriesOptions: {
   })
 
   createComputed(() => {
-    const updateDefaultedQueries = queriesOptions.queries.map((options) =>
-      normalizeOptions(options),
-    )
-    observer.setQueries(updateDefaultedQueries)
+    const updatedQueries = queriesOptions().queries.map((options) => {
+      const defaultedOptions = queryClient.defaultQueryOptions(options)
+      defaultedOptions._optimisticResults = 'optimistic'
+      return defaultedOptions
+    })
+    observer.setQueries(updatedQueries)
   })
 
   return state as QueriesResults<T>