@tanstack/solid-query 5.0.0-alpha.6 → 5.0.0-alpha.62

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__/QueryClientProvider.test.tsx

@@ -1,9 +1,8 @@
-import { render, screen, waitFor } from 'solid-testing-library'
-import { queryKey } from './utils'
+import { render, screen, waitFor } from '@solidjs/testing-library'
+import { createQueryClient, sleep, queryKey } from './utils'
 
 import { QueryCache } from '@tanstack/query-core'
 import { createQuery, QueryClientProvider, useQueryClient } from '..'
-import { createQueryClient, sleep } from './utils'
 import { vi } from 'vitest'
 
 describe('QueryClientProvider', () => {

package/src/__tests__/createInfiniteQuery.test.tsx

@@ -1,6 +1,12 @@
-import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
 
-import { createQueryClient, sleep } from './utils'
+import {
+  createQueryClient,
+  sleep,
+  Blink,
+  queryKey,
+  setActTimeout,
+} from './utils'
 
 import {
   createEffect,
@@ -10,6 +16,7 @@ import {
   Index,
   Match,
   Switch,
+  on,
 } from 'solid-js'
 import type {
   CreateInfiniteQueryResult,
@@ -22,7 +29,6 @@ import {
   QueryClientProvider,
   keepPreviousData,
 } from '..'
-import { Blink, queryKey, setActTimeout } from './utils'
 import { vi } from 'vitest'
 import type { Mock } from 'vitest'
 
@@ -193,7 +199,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 +219,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 +391,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 +411,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 +466,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 +484,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 +554,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 +572,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 +675,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 +693,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 +1028,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 +1047,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 +1123,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 +1141,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__/createMutation.test.tsx

@@ -5,7 +5,7 @@ import {
   createSignal,
   ErrorBoundary,
 } from 'solid-js'
-import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
 import {
   createMutation,
   MutationCache,
@@ -781,7 +781,7 @@ describe('createMutation', () => {
     fireEvent.click(screen.getByText('unmount'))
   })
 
-  it('should be able to throw an error when throwErrors is set to true', async () => {
+  it('should be able to throw an error when throwOnError is set to true', async () => {
     function Page() {
       const mutation = createMutation<string, Error>(() => ({
         mutationFn: () => {
@@ -789,7 +789,7 @@ describe('createMutation', () => {
           err.stack = ''
           return Promise.reject(err)
         },
-        throwErrors: true,
+        throwOnError: true,
       }))
 
       return (
@@ -820,7 +820,7 @@ describe('createMutation', () => {
     })
   })
 
-  it('should be able to throw an error when throwErrors is a function that returns true', async () => {
+  it('should be able to throw an error when throwOnError is a function that returns true', async () => {
     let boundary = false
     function Page() {
       const mutation = createMutation<string, Error>(() => ({
@@ -829,7 +829,7 @@ describe('createMutation', () => {
           err.stack = ''
           return Promise.reject(err)
         },
-        throwErrors: () => {
+        throwOnError: () => {
           boundary = !boundary
           return !boundary
         },

package/src/__tests__/createQueries.test.tsx

@@ -1,6 +1,5 @@
-import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
-
-import * as QueriesObserverModule from '../../../query-core/src/queriesObserver'
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
+import * as QueryCore from '@tanstack/query-core'
 
 import type { QueryFunctionContext, QueryKey } from '@tanstack/query-core'
 import { createRenderEffect, createSignal } from 'solid-js'
@@ -158,10 +157,6 @@ describe('useQueries', () => {
                 expectTypeNotAny(a)
                 return a.toLowerCase()
               },
-              onSuccess: (a) => {
-                expectType<string>(a)
-                expectTypeNotAny(a)
-              },
               placeholderData: 'string',
               // @ts-expect-error (initialData: string)
               initialData: 123,
@@ -174,14 +169,6 @@ describe('useQueries', () => {
                 expectTypeNotAny(a)
                 return parseInt(a)
               },
-              onSuccess: (a) => {
-                expectType<number>(a)
-                expectTypeNotAny(a)
-              },
-              onError: (e) => {
-                expectType<boolean>(e)
-                expectTypeNotAny(e)
-              },
               placeholderData: 'string',
               // @ts-expect-error (initialData: string)
               initialData: 123,
@@ -319,10 +306,6 @@ describe('useQueries', () => {
               expectTypeNotAny(a)
               return a.toLowerCase()
             },
-            onSuccess: (a) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-            },
             placeholderData: 'string',
             // @ts-expect-error (initialData: string)
             initialData: 123,
@@ -335,14 +318,6 @@ describe('useQueries', () => {
               expectTypeNotAny(a)
               return parseInt(a)
             },
-            onSuccess: (a) => {
-              expectType<number>(a)
-              expectTypeNotAny(a)
-            },
-            onError: (e) => {
-              expectType<boolean>(e)
-              expectTypeNotAny(e)
-            },
             placeholderData: 'string',
             // @ts-expect-error (initialData: string)
             initialData: 123,
@@ -436,60 +411,38 @@ describe('useQueries', () => {
         ],
       }))
 
-      // select / onSuccess / onSettled params are "indirectly" enforced
+      // select params are "indirectly" enforced
       createQueries(() => ({
         queries: [
           // unfortunately TS will not suggest the type for you
           {
             queryKey: key1,
             queryFn: () => 'string',
-            // @ts-expect-error (noImplicitAny)
-            onSuccess: (a) => null,
-            // @ts-expect-error (noImplicitAny)
-            onSettled: (a) => null,
           },
           // however you can add a type to the callback
           {
             queryKey: key2,
             queryFn: () => 'string',
-            onSuccess: (a: string) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-            },
-            onSettled: (a: string | undefined) => {
-              expectType<string | undefined>(a)
-              expectTypeNotAny(a)
-            },
           },
           // the type you do pass is enforced
           {
             queryKey: key3,
             queryFn: () => 'string',
-            // @ts-expect-error (only accepts string)
-            onSuccess: (a: number) => null,
           },
           {
             queryKey: key4,
             queryFn: () => 'string',
             select: (a: string) => parseInt(a),
-            // @ts-expect-error (select is defined => only accepts number)
-            onSuccess: (a: string) => null,
-            onSettled: (a: number | undefined) => {
-              expectType<number | undefined>(a)
-              expectTypeNotAny(a)
-            },
           },
         ],
       }))
 
       // callbacks are also indirectly enforced with Array.map
       createQueries(() => ({
-        // @ts-expect-error (onSuccess only accepts string)
         queries: Array(50).map((_, i) => ({
           queryKey: ['key', i] as const,
           queryFn: () => i + 10,
           select: (data: number) => data.toString(),
-          onSuccess: (_data: number) => null,
         })),
       }))
 
@@ -498,7 +451,6 @@ describe('useQueries', () => {
           queryKey: ['key', i] as const,
           queryFn: () => i + 10,
           select: (data: number) => data.toString(),
-          onSuccess: (_data: string) => null,
         })),
       }))
 
@@ -508,32 +460,15 @@ describe('useQueries', () => {
           {
             queryKey: key1,
             queryFn: () => 'string',
-            // @ts-expect-error (noImplicitAny)
-            onSuccess: (a) => null,
-            // @ts-expect-error (noImplicitAny)
-            onSettled: (a) => null,
           },
           {
             queryKey: key2,
             queryFn: () => 'string',
-            onSuccess: (a: string) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-            },
-            onSettled: (a: string | undefined) => {
-              expectType<string | undefined>(a)
-              expectTypeNotAny(a)
-            },
           },
           {
             queryKey: key4,
             queryFn: () => 'string',
             select: (a: string) => parseInt(a),
-            onSuccess: (_a: number) => null,
-            onSettled: (a: number | undefined) => {
-              expectType<number | undefined>(a)
-              expectTypeNotAny(a)
-            },
           },
         ],
       }))
@@ -547,12 +482,6 @@ describe('useQueries', () => {
           {
             queryKey: key1,
             queryFn: () => Promise.resolve('string'),
-            onSuccess: (a: string) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-            },
-            // @ts-expect-error (refuses to accept a Promise)
-            onSettled: (a: Promise<string>) => null,
           },
         ],
       }))
@@ -658,11 +587,10 @@ describe('useQueries', () => {
         queries: queries.map(
           // no need to type the mapped query
           (query) => {
-            const { queryFn: fn, queryKey: key, onError: err } = query
+            const { queryFn: fn, queryKey: key } = query
             expectType<QueryFunction<TQueryFnData, TQueryKey> | undefined>(fn)
             return {
               queryKey: key,
-              onError: err,
               queryFn: fn
                 ? (ctx: QueryFunctionContext<TQueryKey>) => {
                     expectType<TQueryKey>(ctx.queryKey)
@@ -741,9 +669,9 @@ describe('useQueries', () => {
     }
 
     const QueriesObserverSpy = vi
-      .spyOn(QueriesObserverModule, 'QueriesObserver')
+      .spyOn(QueryCore, 'QueriesObserver')
       .mockImplementation((fn) => {
-        return new QueriesObserverMock(fn)
+        return new QueriesObserverMock(fn, [])
       })
 
     function Queries() {