@tanstack/solid-query 4.10.3 → 4.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "4.10.3",
+  "version": "4.11.1",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "@tanstack/query-core": "4.10.3"
   },
   "peerDependencies": {
-    "solid-js": "^1.5.4"
+    "solid-js": "^1.5.7"
   },
   "peerDependenciesMeta": {},
   "scripts": {

package/src/__tests__/createQuery.test.tsx

@@ -1386,7 +1386,7 @@ describe('createQuery', () => {
 
   it('should create a new query when refetching a removed query', async () => {
     const key = queryKey()
-    const states: Partial<CreateQueryResult<number>>[] = []
+    const states: CreateQueryResult<number>[] = []
     let count = 0
 
     function Page() {
@@ -1400,7 +1400,7 @@ describe('createQuery', () => {
       )
 
       createRenderEffect(() => {
-        states.push({ data: state.data, dataUpdatedAt: state.dataUpdatedAt })
+        states.push({ ...state })
       })
 
       return (
@@ -1510,7 +1510,7 @@ describe('createQuery', () => {
 
   it('should use query function from hook when the existing query does not have a query function', async () => {
     const key = queryKey()
-    const results: Partial<CreateQueryResult<string>>[] = []
+    const results: CreateQueryResult<string>[] = []
 
     queryClient.setQueryData(key(), 'set')
 
@@ -1528,7 +1528,7 @@ describe('createQuery', () => {
       )
 
       createRenderEffect(() => {
-        results.push({ data: result.data, isFetching: result.isFetching })
+        results.push({ ...result })
       })
 
       return (
@@ -1725,7 +1725,7 @@ describe('createQuery', () => {
 
   it('should not fetch when switching to a disabled query', async () => {
     const key = queryKey()
-    const states: Partial<CreateQueryResult<number>>[] = []
+    const states: CreateQueryResult<number>[] = []
 
     function Page() {
       const [count, setCount] = createSignal(0)
@@ -1744,12 +1744,7 @@ describe('createQuery', () => {
       )
 
       createRenderEffect(() => {
-        const { data, isSuccess, isFetching } = state
-        states.push({
-          data,
-          isFetching,
-          isSuccess,
-        })
+        states.push({ ...state })
       })
 
       createEffect(() => {
@@ -1793,7 +1788,7 @@ describe('createQuery', () => {
 
   it('should keep the previous data when keepPreviousData is set', async () => {
     const key = queryKey()
-    const states: Partial<CreateQueryResult<number>>[] = []
+    const states: CreateQueryResult<number>[] = []
 
     function Page() {
       const [count, setCount] = createSignal(0)
@@ -1808,13 +1803,7 @@ describe('createQuery', () => {
       )
 
       createRenderEffect(() => {
-        const { data, isFetching, isSuccess, isPreviousData } = state
-        states.push({
-          data,
-          isFetching,
-          isSuccess,
-          isPreviousData,
-        })
+        states.push({ ...state })
       })
 
       createEffect(() => {
@@ -2137,7 +2126,7 @@ describe('createQuery', () => {
 
   it('should keep the previous data on disabled query when keepPreviousData is set and switching query key multiple times', async () => {
     const key = queryKey()
-    const states: Partial<CreateQueryResult<number>>[] = []
+    const states: CreateQueryResult<number>[] = []
 
     queryClient.setQueryData([key(), 10], 10)
 
@@ -2156,8 +2145,7 @@ describe('createQuery', () => {
       )
 
       createRenderEffect(() => {
-        const { data, isFetching, isSuccess, isPreviousData } = state
-        states.push({ data, isFetching, isSuccess, isPreviousData })
+        states.push({ ...state })
       })
 
       createEffect(() => {
@@ -2780,7 +2768,7 @@ describe('createQuery', () => {
     const key = queryKey()
     const variables = { number: 5, boolean: false, object: {}, array: [] }
     type CustomQueryKey = readonly [ReturnType<typeof key>, typeof variables]
-    const states: Partial<CreateQueryResult<CustomQueryKey>>[] = []
+    const states: CreateQueryResult<CustomQueryKey>[] = []
 
     // TODO(lukemurray): extract the query function to a variable queryFn
 
@@ -5087,7 +5075,7 @@ describe('createQuery', () => {
 
   it('should update query state and refetch when reset with resetQueries', async () => {
     const key = queryKey()
-    const states: Optional<Partial<CreateQueryResult<number>>>[] = []
+    const states: CreateQueryResult<number>[] = []
     let count = 0
 
     function Page() {
@@ -5102,15 +5090,7 @@ describe('createQuery', () => {
       )
 
       createRenderEffect(() => {
-        const { data, isLoading, isFetching, isSuccess, isStale } = state
-
-        states.push({
-          data,
-          isLoading,
-          isFetching,
-          isSuccess,
-          isStale,
-        })
+        states.push({ ...state })
       })
 
       return (
@@ -5169,7 +5149,7 @@ describe('createQuery', () => {
 
   it('should update query state and not refetch when resetting a disabled query with resetQueries', async () => {
     const key = queryKey()
-    const states: Partial<CreateQueryResult<number>>[] = []
+    const states: CreateQueryResult<number>[] = []
     let count = 0
 
     function Page() {
@@ -5184,14 +5164,7 @@ describe('createQuery', () => {
       )
 
       createRenderEffect(() => {
-        const { data, isLoading, isFetching, isSuccess, isStale } = state
-        states.push({
-          data,
-          isLoading,
-          isFetching,
-          isSuccess,
-          isStale,
-        })
+        states.push({ ...state })
       })
 
       const { refetch } = state

package/src/__tests__/suspense.test.tsx

@@ -805,52 +805,6 @@ describe("useQuery's in Suspense mode", () => {
     expect(queryFn).toHaveBeenCalledTimes(1)
   })
 
-  it('should not render suspense fallback when not enabled', async () => {
-    const key = queryKey()
-
-    function Page() {
-      const [enabled, setEnabled] = createSignal(false)
-      const result = createQuery(
-        key,
-        () => {
-          sleep(10)
-          return 'data'
-        },
-        {
-          suspense: true,
-          get enabled() {
-            return enabled()
-          },
-        },
-      )
-
-      return (
-        <div>
-          <button onClick={() => setEnabled(true)}>fire</button>
-          <h1>{result.data ?? 'default'}</h1>
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Suspense fallback="Loading...">
-          <Page />
-        </Suspense>
-      </QueryClientProvider>
-    ))
-
-    expect(screen.queryByText('Loading...')).toBeNull()
-    expect(screen.getByRole('heading').textContent).toBe('default')
-    await sleep(5)
-    fireEvent.click(screen.getByRole('button', { name: /fire/i }))
-    await waitFor(() => screen.getByText('Loading...'))
-
-    await waitFor(() => {
-      expect(screen.getByRole('heading').textContent).toBe('data')
-    })
-  })
-
   it('should error catched in error boundary without infinite loop', async () => {
     const key = queryKey()
 

package/src/__tests__/transition.test.tsx

@@ -0,0 +1,58 @@
+import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
+
+import { createSignal, Show, startTransition, Suspense } from 'solid-js'
+import { createQuery, QueryCache, QueryClientProvider } from '..'
+import { createQueryClient, queryKey, sleep } from './utils'
+
+describe("useQuery's in Suspense mode with transitions", () => {
+  const queryCache = new QueryCache()
+  const queryClient = createQueryClient({ queryCache })
+
+  it('should render the content when the transition is done', async () => {
+    const key = queryKey()
+
+    function Suspended() {
+      const state = createQuery(key, async () => {
+        await sleep(10)
+        return true
+      })
+
+      return <Show when={state.data}>Message</Show>
+    }
+
+    function Page() {
+      const [showSignal, setShowSignal] = createSignal(false)
+
+      return (
+        <div>
+          <button
+            aria-label="toggle"
+            onClick={() =>
+              startTransition(() => setShowSignal((value) => !value))
+            }
+          >
+            {showSignal() ? 'Hide' : 'Show'}
+          </button>
+          <Suspense fallback="Loading">
+            <Show when={showSignal()}>
+              <Suspended />
+            </Show>
+          </Suspense>
+        </div>
+      )
+    }
+
+    render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() => screen.getByText('Show'))
+    fireEvent.click(screen.getByLabelText('toggle'))
+
+    await waitFor(() => screen.getByText('Message'))
+    // verify that the button also updated. See https://github.com/solidjs/solid/issues/1249
+    await waitFor(() => screen.getByText('Hide'))
+  })
+})

package/src/createBaseQuery.ts

@@ -31,7 +31,7 @@ export function createBaseQuery<
   Observer: typeof QueryObserver,
 ): QueryObserverResult<TData, TError> {
   const queryClient = useQueryClient({ context: options.context })
-
+  const emptyData = Symbol('empty')
   const defaultedOptions = queryClient.defaultQueryOptions(options)
   defaultedOptions._optimisticResults = 'optimistic'
   const observer = new Observer(queryClient, defaultedOptions)
@@ -45,6 +45,9 @@ export function createBaseQuery<
     () => {
       return new Promise((resolve) => {
         if (!(state.isFetching && state.isLoading)) {
+          if (unwrap(state.data) === emptyData) {
+            resolve(undefined)
+          }
           resolve(unwrap(state.data))
         }
       })
@@ -61,7 +64,15 @@ export function createBaseQuery<
   const unsubscribe = observer.subscribe((result) => {
     taskQueue.push(() => {
       batch(() => {
-        setState(unwrap(result))
+        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
+        }
+        setState(unwrap(unwrappedResult))
         mutate(() => unwrap(result.data))
         refetch()
       })
@@ -110,7 +121,7 @@ export function createBaseQuery<
       target: QueryObserverResult<TData, TError>,
       prop: keyof QueryObserverResult<TData, TError>,
     ): any {
-      if (prop === 'data' && target.isLoading && target.isFetching) {
+      if (prop === 'data') {
         return dataResource()
       }
       return Reflect.get(target, prop)