@tanstack/solid-query 5.0.0-beta.9 → 5.0.0-rc.0

package/src/__tests__/suspense.test.tsx

@@ -28,7 +28,7 @@ describe("useQuery's in Suspense mode", () => {
 
   it('should render the correct amount of times in Suspense mode', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
+    const states: Array<CreateQueryResult<number>> = []
 
     let count = 0
     let renders = 0
@@ -84,7 +84,7 @@ describe("useQuery's in Suspense mode", () => {
 
   it('should return the correct states for a successful infinite query', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Array<CreateInfiniteQueryResult<InfiniteData<number>>> = []
 
     function Page() {
       const [multiplier, setMultiplier] = createSignal(1)
@@ -94,7 +94,7 @@ describe("useQuery's in Suspense mode", () => {
           await sleep(10)
           return Number(pageParam * multiplier())
         },
-        defaultPageParam: 1,
+        initialPageParam: 1,
         suspense: true,
         getNextPageParam: (lastPage) => lastPage + 1,
       }))
@@ -143,7 +143,7 @@ describe("useQuery's in Suspense mode", () => {
   it('should not call the queryFn twice when used in Suspense mode', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], string>()
+    const queryFn = vi.fn<Array<unknown>, string>()
     queryFn.mockImplementation(() => {
       sleep(10)
       return 'data'
@@ -453,6 +453,10 @@ describe("useQuery's in Suspense mode", () => {
   it('should throw errors to the error boundary by default', async () => {
     const key = queryKey()
 
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     function Page() {
       const state = createQuery(() => ({
         queryKey: key,
@@ -497,6 +501,8 @@ describe("useQuery's in Suspense mode", () => {
 
     await waitFor(() => screen.getByText('Loading...'))
     await waitFor(() => screen.getByText('error boundary'))
+
+    consoleMock.mockRestore()
   })
 
   it('should not throw errors to the error boundary when throwOnError: false', async () => {
@@ -551,6 +557,10 @@ describe("useQuery's in Suspense mode", () => {
   it('should throw errors to the error boundary when a throwOnError function returns true', async () => {
     const key = queryKey()
 
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     function Page() {
       const state = createQuery(() => ({
         queryKey: key,
@@ -595,6 +605,8 @@ describe("useQuery's in Suspense mode", () => {
 
     await waitFor(() => screen.getByText('Loading...'))
     await waitFor(() => screen.getByText('error boundary'))
+
+    consoleMock.mockRestore()
   })
 
   it('should not throw errors to the error boundary when a throwOnError function returns false', async () => {
@@ -651,7 +663,7 @@ describe("useQuery's in Suspense mode", () => {
   it('should not call the queryFn when not enabled', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], Promise<string>>()
+    const queryFn = vi.fn<Array<unknown>, Promise<string>>()
     queryFn.mockImplementation(async () => {
       await sleep(10)
       return '23'
@@ -696,6 +708,10 @@ describe("useQuery's in Suspense mode", () => {
   it('should error catched in error boundary without infinite loop', async () => {
     const key = queryKey()
 
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     let succeed = true
 
     function Page() {
@@ -756,11 +772,17 @@ describe("useQuery's in Suspense mode", () => {
     fireEvent.click(screen.getByLabelText('fail'))
     // render error boundary fallback (error boundary)
     await waitFor(() => screen.getByText('error boundary'))
+
+    consoleMock.mockRestore()
   })
 
   it('should error catched in error boundary without infinite loop when query keys changed', async () => {
     let succeed = true
 
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     function Page() {
       const [key, setKey] = createSignal(0)
 
@@ -814,9 +836,15 @@ describe("useQuery's in Suspense mode", () => {
     fireEvent.click(screen.getByLabelText('fail'))
     // render error boundary fallback (error boundary)
     await waitFor(() => screen.getByText('error boundary'))
+
+    consoleMock.mockRestore()
   })
 
   it('should error catched in error boundary without infinite loop when enabled changed', async () => {
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     function Page() {
       const queryKeys = '1'
       const [enabled, setEnabled] = createSignal(false)
@@ -874,6 +902,8 @@ describe("useQuery's in Suspense mode", () => {
 
     // render error boundary fallback (error boundary)
     await waitFor(() => screen.getByText('error boundary'))
+
+    consoleMock.mockRestore()
   })
 
   it('should render the correct amount of times in Suspense mode when gcTime is set to 0', async () => {

package/src/__tests__/transition.test.tsx

@@ -4,7 +4,7 @@ import { Show, Suspense, createSignal, startTransition } from 'solid-js'
 import { QueryCache, QueryClientProvider, createQuery } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
 
-describe("useQuery's in Suspense mode with transitions", () => {
+describe("createQuery's in Suspense mode with transitions", () => {
   const queryCache = new QueryCache()
   const queryClient = createQueryClient({ queryCache })
 
@@ -19,7 +19,6 @@ describe("useQuery's in Suspense mode with transitions", () => {
           return true
         },
       }))
-
       return <Show when={state.data}>Message</Show>
     }
 

package/src/__tests__/useIsFetching.test.tsx

@@ -59,7 +59,7 @@ describe('useIsFetching', () => {
     const key1 = queryKey()
     const key2 = queryKey()
 
-    const isFetchings: number[] = []
+    const isFetchings: Array<number> = []
 
     function IsFetching() {
       const isFetching = useIsFetching()
@@ -125,7 +125,7 @@ describe('useIsFetching', () => {
     const key1 = queryKey()
     const key2 = queryKey()
 
-    const isFetchings: number[] = []
+    const isFetchings: Array<number> = []
 
     function One() {
       createQuery(() => ({

package/src/__tests__/useIsMutating.test.tsx

@@ -8,7 +8,7 @@ import { createQueryClient, setActTimeout, sleep } from './utils'
 
 describe('useIsMutating', () => {
   it('should return the number of fetching mutations', async () => {
-    const isMutatings: number[] = []
+    const isMutatings: Array<number> = []
     const queryClient = createQueryClient()
 
     function IsMutating() {
@@ -63,7 +63,7 @@ describe('useIsMutating', () => {
   })
 
   it('should filter correctly by mutationKey', async () => {
-    const isMutatings: number[] = []
+    const isMutatings: Array<number> = []
     const queryClient = createQueryClient()
 
     function IsMutating() {
@@ -108,7 +108,7 @@ describe('useIsMutating', () => {
   })
 
   it('should filter correctly by predicate', async () => {
-    const isMutatings: number[] = []
+    const isMutatings: Array<number> = []
     const queryClient = createQueryClient()
 
     function IsMutating() {

package/src/__tests__/utils.tsx

@@ -7,7 +7,7 @@ import type { ParentProps } from 'solid-js'
 import type { SpyInstance } from 'vitest'
 
 let queryKeyCount = 0
-export function queryKey(): Array<string> {
+export function queryKey() {
   queryKeyCount++
   return [`query_${queryKeyCount}`]
 }
@@ -60,13 +60,6 @@ export function setActTimeout(fn: () => void, ms?: number) {
   }, ms)
 }
 
-/**
- * Assert the parameter is of a specific type.
- */
-export function expectType<T>(_: T): void {
-  return undefined
-}
-
 /**
  * Assert the parameter is not typed as `any`
  */

package/src/createBaseQuery.ts

@@ -8,12 +8,16 @@ import {
   createComputed,
   createMemo,
   createResource,
+  createSignal,
+  mergeProps,
   on,
   onCleanup,
+  untrack,
 } from 'solid-js'
 import { createStore, reconcile, unwrap } from 'solid-js/store'
 import { useQueryClient } from './QueryClientProvider'
 import { shouldThrowError } from './utils'
+import { useIsRestoring } from './isRestoring'
 import type { CreateBaseQueryOptions } from './types'
 import type { Accessor } from 'solid-js'
 import type { QueryClient } from './QueryClient'
@@ -104,18 +108,31 @@ export function createBaseQuery<
     | QueryObserverResult<TData, TError>
 
   const client = createMemo(() => useQueryClient(queryClient?.()))
+  const isRestoring = useIsRestoring()
 
-  const defaultedOptions = client().defaultQueryOptions(options())
-  defaultedOptions._optimisticResults = 'optimistic'
-  defaultedOptions.structuralSharing = false
-  if (isServer) {
-    defaultedOptions.retry = false
-    defaultedOptions.throwOnError = true
-  }
-  const observer = new Observer(client(), defaultedOptions)
+  const defaultedOptions = createMemo(() =>
+    mergeProps(client().defaultQueryOptions(options()), {
+      get _optimisticResults() {
+        return isRestoring() ? 'isRestoring' : 'optimistic'
+      },
+      structuralSharing: false,
+      ...(isServer && { retry: false, throwOnError: true }),
+    }),
+  )
+
+  const [observer, setObserver] = createSignal(
+    new Observer(client(), untrack(defaultedOptions)),
+  )
+  // we set the value in a computed because `createMemo`
+  // returns undefined during transitions
+  createComputed(
+    on(client, (c) => setObserver(new Observer(c, defaultedOptions())), {
+      defer: true,
+    }),
+  )
 
   const [state, setState] = createStore<QueryObserverResult<TData, TError>>(
-    observer.getOptimisticResult(defaultedOptions),
+    observer().getOptimisticResult(defaultedOptions()),
   )
 
   const createServerSubscriber = (
@@ -124,9 +141,9 @@ export function createBaseQuery<
     ) => void,
     reject: (reason?: any) => void,
   ) => {
-    return observer.subscribe((result) => {
+    return observer().subscribe((result) => {
       notifyManager.batchCalls(() => {
-        const query = observer.getCurrentQuery()
+        const query = observer().getCurrentQuery()
         const unwrappedResult = hydrateableObserverResult(query, result)
 
         if (unwrappedResult.isError) {
@@ -139,32 +156,30 @@ export function createBaseQuery<
   }
 
   const createClientSubscriber = () => {
-    return observer.subscribe((result) => {
+    const obs = observer()
+    return obs.subscribe((result) => {
       notifyManager.batchCalls(() => {
         // @ts-expect-error - This will error because the reconcile option does not
         // exist on the query-core QueryObserverResult type
-        const reconcileOptions = observer.options.reconcile
+        const reconcileOptions = obs.options.reconcile
+
+        setState((store) => {
+          return reconcileFn(
+            store,
+            result,
+            reconcileOptions === undefined ? 'id' : reconcileOptions,
+          )
+        })
         // If the query has data we dont suspend but instead mutate the resource
         // This could happen when placeholderData/initialData is defined
-        if (queryResource()?.data && result.data && !queryResource.loading) {
-          setState((store) => {
-            return reconcileFn(
-              store,
-              result,
-              reconcileOptions === undefined ? 'id' : reconcileOptions,
-            )
-          })
+        if (
+          queryResource()?.data &&
+          result.data &&
+          !queryResource.loading &&
+          isRestoring()
+        )
           mutate(state)
-        } else {
-          setState((store) => {
-            return reconcileFn(
-              store,
-              result,
-              reconcileOptions === undefined ? 'id' : reconcileOptions,
-            )
-          })
-          refetch()
-        }
+        else refetch()
       })()
     })
   }
@@ -178,17 +193,16 @@ export function createBaseQuery<
     ResourceData | undefined
   >(
     () => {
+      const obs = observer()
       return new Promise((resolve, reject) => {
-        if (isServer) {
-          unsubscribe = createServerSubscriber(resolve, reject)
-        } else {
-          if (!unsubscribe) {
-            unsubscribe = createClientSubscriber()
-          }
-        }
+        if (isServer) unsubscribe = createServerSubscriber(resolve, reject)
+        else if (!unsubscribe && !isRestoring())
+          unsubscribe = createClientSubscriber()
+
+        obs.updateResult()
 
-        if (!state.isLoading) {
-          const query = observer.getCurrentQuery()
+        if (!state.isLoading && !isRestoring()) {
+          const query = obs.getCurrentQuery()
           resolve(hydrateableObserverResult(query, state))
         }
       })
@@ -197,7 +211,9 @@ export function createBaseQuery<
       initialValue: state,
 
       // If initialData is provided, we resolve the resource immediately
-      ssrLoadFrom: options().initialData ? 'initial' : 'server',
+      get ssrLoadFrom() {
+        return options().initialData ? 'initial' : 'server'
+      },
 
       get deferStream() {
         return options().deferStream
@@ -212,37 +228,50 @@ export function createBaseQuery<
        * Note that this is only invoked on the client, for queries that were originally run on the server.
        */
       onHydrated(_k, info) {
+        const defaultOptions = defaultedOptions()
         if (info.value) {
           hydrate(client(), {
             queries: [
               {
-                queryKey: defaultedOptions.queryKey,
-                queryHash: defaultedOptions.queryHash,
+                queryKey: defaultOptions.queryKey,
+                queryHash: defaultOptions.queryHash,
                 state: info.value,
               },
             ],
           })
         }
 
-        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()
+        if (unsubscribe) return
+        /**
+         * Do not refetch query on mount if query was fetched on server,
+         * even if `staleTime` is not set.
+         */
+        const newOptions = { ...defaultOptions }
+        if (defaultOptions.staleTime || !defaultOptions.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()
       },
     },
   )
 
+  createComputed(
+    on(
+      [isRestoring, observer],
+      ([restoring]) => {
+        const unsub = unsubscribe
+        queueMicrotask(() => unsub?.())
+        unsubscribe = null
+        if (!restoring) refetch()
+      },
+      { defer: true },
+    ),
+  )
+
   onCleanup(() => {
     if (unsubscribe) {
       unsubscribe()
@@ -252,8 +281,11 @@ export function createBaseQuery<
 
   createComputed(
     on(
-      () => client().defaultQueryOptions(options()),
-      () => observer.setOptions(client().defaultQueryOptions(options())),
+      [observer, defaultedOptions],
+      ([obs, opts]) => {
+        obs.setOptions(opts)
+        setState(obs.getOptimisticResult(opts))
+      },
       {
         // Defer because we don't need to trigger on first render
         // This only cares about changes to options after the observer is created
@@ -266,12 +298,14 @@ export function createBaseQuery<
     on(
       () => state.status,
       () => {
+        const obs = observer()
         if (
           state.isError &&
           !state.isFetching &&
-          shouldThrowError(observer.options.throwOnError, [
+          !isRestoring() &&
+          shouldThrowError(obs.options.throwOnError, [
             state.error,
-            observer.getCurrentQuery(),
+            obs.getCurrentQuery(),
           ])
         ) {
           throw state.error

package/src/createMutation.ts

@@ -1,5 +1,5 @@
 import { MutationObserver } from '@tanstack/query-core'
-import { createComputed, on, onCleanup } from 'solid-js'
+import { createComputed, createMemo, on, onCleanup } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import { useQueryClient } from './QueryClientProvider'
 import { shouldThrowError } from './utils'
@@ -22,10 +22,10 @@ export function createMutation<
   options: CreateMutationOptions<TData, TError, TVariables, TContext>,
   queryClient?: Accessor<QueryClient>,
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
-  const client = useQueryClient(queryClient?.())
+  const client = createMemo(() => useQueryClient(queryClient?.()))
 
   const observer = new MutationObserver<TData, TError, TVariables, TContext>(
-    client,
+    client(),
     options(),
   )