@tanstack/solid-query 5.0.0-alpha.19 → 5.0.0-alpha.20

package/src/QueryClient.ts

@@ -0,0 +1,84 @@
+import type {
+  QueryClientConfig as QueryCoreClientConfig,
+  DefaultOptions as CoreDefaultOptions,
+  QueryObserverOptions as QueryCoreObserverOptions,
+  InfiniteQueryObserverOptions as QueryCoreInfiniteQueryObserverOptions,
+  DefaultError,
+  QueryKey,
+} from '@tanstack/query-core'
+import { QueryClient as QueryCoreClient } from '@tanstack/query-core'
+
+export interface QueryObserverOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = never,
+> extends Omit<
+    QueryCoreObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey,
+      TPageParam
+    >,
+    'structuralSharing'
+  > {
+  /**
+   * Set this to a reconciliation key to enable reconciliation between query results.
+   * Set this to `false` to disable reconciliation between query results.
+   * Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom reconciliation logic.
+   * Defaults reconciliation key to `id`.
+   */
+  reconcile?:
+    | string
+    | false
+    | ((oldData: TData | undefined, newData: TData) => TData)
+}
+
+export interface InfiniteQueryObserverOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+> extends Omit<
+    QueryCoreInfiniteQueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey,
+      TPageParam
+    >,
+    'structuralSharing'
+  > {
+  /**
+   * Set this to a reconciliation key to enable reconciliation between query results.
+   * Set this to `false` to disable reconciliation between query results.
+   * Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom reconciliation logic.
+   * Defaults reconciliation key to `id`.
+   */
+  reconcile?:
+    | string
+    | false
+    | ((oldData: TData | undefined, newData: TData) => TData)
+}
+
+export interface DefaultOptions<TError = DefaultError>
+  extends CoreDefaultOptions<TError> {
+  queries?: QueryObserverOptions<unknown, TError>
+}
+
+export interface QueryClientConfig extends QueryCoreClientConfig {
+  defaultOptions?: DefaultOptions
+}
+
+export class QueryClient extends QueryCoreClient {
+  constructor(config: QueryClientConfig = {}) {
+    super(config)
+  }
+}

package/src/QueryClientProvider.tsx

@@ -1,4 +1,4 @@
-import type { QueryClient } from '@tanstack/query-core'
+import type { QueryClient } from './QueryClient'
 import type { JSX } from 'solid-js'
 import { createContext, useContext, onMount, onCleanup } from 'solid-js'
 

package/src/__tests__/createInfiniteQuery.test.tsx

@@ -10,6 +10,7 @@ import {
   Index,
   Match,
   Switch,
+  on,
 } from 'solid-js'
 import type {
   CreateInfiniteQueryResult,
@@ -193,7 +194,8 @@ describe('useInfiniteQuery', () => {
 
   it('should keep the previous data when placeholderData is set', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<string>>>[] =
+      []
 
     function Page() {
       const [order, setOrder] = createSignal('desc')
@@ -212,7 +214,16 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          data: state.data ? JSON.parse(JSON.stringify(state.data)) : undefined,
+          hasNextPage: state.hasNextPage,
+          hasPreviousPage: state.hasPreviousPage,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isFetchingPreviousPage: state.isFetchingPreviousPage,
+          isSuccess: state.isSuccess,
+          isPlaceholderData: state.isPlaceholderData,
+        })
       })
 
       return (
@@ -375,7 +386,8 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to reverse the data', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -394,9 +406,19 @@ describe('useInfiniteQuery', () => {
         defaultPageParam: 0,
       }))
 
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
+      createRenderEffect(
+        on(
+          () => ({ ...state }),
+          () => {
+            states.push({
+              data: state.data
+                ? JSON.parse(JSON.stringify(state.data))
+                : undefined,
+              isSuccess: state.isSuccess,
+            })
+          },
+        ),
+      )
 
       return (
         <div>
@@ -439,7 +461,8 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to fetch a previous page', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const start = 10
@@ -456,7 +479,15 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          data: state.data ? JSON.parse(JSON.stringify(state.data)) : undefined,
+          hasNextPage: state.hasNextPage,
+          hasPreviousPage: state.hasPreviousPage,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isFetchingPreviousPage: state.isFetchingPreviousPage,
+          isSuccess: state.isSuccess,
+        })
       })
 
       createEffect(() => {
@@ -518,7 +549,8 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to refetch when providing page params automatically', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -535,7 +567,13 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          data: state.data ? JSON.parse(JSON.stringify(state.data)) : undefined,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isRefetching: state.isRefetching,
+          isFetchingPreviousPage: state.isFetchingPreviousPage,
+        })
       })
 
       return (
@@ -632,7 +670,8 @@ describe('useInfiniteQuery', () => {
 
   it('should silently cancel any ongoing fetch when fetching more', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const start = 10
@@ -649,7 +688,13 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          hasNextPage: state.hasNextPage,
+          data: state.data ? JSON.parse(JSON.stringify(state.data)) : undefined,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isSuccess: state.isSuccess,
+        })
       })
 
       createEffect(() => {
@@ -978,7 +1023,8 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to set new pages with the query client', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const [firstPage, setFirstPage] = createSignal(0)
@@ -996,7 +1042,13 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          hasNextPage: state.hasNextPage,
+          data: state.data ? JSON.parse(JSON.stringify(state.data)) : undefined,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isSuccess: state.isSuccess,
+        })
       })
 
       createEffect(() => {
@@ -1066,7 +1118,8 @@ describe('useInfiniteQuery', () => {
 
   it('should only refetch the first page when initialData is provided', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Partial<CreateInfiniteQueryResult<InfiniteData<number>>>[] =
+      []
 
     function Page() {
       const state = createInfiniteQuery(() => ({
@@ -1083,7 +1136,13 @@ describe('useInfiniteQuery', () => {
       }))
 
       createRenderEffect(() => {
-        states.push({ ...state })
+        states.push({
+          data: JSON.parse(JSON.stringify(state.data)),
+          hasNextPage: state.hasNextPage,
+          isFetching: state.isFetching,
+          isFetchingNextPage: state.isFetchingNextPage,
+          isSuccess: state.isSuccess,
+        })
       })
 
       createEffect(() => {

package/src/__tests__/createQuery.test.tsx

@@ -35,6 +35,7 @@ import {
 } from './utils'
 import { vi } from 'vitest'
 import type { Mock } from 'vitest'
+import { reconcile } from 'solid-js/store'
 
 describe('createQuery', () => {
   const queryCache = new QueryCache()
@@ -1282,7 +1283,6 @@ describe('createQuery', () => {
           count++
           return count === 1 ? result1 : result2
         },
-        notifyOnChangeProps: 'all',
       }))
 
       createRenderEffect(() => {
@@ -1322,9 +1322,8 @@ describe('createQuery', () => {
 
     expect(todos).toEqual(result1)
     expect(newTodos).toEqual(result2)
-    expect(newTodos).not.toBe(todos)
     expect(newTodo1).toBe(todo1)
-    expect(newTodo2).not.toBe(todo2)
+    expect(newTodo2).toBe(todo2)
 
     return null
   })
@@ -3257,7 +3256,7 @@ describe('createQuery', () => {
 
   it('should keep initial data when the query key changes', async () => {
     const key = queryKey()
-    const states: DefinedCreateQueryResult<{ count: number }>[] = []
+    const states: Partial<DefinedCreateQueryResult<{ count: number }>>[] = []
 
     function Page() {
       const [count, setCount] = createSignal(0)
@@ -3266,6 +3265,7 @@ describe('createQuery', () => {
         queryFn: () => ({ count: 10 }),
         staleTime: Infinity,
         initialData: () => ({ count: count() }),
+        reconcile: false,
       }))
       createRenderEffect(() => {
         states.push({ ...state })
@@ -4610,6 +4610,61 @@ describe('createQuery', () => {
     expect(states).toHaveLength(1)
   })
 
+  it('The reconcile fn callback should correctly maintain referential equality', async () => {
+    const key1 = queryKey()
+    const states: Array<Array<number>> = []
+
+    function Page() {
+      const [forceValue, setForceValue] = createSignal(1)
+
+      const state = createQuery(() => ({
+        queryKey: key1,
+        queryFn: async () => {
+          await sleep(10)
+          return [1, 2]
+        },
+        select: (res) => res.map((x) => x + 1),
+        reconcile(oldData, newData) {
+          return reconcile(newData)(oldData)
+        },
+      }))
+
+      createEffect(() => {
+        if (state.data) {
+          states.push(state.data)
+        }
+      })
+
+      const forceUpdate = () => {
+        setForceValue((prev) => prev + 1)
+      }
+
+      return (
+        <div>
+          <h2>Data: {JSON.stringify(state.data)}</h2>
+          <h2>forceValue: {forceValue}</h2>
+          <button onClick={forceUpdate}>forceUpdate</button>
+        </div>
+      )
+    }
+
+    render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+    await waitFor(() => screen.getByText('Data: [2,3]'))
+    expect(states).toHaveLength(1)
+
+    fireEvent.click(screen.getByRole('button', { name: /forceUpdate/i }))
+
+    await waitFor(() => screen.getByText('forceValue: 2'))
+    await waitFor(() => screen.getByText('Data: [2,3]'))
+
+    // effect should not be triggered again due to structural sharing
+    expect(states).toHaveLength(1)
+  })
+
   it('should cancel the query function when there are no more subscriptions', async () => {
     const key = queryKey()
     let cancelFn: Mock = vi.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,11 +3,11 @@
 // 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 type { QueryClient } from './QueryClient'
 import { hydrate } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'
 import type { Accessor } from 'solid-js'
@@ -19,11 +19,28 @@ import {
   on,
   onCleanup,
 } 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,
@@ -42,6 +59,7 @@ export function createBaseQuery<
 
   const defaultedOptions = client().defaultQueryOptions(options())
   defaultedOptions._optimisticResults = 'optimistic'
+  defaultedOptions.structuralSharing = false
   if (isServer) {
     defaultedOptions.retry = false
     defaultedOptions.throwErrors = true
@@ -96,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()
         }
       })()

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 {

package/src/createQueries.ts

@@ -1,11 +1,11 @@
 import type {
   QueriesPlaceholderDataFunction,
-  QueryClient,
   QueryFunction,
   QueryKey,
   DefaultError,
 } 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 { createStore, unwrap } from 'solid-js/store'

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'

package/src/index.ts

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

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'