@tanstack/solid-query 5.0.0-alpha.5 → 5.0.0-alpha.51

package/src/__tests__/useIsFetching.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
 
 import { createEffect, createRenderEffect, createSignal, Show } from 'solid-js'
 import { createQuery, QueryCache, QueryClientProvider, useIsFetching } from '..'

package/src/__tests__/useIsMutating.test.tsx

@@ -1,11 +1,9 @@
-import { fireEvent, screen, waitFor } from 'solid-testing-library'
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
 import { createMutation, QueryClientProvider, useIsMutating } from '..'
-import { createQueryClient, sleep } from './utils'
+import { createQueryClient, sleep, setActTimeout } from './utils'
 
 import { createEffect, createRenderEffect, createSignal, Show } from 'solid-js'
-import { render } from 'solid-testing-library'
-import * as MutationCacheModule from '../../../query-core/src/mutationCache'
-import { setActTimeout } from './utils'
+import * as QueryCore from '@tanstack/query-core'
 import { vi } from 'vitest'
 
 describe('useIsMutating', () => {
@@ -188,7 +186,7 @@ describe('useIsMutating', () => {
   it('should not change state if unmounted', async () => {
     // We have to mock the MutationCache to not unsubscribe
     // the listener when the component is unmounted
-    class MutationCacheMock extends MutationCacheModule.MutationCache {
+    class MutationCacheMock extends QueryCore.MutationCache {
       subscribe(listener: any) {
         super.subscribe(listener)
         return () => void 0
@@ -196,7 +194,7 @@ describe('useIsMutating', () => {
     }
 
     const MutationCacheSpy = vi
-      .spyOn(MutationCacheModule, 'MutationCache')
+      .spyOn(QueryCore, 'MutationCache')
       .mockImplementation((fn) => {
         return new MutationCacheMock(fn)
       })

package/src/__tests__/utils.tsx

@@ -1,5 +1,5 @@
 import type { QueryClientConfig } from '@tanstack/query-core'
-import { QueryClient } from '@tanstack/query-core'
+import { QueryClient } from '../QueryClient'
 import type { ParentProps } from 'solid-js'
 import { createEffect, createSignal, onCleanup, Show } from 'solid-js'
 import { vi } from 'vitest'

package/src/createBaseQuery.ts

@@ -3,13 +3,12 @@
 // 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 { QueryClient } from './QueryClient'
+import { hydrate, notifyManager } from '@tanstack/query-core'
 import type { Accessor } from 'solid-js'
 import { isServer } from 'solid-js/web'
 import {
@@ -18,13 +17,29 @@ import {
   createResource,
   on,
   onCleanup,
-  onMount,
 } from 'solid-js'
-import { createStore, unwrap } from 'solid-js/store'
+import { createStore, reconcile, unwrap } from 'solid-js/store'
 import { useQueryClient } from './QueryClientProvider'
 import type { CreateBaseQueryOptions } from './types'
 import { shouldThrowError } from './utils'
 
+function reconcileFn<TData, TError>(
+  store: QueryObserverResult<TData, TError>,
+  result: QueryObserverResult<TData, TError>,
+  reconcileOption:
+    | string
+    | false
+    | ((oldData: TData | undefined, newData: TData) => TData),
+): QueryObserverResult<TData, TError> {
+  if (reconcileOption === false) return result
+  if (typeof reconcileOption === 'function') {
+    const newData = reconcileOption(store.data, result.data as TData)
+    return { ...result, data: newData } as typeof result
+  }
+  const newData = reconcile(result.data, { key: reconcileOption })(store.data)
+  return { ...result, data: newData } as typeof result
+}
+
 // Base Query Function that is used to create the query.
 export function createBaseQuery<
   TQueryFnData,
@@ -43,9 +58,10 @@ export function createBaseQuery<
 
   const defaultedOptions = client().defaultQueryOptions(options())
   defaultedOptions._optimisticResults = 'optimistic'
+  defaultedOptions.structuralSharing = false
   if (isServer) {
     defaultedOptions.retry = false
-    defaultedOptions.throwErrors = true
+    defaultedOptions.throwOnError = true
   }
   const observer = new Observer(client(), defaultedOptions)
 
@@ -64,7 +80,22 @@ export function createBaseQuery<
   ) => {
     return observer.subscribe((result) => {
       notifyManager.batchCalls(() => {
-        const unwrappedResult = { ...unwrap(result) }
+        const query = observer.getCurrentQuery()
+        const { refetch, ...rest } = unwrap(result)
+        const unwrappedResult = {
+          ...rest,
+
+          // hydrate() expects a QueryState object, which is similar but not
+          // quite the same as a QueryObserverResult object. Thus, for now, we're
+          // copying over the missing properties from state in order to support hydration
+          dataUpdateCount: query.state.dataUpdateCount,
+          fetchFailureCount: query.state.fetchFailureCount,
+          // Removing these properties since they might not be serializable
+          // fetchFailureReason: query.state.fetchFailureReason,
+          // fetchMeta: query.state.fetchMeta,
+          isInvalidated: query.state.isInvalidated,
+        }
+
         if (unwrappedResult.isError) {
           if (process.env['NODE_ENV'] === 'development') {
             console.error(unwrappedResult.error)
@@ -72,7 +103,9 @@ export function createBaseQuery<
           reject(unwrappedResult.error)
         }
         if (unwrappedResult.isSuccess) {
-          resolve(unwrappedResult)
+          // Use of any here is fine
+          // We cannot include refetch since it is not serializable
+          resolve(unwrappedResult as any)
         }
       })()
     })
@@ -81,18 +114,28 @@ export function createBaseQuery<
   const createClientSubscriber = () => {
     return observer.subscribe((result) => {
       notifyManager.batchCalls(() => {
-        const unwrappedResult = { ...unwrap(result) }
+        // @ts-expect-error - This will error because the reconcile option does not
+        // exist on the query-core QueryObserverResult type
+        const reconcileOptions = observer.options.reconcile
         // 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)
+        if (queryResource()?.data && result.data && !queryResource.loading) {
+          setState((store) => {
+            return reconcileFn(
+              store,
+              result,
+              reconcileOptions === undefined ? 'id' : reconcileOptions,
+            )
+          })
           mutate(state)
         } else {
-          setState(unwrappedResult)
+          setState((store) => {
+            return reconcileFn(
+              store,
+              result,
+              reconcileOptions === undefined ? 'id' : reconcileOptions,
+            )
+          })
           refetch()
         }
       })()
@@ -178,13 +221,17 @@ export function createBaseQuery<
     }
   })
 
-  onMount(() => {
-    observer.setOptions(defaultedOptions, { listeners: false })
-  })
-
-  createComputed(() => {
-    observer.setOptions(client().defaultQueryOptions(options()))
-  })
+  createComputed(
+    on(
+      () => client().defaultQueryOptions(options()),
+      () => observer.setOptions(client().defaultQueryOptions(options())),
+      {
+        // Defer because we don't need to trigger on first render
+        // This only cares about changes to options after the observer is created
+        defer: true,
+      },
+    ),
+  )
 
   createComputed(
     on(
@@ -193,7 +240,7 @@ export function createBaseQuery<
         if (
           state.isError &&
           !state.isFetching &&
-          shouldThrowError(observer.options.throwErrors, [
+          shouldThrowError(observer.options.throwOnError, [
             state.error,
             observer.getCurrentQuery(),
           ])
@@ -209,10 +256,8 @@ export function createBaseQuery<
       target: QueryObserverResult<TData, TError>,
       prop: keyof QueryObserverResult<TData, TError>,
     ): any {
-      if (prop === 'data') {
-        return queryResource()?.data
-      }
-      return Reflect.get(target, prop)
+      const val = queryResource()?.[prop]
+      return val !== undefined ? val : Reflect.get(target, prop)
     },
   }
 

package/src/createInfiniteQuery.ts

@@ -1,10 +1,10 @@
 import type {
   QueryObserver,
   QueryKey,
-  QueryClient,
   DefaultError,
   InfiniteData,
 } from '@tanstack/query-core'
+import type { QueryClient } from './QueryClient'
 import { InfiniteQueryObserver } from '@tanstack/query-core'
 import type {
   CreateInfiniteQueryOptions,

package/src/createMutation.ts

@@ -1,4 +1,5 @@
-import type { QueryClient, DefaultError } from '@tanstack/query-core'
+import type { DefaultError } from '@tanstack/query-core'
+import type { QueryClient } from './QueryClient'
 import { MutationObserver } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
 import type {
@@ -53,7 +54,7 @@ export function createMutation<
       () => {
         if (
           state.isError &&
-          shouldThrowError(observer.options.throwErrors, [state.error])
+          shouldThrowError(observer.options.throwOnError, [state.error])
         ) {
           throw state.error
         }

package/src/createQueries.ts

@@ -1,13 +1,14 @@
 import type {
   QueriesPlaceholderDataFunction,
-  QueryClient,
   QueryFunction,
   QueryKey,
   DefaultError,
+  QueriesObserverOptions,
 } from '@tanstack/query-core'
 import { notifyManager, QueriesObserver } from '@tanstack/query-core'
+import type { QueryClient } from './QueryClient'
 import type { Accessor } from 'solid-js'
-import { createComputed, onCleanup, onMount } from 'solid-js'
+import { createComputed, onCleanup } from 'solid-js'
 import { createStore, unwrap } from 'solid-js/store'
 import { useQueryClient } from './QueryClientProvider'
 import type { CreateQueryResult, SolidQueryOptions } from './types'
@@ -148,12 +149,16 @@ export type QueriesResults<
   : // Fallback
     CreateQueryResult[]
 
-export function createQueries<T extends any[]>(
+export function createQueries<
+  T extends any[],
+  TCombinedResult = QueriesResults<T>,
+>(
   queriesOptions: Accessor<{
     queries: readonly [...QueriesOptions<T>]
+    combine?: (result: QueriesResults<T>) => TCombinedResult
   }>,
   queryClient?: Accessor<QueryClient>,
-): QueriesResults<T> {
+): TCombinedResult {
   const client = useQueryClient(queryClient?.())
 
   const defaultedQueries = queriesOptions().queries.map((options) => {
@@ -162,32 +167,45 @@ export function createQueries<T extends any[]>(
     return defaultedOptions
   })
 
-  const observer = new QueriesObserver(client, defaultedQueries)
+  const observer = new QueriesObserver(
+    client,
+    defaultedQueries,
+    queriesOptions().combine
+      ? ({
+          combine: queriesOptions().combine,
+        } as QueriesObserverOptions<TCombinedResult>)
+      : undefined,
+  )
 
-  const [state, setState] = createStore(
-    observer.getOptimisticResult(defaultedQueries),
+  // @ts-expect-error - Types issue with solid-js createStore
+  const [state, setState] = createStore<TCombinedResult>(
+    observer.getOptimisticResult(defaultedQueries)[1](),
   )
 
   const unsubscribe = observer.subscribe((result) => {
     notifyManager.batchCalls(() => {
-      setState(unwrap(result))
+      setState(unwrap(result) as unknown as TCombinedResult)
     })()
   })
 
   onCleanup(unsubscribe)
 
-  onMount(() => {
-    observer.setQueries(defaultedQueries, { listeners: false })
-  })
-
   createComputed(() => {
     const updatedQueries = queriesOptions().queries.map((options) => {
       const defaultedOptions = client.defaultQueryOptions(options)
       defaultedOptions._optimisticResults = 'optimistic'
       return defaultedOptions
     })
-    observer.setQueries(updatedQueries)
+    observer.setQueries(
+      updatedQueries,
+      queriesOptions().combine
+        ? ({
+            combine: queriesOptions().combine,
+          } as QueriesObserverOptions<TCombinedResult>)
+        : undefined,
+      { listeners: false },
+    )
   })
 
-  return state as QueriesResults<T>
+  return state
 }

package/src/createQuery.ts

@@ -1,5 +1,6 @@
-import type { QueryClient, QueryKey, DefaultError } from '@tanstack/query-core'
+import type { QueryKey, DefaultError } from '@tanstack/query-core'
 import { QueryObserver } from '@tanstack/query-core'
+import type { QueryClient } from './QueryClient'
 import type { Accessor } from 'solid-js'
 import { createMemo } from 'solid-js'
 import { createBaseQuery } from './createBaseQuery'
@@ -33,6 +34,28 @@ type DefinedInitialDataOptions<
   }
 >
 
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+
+export function queryOptions(options: unknown) {
+  return options
+}
+
 export function createQuery<
   TQueryFnData = unknown,
   TError = DefaultError,

package/src/index.ts

@@ -8,7 +8,14 @@ export * from '@tanstack/query-core'
 
 // Solid Query
 export * from './types'
-export { createQuery } from './createQuery'
+export { QueryClient } from './QueryClient'
+export type {
+  QueryObserverOptions,
+  DefaultOptions,
+  QueryClientConfig,
+  InfiniteQueryObserverOptions,
+} from './QueryClient'
+export { createQuery, queryOptions } from './createQuery'
 export {
   QueryClientContext,
   QueryClientProvider,

package/src/types.ts

@@ -2,17 +2,19 @@
 
 import type {
   QueryKey,
-  QueryObserverOptions,
   QueryObserverResult,
   MutateFunction,
   MutationObserverOptions,
   MutationObserverResult,
   DefinedQueryObserverResult,
-  InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
   WithRequired,
   DefaultError,
 } from '@tanstack/query-core'
+import type {
+  QueryObserverOptions,
+  InfiniteQueryObserverOptions,
+} from './QueryClient'
 
 export type FunctionedParams<T> = () => T
 

package/src/useIsFetching.ts

@@ -1,4 +1,5 @@
-import type { QueryClient, QueryFilters } from '@tanstack/query-core'
+import type { QueryFilters } from '@tanstack/query-core'
+import type { QueryClient } from './QueryClient'
 import type { Accessor } from 'solid-js'
 import { createMemo, createSignal, onCleanup } from 'solid-js'
 import { useQueryClient } from './QueryClientProvider'

package/src/useIsMutating.ts

@@ -1,4 +1,5 @@
-import type { MutationFilters, QueryClient } from '@tanstack/query-core'
+import type { MutationFilters } from '@tanstack/query-core'
+import type { QueryClient } from './QueryClient'
 import { useQueryClient } from './QueryClientProvider'
 import type { Accessor } from 'solid-js'
 import { createSignal, onCleanup, createMemo } from 'solid-js'