@tanstack/react-query 5.0.0-alpha.9 → 5.0.0-alpha.91

package/src/__tests__/useQuery.test.tsx

@@ -1,11 +1,14 @@
 import { act, fireEvent, render, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import * as React from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { vi } from 'vitest'
+import { QueryCache, keepPreviousData, useQuery } from '..'
 import {
   Blink,
   createQueryClient,
   expectType,
-  mockNavigatorOnLine,
+  mockOnlineManagerIsOnline,
   mockVisibilityState,
   queryKey,
   renderWithClient,
@@ -15,13 +18,9 @@ import {
 import type {
   DefinedUseQueryResult,
   QueryFunction,
-  QueryFunctionContext,
   UseQueryOptions,
   UseQueryResult,
 } from '..'
-import { QueryCache, useQuery, keepPreviousData } from '..'
-import { ErrorBoundary } from 'react-error-boundary'
-import { vi } from 'vitest'
 import type { Mock } from 'vitest'
 
 describe('useQuery', () => {
@@ -64,23 +63,17 @@ describe('useQuery', () => {
       useQuery({
         queryKey: [key],
         queryFn: async () => true,
-        onSuccess: (data) => expectType<boolean>(data),
-        onSettled: (data) => expectType<boolean | undefined>(data),
       })
 
       // it should be possible to specify a union type as result type
       const unionTypeSync = useQuery({
         queryKey: key,
         queryFn: () => (Math.random() > 0.5 ? 'a' : 'b'),
-
-        onSuccess: (data) => expectType<'a' | 'b'>(data),
       })
       expectType<'a' | 'b' | undefined>(unionTypeSync.data)
       const unionTypeAsync = useQuery<'a' | 'b'>({
         queryKey: key,
         queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
-
-        onSuccess: (data) => expectType<'a' | 'b'>(data),
       })
       expectType<'a' | 'b' | undefined>(unionTypeAsync.data)
 
@@ -450,255 +443,6 @@ describe('useQuery', () => {
     })
   })
 
-  it('should call onSuccess after a query has been fetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = vi.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 'data'
-        },
-        onSuccess,
-      })
-      states.push(state)
-      return <div>data: {state.data}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await rendered.findByText('data: data')
-    expect(states.length).toBe(2)
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
-  it('should call onSuccess after a query has been refetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = vi.fn()
-    let count = 0
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          count++
-          await sleep(10)
-          return 'data' + count
-        },
-        onSuccess,
-      })
-
-      states.push(state)
-
-      return (
-        <div>
-          <div>data: {state.data}</div>
-          <button onClick={() => state.refetch()}>refetch</button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await rendered.findByText('data: data1')
-    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
-    await rendered.findByText('data: data2')
-
-    expect(states.length).toBe(3) //pending, success, success after refetch
-    expect(count).toBe(2)
-    expect(onSuccess).toHaveBeenCalledTimes(2)
-  })
-
-  it('should call onSuccess after a disabled query has been fetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = vi.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: () => 'data',
-        enabled: false,
-        onSuccess,
-      })
-
-      states.push(state)
-
-      return (
-        <div>
-          <div>isSuccess: {state.isSuccess ? 'true' : 'false'}</div>
-          <button onClick={() => state.refetch()}>refetch</button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('isSuccess: false')
-    })
-
-    fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
-
-    await waitFor(() => {
-      rendered.getByText('isSuccess: true')
-    })
-
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
-  it('should not call onSuccess if a component has unmounted', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = vi.fn()
-
-    function Page() {
-      const [show, setShow] = React.useState(true)
-
-      React.useEffect(() => {
-        setShow(false)
-      }, [setShow])
-
-      return show ? <Component /> : null
-    }
-
-    function Component() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 'data'
-        },
-        onSuccess,
-      })
-      states.push(state)
-      return null
-    }
-
-    renderWithClient(queryClient, <Page />)
-
-    await sleep(50)
-    expect(states.length).toBe(1)
-    expect(onSuccess).toHaveBeenCalledTimes(0)
-  })
-
-  it('should call onError after a query has been fetched with an error', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<unknown>[] = []
-    const onError = vi.fn()
-
-    function Page() {
-      const state = useQuery<unknown>({
-        queryKey: key,
-        queryFn: () => Promise.reject(new Error('error')),
-        retry: false,
-        onError,
-      })
-      states.push(state)
-      return null
-    }
-
-    renderWithClient(queryClient, <Page />)
-
-    await sleep(10)
-    expect(states.length).toBe(2)
-    expect(onError).toHaveBeenCalledTimes(1)
-    expect(onError).toHaveBeenCalledWith(new Error('error'))
-  })
-
-  it('should not call onError when receiving a CancelledError', async () => {
-    const key = queryKey()
-    const onError = vi.fn()
-
-    function Page() {
-      const { status, fetchStatus } = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 23
-        },
-
-        onError,
-      })
-      return (
-        <span>
-          status: {status}, fetchStatus: {fetchStatus}
-        </span>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    rendered.getByText('status: pending, fetchStatus: fetching')
-
-    await queryClient.cancelQueries({ queryKey: key })
-    // query cancellation will reset the query to it's initial state
-    await waitFor(() =>
-      rendered.getByText('status: pending, fetchStatus: idle'),
-    )
-    expect(onError).not.toHaveBeenCalled()
-  })
-
-  it('should call onSettled after a query has been fetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSettled = vi.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: () => 'data',
-        onSettled,
-      })
-      states.push(state)
-
-      return <div>data: {state.data}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('data: data')
-    })
-
-    expect(states.length).toBe(2)
-    expect(onSettled).toHaveBeenCalledTimes(1)
-    expect(onSettled).toHaveBeenCalledWith('data', null)
-  })
-
-  it('should call onSettled after a query has been fetched with an error', async () => {
-    const key = queryKey()
-    const onSettled = vi.fn()
-    const error = new Error('error')
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return Promise.reject(error)
-        },
-        retry: false,
-        onSettled,
-      })
-      return <div>status: {state.status}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('status: error')
-    })
-    expect(onSettled).toHaveBeenCalledTimes(1)
-    expect(onSettled).toHaveBeenCalledWith(undefined, error)
-  })
-
   it('should not cancel an ongoing fetch when refetch is called with cancelRefetch=false if we have data already', async () => {
     const key = queryKey()
     let fetchCount = 0
@@ -948,17 +692,15 @@ describe('useQuery', () => {
     // required to make sure no additional renders are happening after data is successfully fetched for the second time
     await sleep(100)
 
-    expect(states.length).toBe(5)
+    expect(states.length).toBe(4)
     // First load
     expect(states[0]).toMatchObject({ isPending: true, isSuccess: false })
     // First success
     expect(states[1]).toMatchObject({ isPending: false, isSuccess: true })
     // Remove
     expect(states[2]).toMatchObject({ isPending: true, isSuccess: false })
-    // Hook state update
-    expect(states[3]).toMatchObject({ isPending: true, isSuccess: false })
     // Second success
-    expect(states[4]).toMatchObject({ isPending: false, isSuccess: true })
+    expect(states[3]).toMatchObject({ isPending: false, isSuccess: true })
   })
 
   it('should fetch when refetchOnMount is false and nothing has been fetched yet', async () => {
@@ -1060,48 +802,6 @@ describe('useQuery', () => {
     expect(states[1]).toMatchObject({ data: 'test' })
   })
 
-  it('should not re-render when it should only re-render only data change and the selected data did not change', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: () => ({ name: 'test' }),
-        select: (data) => data.name,
-        notifyOnChangeProps: ['data'],
-      })
-
-      states.push(state)
-
-      return (
-        <div>
-          <div>{state.data}</div>
-          <button onClick={() => state.refetch()}>refetch</button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('test')
-    })
-
-    fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
-
-    await waitFor(() => {
-      rendered.getByText('test')
-    })
-
-    expect(states[0]).toMatchObject({ data: undefined })
-    expect(states[1]).toMatchObject({ data: 'test' })
-
-    // make sure no additional renders happen
-    await sleep(50)
-    expect(states.length).toBe(2)
-  })
-
   it('should throw an error when a selector throws', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
@@ -1728,21 +1428,24 @@ describe('useQuery', () => {
     })
   })
 
-  it('should transition to error state when placeholderData is set', async () => {
+  it('should keep the previous data when placeholderData is set and select fn transform is used', async () => {
     const key = queryKey()
     const states: UseQueryResult<number>[] = []
 
-    function Page({ count }: { count: number }) {
-      const state = useQuery<number, Error>({
+    function Page() {
+      const [count, setCount] = React.useState(0)
+
+      const state = useQuery({
         queryKey: [key, count],
         queryFn: async () => {
           await sleep(10)
-          if (count === 2) {
-            throw new Error('Error test')
+          return {
+            count,
           }
-          return Promise.resolve(count)
         },
-        retry: false,
+        select(data) {
+          return data.count
+        },
         placeholderData: keepPreviousData,
       })
 
@@ -1750,71 +1453,259 @@ describe('useQuery', () => {
 
       return (
         <div>
-          <h1>data: {state.data}</h1>
-          <h2>error: {state.error?.message}</h2>
-          <p>placeholder data: {state.isPlaceholderData}</p>
+          <div>data: {state.data}</div>
+          <button onClick={() => setCount(1)}>setCount</button>
         </div>
       )
     }
 
-    const rendered = renderWithClient(queryClient, <Page count={0} />)
+    const rendered = renderWithClient(queryClient, <Page />)
+
     await waitFor(() => rendered.getByText('data: 0'))
-    act(() => rendered.rerender(<Page count={1} />))
-    await waitFor(() => rendered.getByText('data: 1'))
-    act(() => rendered.rerender(<Page count={2} />))
-    await waitFor(() => rendered.getByText('error: Error test'))
 
-    await waitFor(() => expect(states.length).toBe(8))
-    // Initial
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+
+    await waitFor(() => rendered.getByText('data: 1'))
+
+    // Initial
     expect(states[0]).toMatchObject({
       data: undefined,
       isFetching: true,
-      status: 'pending',
-      error: null,
+      isSuccess: false,
       isPlaceholderData: false,
     })
     // Fetched
     expect(states[1]).toMatchObject({
       data: 0,
       isFetching: false,
-      status: 'success',
-      error: null,
+      isSuccess: true,
       isPlaceholderData: false,
     })
-    // rerender Page 1
+    // Set state
     expect(states[2]).toMatchObject({
       data: 0,
       isFetching: true,
-      status: 'success',
-      error: null,
+      isSuccess: true,
+      isPlaceholderData: true,
+    })
+    // New data
+    expect(states[3]).toMatchObject({
+      data: 1,
+      isFetching: false,
+      isSuccess: true,
+      isPlaceholderData: false,
+    })
+  })
+
+  it('should keep the previous queryKey (from prevQuery) between multiple pending queries when placeholderData is set and select fn transform is used', async () => {
+    const keys: Array<readonly unknown[] | null> = []
+    const key = queryKey()
+    const states: UseQueryResult<number>[] = []
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+
+      const state = useQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          await sleep(10)
+          return {
+            count,
+          }
+        },
+        select(data) {
+          return data.count
+        },
+        placeholderData: (prevData, prevQuery) => {
+          if (prevQuery) {
+            keys.push(prevQuery.queryKey)
+          }
+          return prevData
+        },
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <div>data: {state.data}</div>
+          <button onClick={() => setCount((prev) => prev + 1)}>setCount</button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => rendered.getByText('data: 0'))
+
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+
+    await waitFor(() => rendered.getByText('data: 3'))
+
+    const allPreviousKeysAreTheFirstQueryKey = keys.every(
+      (k) => JSON.stringify(k) === JSON.stringify([key, 0]),
+    )
+
+    expect(allPreviousKeysAreTheFirstQueryKey).toBe(true)
+  })
+
+  it('should show placeholderData between multiple pending queries when select fn transform is used', async () => {
+    const key = queryKey()
+    const states: UseQueryResult<number>[] = []
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+
+      const state = useQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          await sleep(10)
+          return {
+            count,
+          }
+        },
+        select(data) {
+          return data.count
+        },
+        placeholderData: keepPreviousData,
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <div>data: {state.data}</div>
+          <button onClick={() => setCount((prev) => prev + 1)}>setCount</button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => rendered.getByText('data: 0'))
+
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+
+    await waitFor(() => rendered.getByText('data: 3'))
+    // Initial
+    expect(states[0]).toMatchObject({
+      data: undefined,
+      isFetching: true,
+      isSuccess: false,
+      isPlaceholderData: false,
+    })
+    // Fetched
+    expect(states[1]).toMatchObject({
+      data: 0,
+      isFetching: false,
+      isSuccess: true,
+      isPlaceholderData: false,
+    })
+    // Set state -> count = 1
+    expect(states[2]).toMatchObject({
+      data: 0,
+      isFetching: true,
+      isSuccess: true,
       isPlaceholderData: true,
     })
-    // Hook state update
+    // Set state -> count = 2
     expect(states[3]).toMatchObject({
       data: 0,
       isFetching: true,
-      status: 'success',
-      error: null,
+      isSuccess: true,
       isPlaceholderData: true,
     })
-    // New data
+    // Set state -> count = 3
     expect(states[4]).toMatchObject({
-      data: 1,
+      data: 0,
+      isFetching: true,
+      isSuccess: true,
+      isPlaceholderData: true,
+    })
+    // New data
+    expect(states[5]).toMatchObject({
+      data: 3,
+      isFetching: false,
+      isSuccess: true,
+      isPlaceholderData: false,
+    })
+  })
+
+  it('should transition to error state when placeholderData is set', async () => {
+    const key = queryKey()
+    const states: UseQueryResult<number>[] = []
+
+    function Page({ count }: { count: number }) {
+      const state = useQuery<number, Error>({
+        queryKey: [key, count],
+        queryFn: async () => {
+          await sleep(10)
+          if (count === 2) {
+            throw new Error('Error test')
+          }
+          return Promise.resolve(count)
+        },
+        retry: false,
+        placeholderData: keepPreviousData,
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <h1>data: {state.data}</h1>
+          <h2>error: {state.error?.message}</h2>
+          <p>placeholder data: {state.isPlaceholderData}</p>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page count={0} />)
+    await waitFor(() => rendered.getByText('data: 0'))
+    act(() => rendered.rerender(<Page count={1} />))
+    await waitFor(() => rendered.getByText('data: 1'))
+    act(() => rendered.rerender(<Page count={2} />))
+    await waitFor(() => rendered.getByText('error: Error test'))
+
+    await waitFor(() => expect(states.length).toBe(6))
+    // Initial
+    expect(states[0]).toMatchObject({
+      data: undefined,
+      isFetching: true,
+      status: 'pending',
+      error: null,
+      isPlaceholderData: false,
+    })
+    // Fetched
+    expect(states[1]).toMatchObject({
+      data: 0,
       isFetching: false,
       status: 'success',
       error: null,
       isPlaceholderData: false,
     })
-    // rerender Page 2
-    expect(states[5]).toMatchObject({
-      data: 1,
+    // rerender Page 1
+    expect(states[2]).toMatchObject({
+      data: 0,
       isFetching: true,
       status: 'success',
       error: null,
       isPlaceholderData: true,
     })
-    // Hook state update again
-    expect(states[6]).toMatchObject({
+    // New data
+    expect(states[3]).toMatchObject({
+      data: 1,
+      isFetching: false,
+      status: 'success',
+      error: null,
+      isPlaceholderData: false,
+    })
+    // rerender Page 2
+    expect(states[4]).toMatchObject({
       data: 1,
       isFetching: true,
       status: 'success',
@@ -1822,13 +1713,13 @@ describe('useQuery', () => {
       isPlaceholderData: true,
     })
     // Error
-    expect(states[7]).toMatchObject({
+    expect(states[5]).toMatchObject({
       data: undefined,
       isFetching: false,
       status: 'error',
       isPlaceholderData: false,
     })
-    expect(states[7]?.error).toHaveProperty('message', 'Error test')
+    expect(states[5]!.error).toHaveProperty('message', 'Error test')
   })
 
   it('should not show initial data from next query if placeholderData is set', async () => {
@@ -1873,7 +1764,7 @@ describe('useQuery', () => {
       rendered.getByText('data: 1, count: 1, isFetching: false'),
     )
 
-    expect(states.length).toBe(5)
+    expect(states.length).toBe(4)
 
     // Initial
     expect(states[0]).toMatchObject({
@@ -1896,15 +1787,8 @@ describe('useQuery', () => {
       isSuccess: true,
       isPlaceholderData: false,
     })
-    // Hook state update
-    expect(states[3]).toMatchObject({
-      data: 99,
-      isFetching: true,
-      isSuccess: true,
-      isPlaceholderData: false,
-    })
     // New data
-    expect(states[4]).toMatchObject({
+    expect(states[3]).toMatchObject({
       data: 1,
       isFetching: false,
       isSuccess: true,
@@ -2276,67 +2160,271 @@ describe('useQuery', () => {
 
     renderWithClient(queryClient, <Page />)
 
-    await sleep(100)
+    await sleep(100)
+
+    expect(states.length).toBe(3)
+    expect(states[0]).toMatchObject({ isStale: true })
+    expect(states[1]).toMatchObject({ isStale: false })
+    expect(states[2]).toMatchObject({ isStale: true })
+  })
+
+  describe('notifyOnChangeProps', () => {
+    it('should not re-render when it should only re-render only data change and the selected data did not change', async () => {
+      const key = queryKey()
+      const states: UseQueryResult<string>[] = []
+
+      function Page() {
+        const state = useQuery({
+          queryKey: key,
+          queryFn: () => ({ name: 'test' }),
+          select: (data) => data.name,
+          notifyOnChangeProps: ['data'],
+        })
+
+        states.push(state)
+
+        return (
+          <div>
+            <div>{state.data}</div>
+            <button onClick={() => state.refetch()}>refetch</button>
+          </div>
+        )
+      }
+
+      const rendered = renderWithClient(queryClient, <Page />)
+
+      await waitFor(() => {
+        rendered.getByText('test')
+      })
+
+      fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+
+      await waitFor(() => {
+        rendered.getByText('test')
+      })
+
+      expect(states[0]).toMatchObject({ data: undefined })
+      expect(states[1]).toMatchObject({ data: 'test' })
+
+      // make sure no additional renders happen
+      await sleep(50)
+      expect(states.length).toBe(2)
+    })
+    it('should not re-render when it should only re-render on data changes and the data did not change', async () => {
+      const key = queryKey()
+      const states: UseQueryResult<string>[] = []
+
+      function Page() {
+        const state = useQuery({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(5)
+            return 'test'
+          },
+
+          notifyOnChangeProps: ['data'],
+        })
+
+        states.push(state)
+
+        return (
+          <>
+            <button
+              onClick={async () => {
+                await state.refetch()
+              }}
+            >
+              refetch
+            </button>
+
+            <div>{state.data}</div>
+          </>
+        )
+      }
+
+      const rendered = renderWithClient(queryClient, <Page />)
+
+      await waitFor(() => {
+        rendered.getByText('test')
+      })
+
+      fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+
+      // sleep is required to make sure no additional renders happen after click
+      await sleep(20)
+
+      expect(states.length).toBe(2)
+      expect(states[0]).toMatchObject({
+        data: undefined,
+        status: 'pending',
+        isFetching: true,
+      })
+      expect(states[1]).toMatchObject({
+        data: 'test',
+        status: 'success',
+        isFetching: false,
+      })
+    })
+
+    // See https://github.com/TanStack/query/discussions/5588
+    describe('function', () => {
+      it('should not re-render when it should only re-render on data changes and the data did not change', async () => {
+        const key = queryKey()
+        const states: UseQueryResult<string>[] = []
+
+        function Page() {
+          const state = useQuery({
+            queryKey: key,
+            queryFn: async () => {
+              await sleep(5)
+              return 'test'
+            },
+            notifyOnChangeProps: () => ['data'],
+          })
+
+          states.push(state)
+
+          return (
+            <>
+              <button
+                onClick={async () => {
+                  await state.refetch()
+                }}
+              >
+                refetch
+              </button>
+
+              <div>{state.data}</div>
+            </>
+          )
+        }
+
+        const rendered = renderWithClient(queryClient, <Page />)
+
+        await waitFor(() => {
+          rendered.getByText('test')
+        })
+
+        fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+
+        // sleep is required to make sure no additional renders happen after click
+        await sleep(20)
+
+        expect(states.length).toBe(2)
+        expect(states[0]).toMatchObject({
+          data: undefined,
+          status: 'pending',
+          isFetching: true,
+        })
+        expect(states[1]).toMatchObject({
+          data: 'test',
+          status: 'success',
+          isFetching: false,
+        })
+      })
+
+      it('should not re-render when change props are not actively being tracked', async () => {
+        const key = queryKey()
+        const states: UseQueryResult<string>[] = []
 
-    expect(states.length).toBe(3)
-    expect(states[0]).toMatchObject({ isStale: true })
-    expect(states[1]).toMatchObject({ isStale: false })
-    expect(states[2]).toMatchObject({ isStale: true })
-  })
+        function Page() {
+          const fetchCounterRef = React.useRef(0)
+          const trackChangesRef = React.useRef(true)
 
-  it('should not re-render when it should only re-render on data changes and the data did not change', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+          const notifyOnChangeProps = React.useCallback(() => {
+            return trackChangesRef.current ? 'all' : []
+          }, [])
 
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(5)
-          return 'test'
-        },
+          const state = useQuery({
+            queryKey: key,
+            queryFn: async () => {
+              await sleep(5)
+              fetchCounterRef.current++
+              return `fetch counter: ${fetchCounterRef.current}`
+            },
+            notifyOnChangeProps,
+          })
 
-        notifyOnChangeProps: ['data'],
-      })
+          states.push(state)
 
-      states.push(state)
+          return (
+            <>
+              <button
+                onClick={async () => {
+                  await state.refetch()
+                }}
+              >
+                refetch
+              </button>
+              <button
+                onClick={() => {
+                  trackChangesRef.current = true
+                }}
+              >
+                enableTracking
+              </button>
+              <button
+                onClick={() => {
+                  trackChangesRef.current = false
+                }}
+              >
+                disableTracking
+              </button>
+
+              <div>{state.data}</div>
+            </>
+          )
+        }
 
-      return (
-        <>
-          <button
-            onClick={async () => {
-              await state.refetch()
-            }}
-          >
-            refetch
-          </button>
+        const rendered = renderWithClient(queryClient, <Page />)
+        await waitFor(() => {
+          rendered.getByText('fetch counter: 1')
+        })
 
-          <div>{state.data}</div>
-        </>
-      )
-    }
+        expect(states.length).toBe(2)
+        expect(states[0]).toMatchObject({
+          data: undefined,
+          isFetching: true,
+          status: 'pending',
+        })
+        expect(states[1]).toMatchObject({
+          data: 'fetch counter: 1',
+          status: 'success',
+          isFetching: false,
+        })
 
-    const rendered = renderWithClient(queryClient, <Page />)
+        // disable tracking and refetch to check for re-renders
+        fireEvent.click(
+          rendered.getByRole('button', { name: 'disableTracking' }),
+        )
+        fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
 
-    await waitFor(() => {
-      rendered.getByText('test')
-    })
+        // sleep is required to make sure no additional renders happen after click
+        await sleep(20)
+        // still expect to only have two re-renders from the initial fetch
+        expect(states.length).toBe(2)
 
-    fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+        // enable tracking and refetch to check for re-renders
+        fireEvent.click(
+          rendered.getByRole('button', { name: 'enableTracking' }),
+        )
+        fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
 
-    // sleep is required to make sure no additional renders happen after click
-    await sleep(20)
+        // sleep is required to make sure no additional renders happen after click
+        await sleep(20)
 
-    expect(states.length).toBe(2)
-    expect(states[0]).toMatchObject({
-      data: undefined,
-      status: 'pending',
-      isFetching: true,
-    })
-    expect(states[1]).toMatchObject({
-      data: 'test',
-      status: 'success',
-      isFetching: false,
+        expect(states.length).toBe(4)
+        expect(states[2]).toMatchObject({
+          data: 'fetch counter: 2',
+          status: 'success',
+          isFetching: true,
+        })
+        expect(states[3]).toMatchObject({
+          data: 'fetch counter: 3',
+          status: 'success',
+          isFetching: false,
+        })
+      })
     })
   })
 
@@ -2434,53 +2522,6 @@ describe('useQuery', () => {
     expect(renders).toBe(2)
   })
 
-  it('should batch re-renders including hook callbacks', async () => {
-    const key = queryKey()
-
-    let renders = 0
-    let callbackCount = 0
-
-    const queryFn = async () => {
-      await sleep(10)
-      return 'data'
-    }
-
-    function Page() {
-      const [count, setCount] = React.useState(0)
-      useQuery({
-        queryKey: key,
-        queryFn,
-        onSuccess: () => {
-          setCount((x) => x + 1)
-        },
-      })
-      useQuery({
-        queryKey: key,
-        queryFn,
-        onSuccess: () => {
-          setCount((x) => x + 1)
-        },
-      })
-
-      React.useEffect(() => {
-        renders++
-        callbackCount = count
-      })
-
-      return <div>count: {count}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => rendered.getByText('count: 2'))
-
-    // Should be 3 instead of 5
-    expect(renders).toBe(3)
-
-    // Both callbacks should have been executed
-    expect(callbackCount).toBe(2)
-  })
-
   it('should render latest data even if react has discarded certain renders', async () => {
     const key = queryKey()
 
@@ -2557,33 +2598,6 @@ describe('useQuery', () => {
     rendered.getByText('status: pending')
   })
 
-  // See https://github.com/tannerlinsley/react-query/issues/147
-  it('should not pass stringified variables to query function', async () => {
-    const key = queryKey()
-    const variables = { number: 5, boolean: false, object: {}, array: [] }
-    type CustomQueryKey = [typeof key, typeof variables]
-    const states: UseQueryResult<CustomQueryKey>[] = []
-
-    const queryFn = async (ctx: QueryFunctionContext<CustomQueryKey>) => {
-      await sleep(10)
-      return ctx.queryKey
-    }
-
-    function Page() {
-      const state = useQuery({ queryKey: [key, variables], queryFn })
-      states.push(state)
-      return <div>{state.status}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('success')
-    })
-
-    expect(states[1]?.data).toEqual([key, variables])
-  })
-
   it('should not refetch query on focus when `enabled` is set to `false`', async () => {
     const key = queryKey()
     const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
@@ -2723,24 +2737,24 @@ describe('useQuery', () => {
         refetchOnWindowFocus: 'always',
       })
       states.push(state)
-      return null
+      return (
+        <div>
+          <div>
+            data: {state.data}, isFetching: {String(state.isFetching)}
+          </div>
+        </div>
+      )
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(20)
+    await waitFor(() => rendered.getByText('data: 0, isFetching: false'))
 
     act(() => {
       window.dispatchEvent(new Event('visibilitychange'))
     })
 
-    await sleep(20)
-
-    await waitFor(() => expect(states.length).toBe(4))
-    expect(states[0]).toMatchObject({ data: undefined, isFetching: true })
-    expect(states[1]).toMatchObject({ data: 0, isFetching: false })
-    expect(states[2]).toMatchObject({ data: 0, isFetching: true })
-    expect(states[3]).toMatchObject({ data: 1, isFetching: false })
+    await waitFor(() => rendered.getByText('data: 1, isFetching: false'))
   })
 
   it('should calculate focus behaviour for `refetchOnWindowFocus` depending on function', async () => {
@@ -2896,7 +2910,7 @@ describe('useQuery', () => {
     await waitFor(() => rendered.getByText('Error test jaylen'))
   })
 
-  it('should throw error if queryFn throws and throwErrors is in use', async () => {
+  it('should throw error if queryFn throws and throwOnError is in use', async () => {
     const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
@@ -2907,7 +2921,7 @@ describe('useQuery', () => {
         queryKey: key,
         queryFn: () => Promise.reject(new Error('Error test jaylen')),
         retry: false,
-        throwErrors: true,
+        throwOnError: true,
       })
 
       return (
@@ -2929,7 +2943,7 @@ describe('useQuery', () => {
     consoleMock.mockRestore()
   })
 
-  it('should update with data if we observe no properties and throwErrors', async () => {
+  it('should update with data if we observe no properties and throwOnError', async () => {
     const key = queryKey()
 
     let result: UseQueryResult<string> | undefined
@@ -2938,7 +2952,7 @@ describe('useQuery', () => {
       const query = useQuery({
         queryKey: key,
         queryFn: () => Promise.resolve('data'),
-        throwErrors: true,
+        throwOnError: true,
       })
 
       React.useEffect(() => {
@@ -2966,7 +2980,7 @@ describe('useQuery', () => {
         queryFn: () => Promise.reject(new Error('Local Error')),
 
         retry: false,
-        throwErrors: (err) => err.message !== 'Local Error',
+        throwOnError: (err) => err.message !== 'Local Error',
       })
 
       return (
@@ -3001,7 +3015,7 @@ describe('useQuery', () => {
         queryFn: () => Promise.reject(new Error('Remote Error')),
 
         retry: false,
-        throwErrors: (err) => err.message !== 'Local Error',
+        throwOnError: (err) => err.message !== 'Local Error',
       })
 
       return (
@@ -3758,6 +3772,7 @@ describe('useQuery', () => {
           })
           act(() => setPrefetched(true))
         }
+
         prefetch()
       }, [])
 
@@ -5200,7 +5215,7 @@ describe('useQuery', () => {
 
   describe('networkMode online', () => {
     it('online queries should not start fetching if you are offline', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       const states: Array<any> = []
@@ -5229,10 +5244,11 @@ describe('useQuery', () => {
       }
 
       const rendered = renderWithClient(queryClient, <Page />)
+      window.dispatchEvent(new Event('offline'))
 
       await waitFor(() => rendered.getByText('status: pending, isPaused: true'))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5243,8 +5259,6 @@ describe('useQuery', () => {
       })
 
       expect(states).toEqual(['paused', 'fetching', 'idle'])
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not refetch if you are offline', async () => {
@@ -5282,7 +5296,9 @@ describe('useQuery', () => {
 
       await waitFor(() => rendered.getByText('data: data1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
+      window.dispatchEvent(new Event('offline'))
+
       fireEvent.click(rendered.getByRole('button', { name: /invalidate/i }))
 
       await waitFor(() =>
@@ -5292,7 +5308,7 @@ describe('useQuery', () => {
       )
       await waitFor(() => rendered.getByText('failureReason: null'))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5311,8 +5327,6 @@ describe('useQuery', () => {
       await waitFor(() => {
         expect(rendered.getByText('data: data2')).toBeInTheDocument()
       })
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not refetch if you are offline and refocus', async () => {
@@ -5348,7 +5362,7 @@ describe('useQuery', () => {
 
       await waitFor(() => rendered.getByText('data: data1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
       fireEvent.click(rendered.getByRole('button', { name: /invalidate/i }))
 
       await waitFor(() =>
@@ -5394,7 +5408,7 @@ describe('useQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const rendered = renderWithClient(queryClient, <Page />)
 
@@ -5445,7 +5459,7 @@ describe('useQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const rendered = renderWithClient(queryClient, <Page />)
 
@@ -5499,9 +5513,10 @@ describe('useQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const rendered = renderWithClient(queryClient, <Page />)
+      window.dispatchEvent(new Event('offline'))
 
       await waitFor(() =>
         rendered.getByText('status: success, fetchStatus: paused'),
@@ -5524,7 +5539,7 @@ describe('useQuery', () => {
         window.dispatchEvent(new Event('visibilitychange'))
       })
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       act(() => {
         window.dispatchEvent(new Event('online'))
       })
@@ -5537,7 +5552,6 @@ describe('useQuery', () => {
       })
 
       expect(count).toBe(1)
-      onlineMock.mockRestore()
     })
 
     it('online queries should pause retries if you are offline', async () => {
@@ -5570,13 +5584,11 @@ describe('useQuery', () => {
       const rendered = renderWithClient(queryClient, <Page />)
 
       await waitFor(() =>
-        rendered.getByText(
-          'status: pending, fetchStatus: fetching, failureCount: 1',
-        ),
+        rendered.getByText(/status: pending, fetchStatus: fetching/i),
       )
-      await waitFor(() => rendered.getByText('failureReason: failed1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
+      window.dispatchEvent(new Event('offline'))
 
       await sleep(20)
 
@@ -5637,17 +5649,19 @@ describe('useQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const rendered = renderWithClient(queryClient, <Page />)
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() =>
         rendered.getByText('status: pending, fetchStatus: paused'),
       )
 
       fireEvent.click(rendered.getByRole('button', { name: /hide/i }))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() => {
@@ -5660,8 +5674,6 @@ describe('useQuery', () => {
       // give it a bit more time to make sure queryFn is not called again
       await sleep(15)
       expect(count).toBe(1)
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not fetch if paused and we go online when cancelled and no refetchOnReconnect', async () => {
@@ -5694,7 +5706,7 @@ describe('useQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const rendered = renderWithClient(queryClient, <Page />)
 
@@ -5770,7 +5782,7 @@ describe('useQuery', () => {
         rendered.getByText('status: success, fetchStatus: idle'),
       )
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       fireEvent.click(rendered.getByRole('button', { name: /invalidate/i }))
 
@@ -5800,7 +5812,7 @@ describe('useQuery', () => {
 
   describe('networkMode always', () => {
     it('always queries should start fetching even if you are offline', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       let count = 0
@@ -5840,7 +5852,7 @@ describe('useQuery', () => {
     })
 
     it('always queries should not pause retries', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       let count = 0
@@ -5886,7 +5898,7 @@ describe('useQuery', () => {
 
   describe('networkMode offlineFirst', () => {
     it('offlineFirst queries should start fetching if you are offline, but pause retries', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       let count = 0
@@ -5917,6 +5929,8 @@ describe('useQuery', () => {
 
       const rendered = renderWithClient(queryClient, <Page />)
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() =>
         rendered.getByText(
           'status: pending, fetchStatus: paused, failureCount: 1',
@@ -5926,7 +5940,7 @@ describe('useQuery', () => {
 
       expect(count).toBe(1)
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5935,8 +5949,6 @@ describe('useQuery', () => {
       await waitFor(() => rendered.getByText('failureReason: failed3'))
 
       expect(count).toBe(3)
-
-      onlineMock.mockRestore()
     })
   })
 
@@ -5973,36 +5985,6 @@ describe('useQuery', () => {
     })
   })
 
-  it('setQueryData - should not call onSuccess callback of active observers', async () => {
-    const key = queryKey()
-    const onSuccess = vi.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: () => 'data',
-        onSuccess,
-      })
-      return (
-        <div>
-          <div>data: {state.data}</div>
-          <button onClick={() => queryClient.setQueryData(key, 'newData')}>
-            setQueryData
-          </button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => rendered.getByText('data: data'))
-    fireEvent.click(rendered.getByRole('button', { name: /setQueryData/i }))
-    await waitFor(() => rendered.getByText('data: newData'))
-
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
   it('setQueryData - should respect updatedAt', async () => {
     const key = queryKey()
 
@@ -6054,6 +6036,7 @@ describe('useQuery', () => {
         </div>
       )
     }
+
     const rendered = renderWithClient(queryClient, <Page />)
     const fetchBtn = rendered.getByRole('button', { name: 'refetch' })
     await waitFor(() => rendered.getByText('data: 1'))
@@ -6085,4 +6068,161 @@ describe('useQuery', () => {
 
     await waitFor(() => rendered.getByText('data: custom client'))
   })
+
+  it('should be notified of updates between create and subscribe', async () => {
+    const key = queryKey()
+
+    function Page() {
+      const mounted = React.useRef<boolean>(false)
+      const { data, status } = useQuery({
+        enabled: false,
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 5
+        },
+      })
+
+      // this simulates a synchronous update between the time the query is created
+      // and the time it is subscribed to that could be missed otherwise
+      if (!mounted.current) {
+        mounted.current = true
+        queryClient.setQueryData(key, 1)
+      }
+
+      return (
+        <div>
+          <span>status: {status}</span>
+          <span>data: {data}</span>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+    await waitFor(() => rendered.getByText('status: success'))
+    await waitFor(() => rendered.getByText('data: 1'))
+  })
+  it('should reuse same data object reference when queryKey changes back to some cached data', async () => {
+    const key = queryKey()
+    const spy = vi.fn()
+
+    async function fetchNumber(id: number) {
+      await sleep(5)
+      return { numbers: { current: { id } } }
+    }
+    function Test() {
+      const [id, setId] = React.useState(1)
+
+      const { data } = useQuery({
+        select: selector,
+        queryKey: [key, 'user', id],
+        queryFn: () => fetchNumber(id),
+      })
+
+      React.useEffect(() => {
+        spy(data)
+      }, [data])
+
+      return (
+        <div>
+          <button name="1" onClick={() => setId(1)}>
+            1
+          </button>
+          <button name="2" onClick={() => setId(2)}>
+            2
+          </button>
+          <span>Rendered Id: {data?.id}</span>
+        </div>
+      )
+    }
+
+    function selector(data: any) {
+      return data.numbers.current
+    }
+
+    const rendered = renderWithClient(queryClient, <Test />)
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    await waitFor(() => rendered.getByText('Rendered Id: 1'))
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /2/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 2'))
+    expect(spy).toHaveBeenCalledTimes(2) // called with undefined because id changed
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /1/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 1'))
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /2/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 2'))
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+  it('should reuse same data object reference when queryKey changes and placeholderData is present', async () => {
+    const key = queryKey()
+    const spy = vi.fn()
+
+    async function fetchNumber(id: number) {
+      await sleep(5)
+      return { numbers: { current: { id } } }
+    }
+    function Test() {
+      const [id, setId] = React.useState(1)
+
+      const { data } = useQuery({
+        select: selector,
+        queryKey: [key, 'user', id],
+        queryFn: () => fetchNumber(id),
+        placeholderData: { numbers: { current: { id: 99 } } },
+      })
+
+      React.useEffect(() => {
+        spy(data)
+      }, [data])
+
+      return (
+        <div>
+          <button name="1" onClick={() => setId(1)}>
+            1
+          </button>
+          <button name="2" onClick={() => setId(2)}>
+            2
+          </button>
+          <span>Rendered Id: {data?.id}</span>
+        </div>
+      )
+    }
+
+    function selector(data: any) {
+      return data.numbers.current
+    }
+
+    const rendered = renderWithClient(queryClient, <Test />)
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    await waitFor(() => rendered.getByText('Rendered Id: 99'))
+    await waitFor(() => rendered.getByText('Rendered Id: 1'))
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /2/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 99'))
+    await waitFor(() => rendered.getByText('Rendered Id: 2'))
+    expect(spy).toHaveBeenCalledTimes(2) // called with undefined because id changed
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /1/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 1'))
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /2/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 2'))
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
 })