Merge branch 'main' into chore/consistent-file-name

Author: manudeli

docs/framework/react/guides/advanced-ssr.md

@@ -530,7 +530,7 @@ export default function Posts() {
 
 Now, your `getPosts` function can return e.g. `Temporal` datetime objects and the data will be serialized and deserialized on the client, assuming your transformer can serialize and deserialize those data types.
 
-For more information, check out the [Next.js App with Prefetching Example](../examples/react/nextjs-app-prefetching).
+For more information, check out the [Next.js App with Prefetching Example](../examples/nextjs-app-prefetching).
 
 ## Experimental streaming without prefetching in Next.js
 
@@ -597,7 +597,7 @@ export function Providers(props: { children: React.ReactNode }) {
 }
 ```
 
-For more information, check out the [NextJs Suspense Streaming Example](../examples/react/nextjs-suspense-streaming).
+For more information, check out the [NextJs Suspense Streaming Example](../examples/nextjs-suspense-streaming).
 
 The big upside is that you no longer need to prefetch queries manually to have SSR work, and it even still streams in the result! This gives you phenomenal DX and lower code complexity.
 

docs/framework/react/guides/mutations.md

@@ -386,7 +386,7 @@ export default function App() {
 
 [//]: # 'Example11'
 
-We also have an extensive [offline example](../examples/react/offline) that covers both queries and mutations.
+We also have an extensive [offline example](../examples/offline) that covers both queries and mutations.
 
 ## Mutation Scopes
 

docs/framework/react/guides/prefetching.md

@@ -412,7 +412,7 @@ const articleRoute = new Route({
 })
 ```
 
-Integration with other routers is also possible, see the [React Router example](../examples/react/react-router) for another demonstration.
+Integration with other routers is also possible, see the [React Router example](../examples/react-router) for another demonstration.
 
 [//]: # 'Router'
 

docs/framework/react/guides/suspense.md

@@ -10,7 +10,7 @@ React Query can also be used with React's Suspense for Data Fetching APIs. For t
 - [useSuspenseQueries](../reference/useSuspenseQueries.md)
 - Additionally, you can use the `useQuery().promise` and `React.use()` (Experimental)
 
-When using suspense mode, `status` states and `error` objects are not needed and are then replaced by usage of the `React.Suspense` component (including the use of the `fallback` prop and React error boundaries for catching errors). Please read the [Resetting Error Boundaries](#resetting-error-boundaries) and look at the [Suspense Example](../examples/react/suspense) for more information on how to set up suspense mode.
+When using suspense mode, `status` states and `error` objects are not needed and are then replaced by usage of the `React.Suspense` component (including the use of the `fallback` prop and React error boundaries for catching errors). Please read the [Resetting Error Boundaries](#resetting-error-boundaries) and look at the [Suspense Example](../examples/suspense) for more information on how to set up suspense mode.
 
 If you want mutations to propagate errors to the nearest error boundary (similar to queries), you can set the `throwOnError` option to `true` as well.
 
@@ -172,7 +172,7 @@ export function Providers(props: { children: React.ReactNode }) {
 }
 ```
 
-For more information, check out the [NextJs Suspense Streaming Example](../examples/react/nextjs-suspense-streaming) and the [Advanced Rendering & Hydration](./advanced-ssr.md) guide.
+For more information, check out the [NextJs Suspense Streaming Example](../examples/nextjs-suspense-streaming) and the [Advanced Rendering & Hydration](./advanced-ssr.md) guide.
 
 ## Using `useQuery().promise` and `React.use()` (Experimental)
 

docs/reference/streamedQuery.md

@@ -5,7 +5,11 @@ title: streamedQuery
 
 `streamedQuery` is a helper function to create a query function that streams data from an [AsyncIterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator). Data will be an Array of all the chunks received. The query will be in a `pending` state until the first chunk of data is received, but will go to `success` after that. The query will stay in fetchStatus `fetching` until the stream ends.
 
+To see `streamedQuery` in action, take a look at our [chat example](../framework/react/examples/chat).
+
 ```tsx
+import { experimental_streamedQuery as streamedQuery } from '@tanstack/react-query'
+
 const query = queryOptions({
   queryKey: ['data'],
   queryFn: streamedQuery({
@@ -14,6 +18,8 @@ const query = queryOptions({
 })
 ```
 
+> Note: `streamedQuery` is currently marked as `experimental` because we want to gather feedback from the community. If you've tried out the API and have feedback for us, please provide it in this [GitHub discussion](https://github.com/TanStack/query/discussions/9065).
+
 **Options**
 
 - `queryFn: (context: QueryFunctionContext) => Promise<AsyncIterable<TData>>`

packages/query-persist-client-core/src/__tests__/createPersister.test.ts

@@ -1,10 +1,9 @@
-import { describe, expect, test, vi } from 'vitest'
+import { afterAll, beforeAll, describe, expect, test, vi } from 'vitest'
 import { Query, QueryClient, hashKey } from '@tanstack/query-core'
 import {
   PERSISTER_KEY_PREFIX,
   experimental_createPersister,
 } from '../createPersister'
-import { sleep } from './utils'
 import type { QueryFunctionContext, QueryKey } from '@tanstack/query-core'
 import type { StoragePersisterOptions } from '../createPersister'
 
@@ -60,6 +59,14 @@ function setupPersister(
 }
 
 describe('createPersister', () => {
+  beforeAll(() => {
+    vi.useFakeTimers()
+  })
+
+  afterAll(() => {
+    vi.useRealTimers()
+  })
+
   test('should fetch if storage is not provided', async () => {
     const { context, persisterFn, query, queryFn } = setupPersister(['foo'], {
       storage: undefined,
@@ -215,7 +222,7 @@ describe('createPersister', () => {
     query.fetch = vi.fn()
     expect(query.state.dataUpdatedAt).toEqual(0)
 
-    await sleep(0)
+    await vi.advanceTimersByTimeAsync(0)
 
     expect(queryFn).toHaveBeenCalledTimes(0)
     expect(query.fetch).toHaveBeenCalledTimes(0)
@@ -243,7 +250,7 @@ describe('createPersister', () => {
     query.state.isInvalidated = true
     query.fetch = vi.fn()
 
-    await sleep(0)
+    await vi.advanceTimersByTimeAsync(0)
 
     expect(queryFn).toHaveBeenCalledTimes(0)
     expect(query.fetch).toHaveBeenCalledTimes(1)
@@ -266,7 +273,7 @@ describe('createPersister', () => {
     await persisterFn(queryFn, context, query)
     query.setData('baz')
 
-    await sleep(0)
+    await vi.advanceTimersByTimeAsync(0)
 
     expect(queryFn).toHaveBeenCalledOnce()
     expect(queryFn).toHaveBeenCalledWith(context)
@@ -308,7 +315,7 @@ describe('createPersister', () => {
     await persisterFn(queryFn, context, query)
     query.fetch = vi.fn()
 
-    await sleep(0)
+    await vi.advanceTimersByTimeAsync(0)
 
     expect(queryFn).toHaveBeenCalledTimes(1)
     expect(query.fetch).toHaveBeenCalledTimes(0)
@@ -337,7 +344,7 @@ describe('createPersister', () => {
     query.state.isInvalidated = true
     query.fetch = vi.fn()
 
-    await sleep(0)
+    await vi.advanceTimersByTimeAsync(0)
 
     expect(queryFn).toHaveBeenCalledTimes(0)
     expect(query.fetch).toHaveBeenCalledTimes(1)
@@ -362,7 +369,7 @@ describe('createPersister', () => {
     await persisterFn(queryFn, context, query)
     query.setData('baz')
 
-    await sleep(0)
+    await vi.advanceTimersByTimeAsync(0)
 
     expect(queryFn).toHaveBeenCalledOnce()
     expect(queryFn).toHaveBeenCalledWith(context)

packages/query-persist-client-core/src/__tests__/utils.ts

@@ -7,7 +7,7 @@ export function createQueryClient(config?: QueryClientConfig): QueryClient {
   return new QueryClient(config)
 }
 
-export function sleep(timeout: number): Promise<void> {
+function sleep(timeout: number): Promise<void> {
   return new Promise((resolve, _reject) => {
     setTimeout(resolve, timeout)
   })

packages/react-query/src/__tests__/QueryClientProvider.test.tsx

@@ -1,9 +1,17 @@
-import { describe, expect, test, vi } from 'vitest'
-import { render, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { render } from '@testing-library/react'
 import { QueryCache, QueryClientProvider, useQuery, useQueryClient } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
 
 describe('QueryClientProvider', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
   test('sets a specific cache for all queries to use', async () => {
     const key = queryKey()
 
@@ -13,10 +21,7 @@ describe('QueryClientProvider', () => {
     function Page() {
       const { data } = useQuery({
         queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 'test'
-        },
+        queryFn: () => sleep(10).then(() => 'test'),
       })
 
       return (
@@ -32,7 +37,7 @@ describe('QueryClientProvider', () => {
       </QueryClientProvider>,
     )
 
-    await waitFor(() => rendered.getByText('test'))
+    await vi.waitFor(() => rendered.getByText('test'))
 
     expect(queryCache.find({ queryKey: key })).toBeDefined()
   })
@@ -50,10 +55,7 @@ describe('QueryClientProvider', () => {
     function Page1() {
       const { data } = useQuery({
         queryKey: key1,
-        queryFn: async () => {
-          await sleep(10)
-          return 'test1'
-        },
+        queryFn: () => sleep(10).then(() => 'test1'),
       })
 
       return (
@@ -65,10 +67,7 @@ describe('QueryClientProvider', () => {
     function Page2() {
       const { data } = useQuery({
         queryKey: key2,
-        queryFn: async () => {
-          await sleep(10)
-          return 'test2'
-        },
+        queryFn: () => sleep(10).then(() => 'test2'),
       })
 
       return (
@@ -89,8 +88,8 @@ describe('QueryClientProvider', () => {
       </>,
     )
 
-    await waitFor(() => rendered.getByText('test1'))
-    await waitFor(() => rendered.getByText('test2'))
+    await vi.waitFor(() => rendered.getByText('test1'))
+    await vi.waitFor(() => rendered.getByText('test2'))
 
     expect(queryCache1.find({ queryKey: key1 })).toBeDefined()
     expect(queryCache1.find({ queryKey: key2 })).not.toBeDefined()
@@ -114,10 +113,7 @@ describe('QueryClientProvider', () => {
     function Page() {
       const { data } = useQuery({
         queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 'test'
-        },
+        queryFn: () => sleep(10).then(() => 'test'),
       })
 
       return (
@@ -133,7 +129,7 @@ describe('QueryClientProvider', () => {
       </QueryClientProvider>,
     )
 
-    await waitFor(() => rendered.getByText('test'))
+    await vi.waitFor(() => rendered.getByText('test'))
 
     expect(queryCache.find({ queryKey: key })).toBeDefined()
     expect(queryCache.find({ queryKey: key })?.options.gcTime).toBe(Infinity)

packages/react-query/src/__tests__/fine-grained-persister.test.tsx

@@ -1,5 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
-import { waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import * as React from 'react'
 import { QueryCache, hashKey } from '@tanstack/query-core'
 import {
@@ -10,6 +9,14 @@ import { useQuery } from '..'
 import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 
 describe('fine grained persister', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
   const queryCache = new QueryCache()
   const queryClient = createQueryClient({ queryCache })
 
@@ -61,7 +68,7 @@ describe('fine grained persister', () => {
 
     const rendered = renderWithClient(queryClient, <Test />)
 
-    await waitFor(() => rendered.getByText('Works from persister'))
+    await vi.waitFor(() => rendered.getByText('Works from persister'))
     expect(spy).not.toHaveBeenCalled()
   })
 
@@ -116,8 +123,8 @@ describe('fine grained persister', () => {
 
     const rendered = renderWithClient(queryClient, <Test />)
 
-    await waitFor(() => rendered.getByText('Works from persister'))
-    await waitFor(() => rendered.getByText('Works from queryFn'))
+    await vi.waitFor(() => rendered.getByText('Works from persister'))
+    await vi.waitFor(() => rendered.getByText('Works from queryFn'))
     expect(spy).toHaveBeenCalledTimes(1)
   })
 
@@ -155,7 +162,7 @@ describe('fine grained persister', () => {
 
     const rendered = renderWithClient(queryClient, <Test />)
 
-    await waitFor(() => rendered.getByText('Works from queryFn'))
+    await vi.waitFor(() => rendered.getByText('Works from queryFn'))
     expect(spy).toHaveBeenCalledTimes(1)
 
     const storedItem = await storage.getItem(`${PERSISTER_KEY_PREFIX}-${hash}`)

packages/react-query/src/__tests__/ssr-hydration.test.tsx

@@ -10,7 +10,7 @@ import {
   hydrate,
   useQuery,
 } from '..'
-import { createQueryClient, setIsServer, sleep } from './utils'
+import { createQueryClient, setIsServer } from './utils'
 
 const ReactHydrate = (element: React.ReactElement, container: Element) => {
   let root: any
@@ -23,7 +23,7 @@ const ReactHydrate = (element: React.ReactElement, container: Element) => {
 }
 
 async function fetchData<TData>(value: TData, ms?: number): Promise<TData> {
-  await sleep(ms || 1)
+  await vi.advanceTimersByTimeAsync(ms || 1)
   return value
 }
 
@@ -36,12 +36,15 @@ describe('Server side rendering with de/rehydration', () => {
   beforeAll(() => {
     // @ts-expect-error we expect IS_REACT_ACT_ENVIRONMENT to exist
     previousIsReactActEnvironment = globalThis.IS_REACT_ACT_ENVIRONMENT = true
+    vi.useFakeTimers()
   })
 
   afterAll(() => {
     // @ts-expect-error we expect IS_REACT_ACT_ENVIRONMENT to exist
     globalThis.IS_REACT_ACT_ENVIRONMENT = previousIsReactActEnvironment
+    vi.useRealTimers()
   })
+
   it('should not mismatch on success', async () => {
     const consoleMock = vi.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
@@ -185,7 +188,7 @@ describe('Server side rendering with de/rehydration', () => {
     expect(consoleMock).toHaveBeenCalledTimes(0)
     expect(fetchDataError).toHaveBeenCalledTimes(2)
     expect(el.innerHTML).toBe(expectedMarkup)
-    await sleep(50)
+    await vi.advanceTimersByTimeAsync(50)
     expect(fetchDataError).toHaveBeenCalledTimes(2)
     expect(el.innerHTML).toBe(
       'ErrorComponent - status:error fetching:false data:undefined',
@@ -253,7 +256,7 @@ describe('Server side rendering with de/rehydration', () => {
     expect(consoleMock).toHaveBeenCalledTimes(0)
     expect(fetchDataSuccess).toHaveBeenCalledTimes(1)
     expect(el.innerHTML).toBe(expectedMarkup)
-    await sleep(50)
+    await vi.advanceTimersByTimeAsync(50)
     expect(fetchDataSuccess).toHaveBeenCalledTimes(1)
     expect(el.innerHTML).toBe(
       'SuccessComponent - status:success fetching:false data:success!',