@tanstack/react-query 5.0.0-beta.8 → 5.0.0-rc.0

package/src/__tests__/HydrationBoundary.test.tsx

@@ -137,8 +137,8 @@ describe('React hydration', () => {
         queryFn: () => dataQuery(['should change']),
       })
       await intermediateClient.prefetchQuery({
-        queryKey: ['added string'],
-        queryFn: () => dataQuery(['added string']),
+        queryKey: ['added'],
+        queryFn: () => dataQuery(['added']),
       })
       const dehydrated = dehydrate(intermediateClient)
       intermediateClient.clear()
@@ -147,17 +147,121 @@ describe('React hydration', () => {
         <QueryClientProvider client={queryClient}>
           <HydrationBoundary state={dehydrated}>
             <Page queryKey={['string']} />
-            <Page queryKey={['added string']} />
+            <Page queryKey={['added']} />
           </HydrationBoundary>
         </QueryClientProvider>,
       )
 
-      // Existing query data should be overwritten if older,
-      // so this should have changed
+      // Existing observer should not have updated at this point,
+      // as that would indicate a side effect in the render phase
+      rendered.getByText('string')
+      // New query data should be available immediately
+      rendered.getByText('added')
+
       await sleep(10)
+      // After effects phase has had time to run, the observer should have updated
+      expect(rendered.queryByText('string')).toBeNull()
       rendered.getByText('should change')
-      // New query data should be available immediately
-      rendered.getByText('added string')
+
+      queryClient.clear()
+    })
+
+    // When we hydrate in transitions that are later aborted, it could be
+    // confusing to both developers and users if we suddenly updated existing
+    // state on the screen (why did this update when it was not stale, nothing
+    // remounted, I didn't change tabs etc?).
+    // Any queries that does not exist in the cache yet can still be hydrated
+    // since they don't have any observers on the current page that would update.
+    test('should hydrate new but not existing queries if transition is aborted', async () => {
+      const initialDehydratedState = JSON.parse(stringifiedState)
+      const queryCache = new QueryCache()
+      const queryClient = createQueryClient({ queryCache })
+
+      function Page({ queryKey }: { queryKey: [string] }) {
+        const { data } = useQuery({
+          queryKey,
+          queryFn: () => dataQuery(queryKey),
+        })
+        return (
+          <div>
+            <h1>{data}</h1>
+          </div>
+        )
+      }
+
+      const rendered = render(
+        <QueryClientProvider client={queryClient}>
+          <HydrationBoundary state={initialDehydratedState}>
+            <Page queryKey={['string']} />
+          </HydrationBoundary>
+        </QueryClientProvider>,
+      )
+
+      await rendered.findByText('string')
+
+      const intermediateCache = new QueryCache()
+      const intermediateClient = createQueryClient({
+        queryCache: intermediateCache,
+      })
+      await intermediateClient.prefetchQuery({
+        queryKey: ['string'],
+        queryFn: () => dataQuery(['should not change']),
+      })
+      await intermediateClient.prefetchQuery({
+        queryKey: ['added'],
+        queryFn: () => dataQuery(['added']),
+      })
+      const newDehydratedState = dehydrate(intermediateClient)
+      intermediateClient.clear()
+
+      function Thrower() {
+        throw new Promise(() => {
+          // Never resolve
+        })
+
+        // @ts-ignore
+        return null
+      }
+
+      React.startTransition(() => {
+        rendered.rerender(
+          <React.Suspense fallback="loading">
+            <QueryClientProvider client={queryClient}>
+              <HydrationBoundary state={newDehydratedState}>
+                <Page queryKey={['string']} />
+                <Page queryKey={['added']} />
+                <Thrower />
+              </HydrationBoundary>
+            </QueryClientProvider>
+          </React.Suspense>,
+        )
+
+        rendered.getByText('loading')
+      })
+
+      React.startTransition(() => {
+        rendered.rerender(
+          <QueryClientProvider client={queryClient}>
+            <HydrationBoundary state={initialDehydratedState}>
+              <Page queryKey={['string']} />
+              <Page queryKey={['added']} />
+            </HydrationBoundary>
+          </QueryClientProvider>,
+        )
+
+        // This query existed before the transition so it should stay the same
+        rendered.getByText('string')
+        expect(rendered.queryByText('should not change')).toBeNull()
+        // New query data should be available immediately because it was
+        // hydrated in the previous transition, even though the new dehydrated
+        // state did not contain it
+        rendered.getByText('added')
+      })
+
+      await sleep(10)
+      // It should stay the same even after effects have had a chance to run
+      rendered.getByText('string')
+      expect(rendered.queryByText('should not change')).toBeNull()
 
       queryClient.clear()
     })

package/src/__tests__/QueryResetErrorBoundary.test.tsx

@@ -3,7 +3,14 @@ import { ErrorBoundary } from 'react-error-boundary'
 import * as React from 'react'
 
 import { vi } from 'vitest'
-import { QueryCache, QueryErrorResetBoundary, useQueries, useQuery } from '..'
+import {
+  QueryCache,
+  QueryErrorResetBoundary,
+  useQueries,
+  useQuery,
+  useSuspenseQueries,
+  useSuspenseQuery,
+} from '..'
 import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 
 // TODO: This should be removed with the types for react-error-boundary get updated.
@@ -522,7 +529,7 @@ describe('QueryErrorResetBoundary', () => {
       let renders = 0
 
       function Page() {
-        const { data } = useQuery({
+        const { data } = useSuspenseQuery({
           queryKey: key,
           queryFn: async () => {
             fetchCount++
@@ -534,7 +541,6 @@ describe('QueryErrorResetBoundary', () => {
             }
           },
           retry: false,
-          suspense: true,
         })
         renders++
         return <div>{data}</div>
@@ -735,7 +741,7 @@ describe('QueryErrorResetBoundary', () => {
       let succeed = false
 
       function Page() {
-        const [{ data }] = useQueries({
+        const [{ data }] = useSuspenseQueries({
           queries: [
             {
               queryKey: key,
@@ -748,9 +754,7 @@ describe('QueryErrorResetBoundary', () => {
                 }
               },
               retry: false,
-              throwOnError: true,
               retryOnMount: true,
-              suspense: true,
             },
           ],
         })

package/src/__tests__/fine-grained-persister.test.tsx

@@ -0,0 +1,163 @@
+import { waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import * as React from 'react'
+import { QueryCache, hashKey } from '@tanstack/query-core'
+import { vi } from 'vitest'
+import { useQuery } from '..'
+import {
+  PERSISTER_KEY_PREFIX,
+  experimental_createPersister,
+} from '../../../query-persist-client-core/src'
+import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
+
+describe('fine grained persister', () => {
+  const queryCache = new QueryCache()
+  const queryClient = createQueryClient({ queryCache })
+
+  it('should restore query state from persister and not refetch', async () => {
+    const key = queryKey()
+    const hash = hashKey(key)
+    const spy = vi.fn(() => Promise.resolve('Works from queryFn'))
+
+    const mapStorage = new Map()
+    const storage = {
+      getItem: (itemKey: string) => Promise.resolve(mapStorage.get(itemKey)),
+      setItem: async (itemKey: string, value: unknown) => {
+        mapStorage.set(itemKey, value)
+      },
+      removeItem: async (itemKey: string) => {
+        mapStorage.delete(itemKey)
+      },
+    }
+
+    await storage.setItem(
+      `${PERSISTER_KEY_PREFIX}-${hash}`,
+      JSON.stringify({
+        buster: '',
+        queryHash: hash,
+        queryKey: key,
+        state: {
+          dataUpdatedAt: Date.now(),
+          data: 'Works from persister',
+        },
+      }),
+    )
+
+    function Test() {
+      const [_, setRef] = React.useState<HTMLDivElement | null>()
+
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: spy,
+        persister: experimental_createPersister({
+          storage,
+        }),
+        staleTime: 5000,
+      })
+
+      return <div ref={(value) => setRef(value)}>{data}</div>
+    }
+
+    const rendered = renderWithClient(queryClient, <Test />)
+
+    await waitFor(() => rendered.getByText('Works from persister'))
+    expect(spy).not.toHaveBeenCalled()
+  })
+
+  it('should restore query state from persister and refetch', async () => {
+    const key = queryKey()
+    const hash = hashKey(key)
+    const spy = vi.fn(async () => {
+      await sleep(5)
+
+      return 'Works from queryFn'
+    })
+
+    const mapStorage = new Map()
+    const storage = {
+      getItem: (itemKey: string) => Promise.resolve(mapStorage.get(itemKey)),
+      setItem: async (itemKey: string, value: unknown) => {
+        mapStorage.set(itemKey, value)
+      },
+      removeItem: async (itemKey: string) => {
+        mapStorage.delete(itemKey)
+      },
+    }
+
+    await storage.setItem(
+      `${PERSISTER_KEY_PREFIX}-${hash}`,
+      JSON.stringify({
+        buster: '',
+        queryHash: hash,
+        queryKey: key,
+        state: {
+          dataUpdatedAt: Date.now(),
+          data: 'Works from persister',
+        },
+      }),
+    )
+
+    function Test() {
+      const [_, setRef] = React.useState<HTMLDivElement | null>()
+
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: spy,
+        persister: experimental_createPersister({
+          storage,
+        }),
+      })
+
+      return <div ref={(value) => setRef(value)}>{data}</div>
+    }
+
+    const rendered = renderWithClient(queryClient, <Test />)
+
+    await waitFor(() => rendered.getByText('Works from persister'))
+    await waitFor(() => rendered.getByText('Works from queryFn'))
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should store query state to persister after fetch', async () => {
+    const key = queryKey()
+    const hash = hashKey(key)
+    const spy = vi.fn(() => Promise.resolve('Works from queryFn'))
+
+    const mapStorage = new Map()
+    const storage = {
+      getItem: (itemKey: string) => Promise.resolve(mapStorage.get(itemKey)),
+      setItem: async (itemKey: string, value: unknown) => {
+        mapStorage.set(itemKey, value)
+      },
+      removeItem: async (itemKey: string) => {
+        mapStorage.delete(itemKey)
+      },
+    }
+
+    function Test() {
+      const [_, setRef] = React.useState<HTMLDivElement | null>()
+
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: spy,
+        persister: experimental_createPersister({
+          storage,
+        }),
+      })
+
+      return <div ref={(value) => setRef(value)}>{data}</div>
+    }
+
+    const rendered = renderWithClient(queryClient, <Test />)
+
+    await waitFor(() => rendered.getByText('Works from queryFn'))
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    const storedItem = await storage.getItem(`${PERSISTER_KEY_PREFIX}-${hash}`)
+    expect(JSON.parse(storedItem)).toMatchObject({
+      state: {
+        data: 'Works from queryFn',
+      },
+    })
+  })
+})

package/src/__tests__/queryOptions.types.test.tsx

@@ -0,0 +1,31 @@
+import { queryOptions } from '../queryOptions'
+import { doNotExecute } from './utils'
+import type { Equal, Expect } from './utils'
+
+describe('queryOptions', () => {
+  it('should not allow excess properties', () => {
+    doNotExecute(() => {
+      // @ts-expect-error this is a good error, because stallTime does not exist!
+      return queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        stallTime: 1000,
+      })
+    })
+  })
+  it('should infer types for callbacks', () => {
+    doNotExecute(() => {
+      return queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        staleTime: 1000,
+        select: (data) => {
+          // @ts-expect-error data is in fact inferred as unknown
+          // see https://github.com/microsoft/TypeScript/issues/47599
+          const result: Expect<Equal<number, typeof data>> = true
+          return result
+        },
+      })
+    })
+  })
+})

package/src/__tests__/ssr.test.tsx

@@ -132,7 +132,7 @@ describe('Server Side Rendering', () => {
         queryKey: key,
         queryFn,
         getNextPageParam: () => undefined,
-        defaultPageParam: 0,
+        initialPageParam: 0,
       })
       return (
         <ul>
@@ -146,7 +146,7 @@ describe('Server Side Rendering', () => {
     await queryClient.prefetchInfiniteQuery({
       queryKey: key,
       queryFn,
-      defaultPageParam: 0,
+      initialPageParam: 0,
     })
 
     const markup = renderToString(