@tanstack/solid-query 4.11.0 → 4.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -33,11 +33,10 @@
     "src"
   ],
   "devDependencies": {
-    "@types/jscodeshift": "^0.11.3",
-    "jscodeshift": "^0.13.1"
+    "solid-jest": "^0.2.0"
   },
   "dependencies": {
-    "@tanstack/query-core": "4.10.3"
+    "@tanstack/query-core": "4.12.0"
   },
   "peerDependencies": {
     "solid-js": "^1.5.7"
@@ -46,7 +45,7 @@
   "scripts": {
     "clean": "rm -rf ./build",
     "test:eslint": "../../node_modules/.bin/eslint --ext .ts,.tsx ./src",
-    "test:jest": "../../node_modules/.bin/jest --config jest.config.js",
-    "test:jest:dev": "pnpm test:jest --watch"
+    "test:jest": "../../node_modules/.bin/jest --config ./jest.config.ts",
+    "test:dev": "pnpm run test:jest --watch"
   }
 }

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(() => {
@@ -2574,48 +2562,6 @@ describe('createQuery', () => {
     expect(queryCache.find(key())!.options.queryFn).toBe(queryFn1)
   })
 
-  // TODO(lukemurray): this seems like a react implementation detail
-  it.skip('should render correct states even in case of useEffect triggering delays', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
-
-    // @ts-expect-error - we skip this test
-    const originalUseEffect = NotReact.useEffect
-
-    // Try to simulate useEffect timing delay
-    // @ts-ignore
-    NotReact.useEffect = (...args: any[]) => {
-      originalUseEffect(() => {
-        setTimeout(() => {
-          args[0]()
-        }, 10)
-      }, args[1])
-    }
-
-    function Page() {
-      const state = createQuery(key, () => 'data', { staleTime: Infinity })
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-      return null
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-    queryClient.setQueryData(key(), 'data')
-    await sleep(50)
-
-    // @ts-ignore
-    NotReact.useEffect = originalUseEffect
-
-    expect(states.length).toBe(2)
-    expect(states[0]).toMatchObject({ status: 'loading' })
-    expect(states[1]).toMatchObject({ status: 'success' })
-  })
-
   it('should batch re-renders', async () => {
     const key = queryKey()
 
@@ -2780,7 +2726,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 +5033,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 +5048,7 @@ describe('createQuery', () => {
       )
 
       createRenderEffect(() => {
-        const { data, isLoading, isFetching, isSuccess, isStale } = state
-
-        states.push({
-          data,
-          isLoading,
-          isFetching,
-          isSuccess,
-          isStale,
-        })
+        states.push({ ...state })
       })
 
       return (
@@ -5169,7 +5107,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 +5122,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/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)