@tanstack/react-query 5.0.0-beta.9 → 5.0.0-rc.1

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(