Merge branch 'alpha' into alpha/fix-5538

Author: TkDodo

docs/react/reference/QueryClient.md

@@ -527,7 +527,7 @@ function Component() {
 
 **Options**
 
-- `mutationKey: string | unknown[]`
+- `mutationKey: unknown[]`
 - `options: MutationOptions`
 
 > Similar to [`setQueryDefaults`](#queryclientsetquerydefaults), the order of registration does matter here.

docs/react/reference/useMutation.md

@@ -51,7 +51,7 @@ mutate(variables, {
 - `gcTime: number | Infinity`
   - The time in milliseconds that unused/inactive cache data remains in memory. When a mutation's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different cache times are specified, the longest one will be used.
   - If set to `Infinity`, will disable garbage collection
-- `mutationKey: string`
+- `mutationKey: unknown[]`
   - Optional
   - A mutation key can be set to inherit defaults set with `queryClient.setMutationDefaults` or to identify the mutation in the devtools.
 - `networkMode: 'online' | 'always' | 'offlineFirst`

examples/react/react-native/src/hooks/useAppState.ts

@@ -3,9 +3,9 @@ import { AppState, AppStateStatus } from 'react-native'
 
 export function useAppState(onChange: (status: AppStateStatus) => void) {
   useEffect(() => {
-    AppState.addEventListener('change', onChange)
+    const subscription = AppState.addEventListener('change', onChange)
     return () => {
-      AppState.removeEventListener('change', onChange)
+      subscription.remove()
     }
   }, [onChange])
 }

packages/query-async-storage-persister/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-async-storage-persister",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.70",
   "description": "A persister for asynchronous storages, to be used with TanStack/Query",
   "author": "tannerlinsley",
   "license": "MIT",

packages/query-broadcast-client-experimental/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-broadcast-client-experimental",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.70",
   "description": "An experimental plugin to for broadcasting the state of your queryClient between browser tabs/windows",
   "author": "tannerlinsley",
   "license": "MIT",

packages/query-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-core",
-  "version": "5.0.0-alpha.66",
+  "version": "5.0.0-alpha.70",
   "description": "The framework agnostic core that powers TanStack Query",
   "author": "tannerlinsley",
   "license": "MIT",

packages/query-core/src/index.ts

@@ -2,6 +2,7 @@
 
 export { CancelledError } from './retryer'
 export { QueryCache } from './queryCache'
+export type { QueryCacheNotifyEvent } from './queryCache'
 export { QueryClient } from './queryClient'
 export { QueryObserver } from './queryObserver'
 export { QueriesObserver } from './queriesObserver'

packages/query-core/src/infiniteQueryBehavior.ts

@@ -39,7 +39,10 @@ export function infiniteQueryBehavior<TQueryFnData, TError, TData>(
         // Get query function
         const queryFn =
           context.options.queryFn ||
-          (() => Promise.reject(new Error('Missing queryFn')))
+          (() =>
+            Promise.reject(
+              new Error(`Missing queryFn: '${context.options.queryHash}'`),
+            ))
 
         // Create function to fetch a page
         const fetchPage = async (

packages/query-core/src/notifyManager.ts

@@ -8,6 +8,8 @@ type NotifyFunction = (callback: () => void) => void
 
 type BatchNotifyFunction = (callback: () => void) => void
 
+type BatchCallsCallback<T extends unknown[]> = (...args: T) => void
+
 export function createNotifyManager() {
   let queue: NotifyCallback[] = []
   let transactions = 0
@@ -45,12 +47,14 @@ export function createNotifyManager() {
   /**
    * All calls to the wrapped function will be batched.
    */
-  const batchCalls = <T extends Function>(callback: T): T => {
-    return ((...args: any[]) => {
+  const batchCalls = <T extends unknown[]>(
+    callback: BatchCallsCallback<T>,
+  ): BatchCallsCallback<T> => {
+    return (...args) => {
       schedule(() => {
         callback(...args)
       })
-    }) as any
+    }
   }
 
   const flush = (): void => {

packages/query-core/src/query.ts

@@ -387,7 +387,9 @@ export class Query<
     // Create fetch function
     const fetchFn = () => {
       if (!this.options.queryFn) {
-        return Promise.reject(new Error('Missing queryFn'))
+        return Promise.reject(
+          new Error(`Missing queryFn: '${this.options.queryHash}'`),
+        )
       }
       this.#abortSignalConsumed = false
       return this.options.queryFn(

packages/query-core/src/queryCache.ts

@@ -68,7 +68,7 @@ interface NotifyEventQueryObserverOptionsUpdated extends NotifyEvent {
   observer: QueryObserver<any, any, any, any, any>
 }
 
-type QueryCacheNotifyEvent =
+export type QueryCacheNotifyEvent =
   | NotifyEventQueryAdded
   | NotifyEventQueryRemoved
   | NotifyEventQueryUpdated

packages/query-core/src/tests/infiniteQueryBehavior.test.tsx

@@ -1,14 +1,16 @@
 import { waitFor } from '@testing-library/react'
-import type { QueryClient, InfiniteQueryObserverResult } from '..'
+import type { QueryClient, QueryCache, InfiniteQueryObserverResult } from '..'
 import { InfiniteQueryObserver, CancelledError } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
 import { vi } from 'vitest'
 
 describe('InfiniteQueryBehavior', () => {
   let queryClient: QueryClient
+  let queryCache: QueryCache
 
   beforeEach(() => {
     queryClient = createQueryClient()
+    queryCache = queryClient.getQueryCache()
     queryClient.mount()
   })
 
@@ -35,9 +37,10 @@ describe('InfiniteQueryBehavior', () => {
     })
 
     await waitFor(() => {
+      const query = queryCache.find({ queryKey: key })!
       return expect(observerResult).toMatchObject({
         isError: true,
-        error: new Error('Missing queryFn'),
+        error: new Error(`Missing queryFn: '${query.queryHash}'`),
       })
     })
 

packages/query-core/src/tests/notifyManager.test.tsx

@@ -49,4 +49,19 @@ describe('notifyManager', () => {
 
     expect(notifySpy).toHaveBeenCalledTimes(1)
   })
+
+  it('typedefs should catch proper signatures', async () => {
+    const notifyManagerTest = createNotifyManager()
+
+    // we define some fn with its signature:
+    const fn: (a: string, b: number) => string = (a, b) => a + b
+
+    //now somefn expect to be called with args [a: string, b: number]
+    const someFn = notifyManagerTest.batchCalls(fn)
+
+    someFn('im happy', 4)
+
+    //@ts-expect-error
+    someFn('im not happy', false)
+  })
 })

packages/query-core/src/tests/query.test.tsx

@@ -761,10 +761,12 @@ describe('query', () => {
     })
 
     const unsubscribe = observer.subscribe(() => undefined)
+
     await sleep(10)
+    const query = queryCache.find({ queryKey: key })!
     expect(observer.getCurrentResult()).toMatchObject({
       status: 'error',
-      error: new Error('Missing queryFn'),
+      error: new Error(`Missing queryFn: '${query.queryHash}'`),
     })
     unsubscribe()
   })

packages/query-persist-client-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-persist-client-core",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.70",
   "description": "Set of utilities for interacting with persisters, which can save your queryClient for later use",
   "author": "tannerlinsley",
   "license": "MIT",

packages/query-sync-storage-persister/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-sync-storage-persister",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.70",
   "description": "A persister for synchronous storages, to be used with TanStack/Query",
   "author": "tannerlinsley",
   "license": "MIT",

packages/react-query-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.70",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",

packages/react-query-persist-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-persist-client",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.70",
   "description": "React bindings to work with persisters in TanStack/react-query",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -40,7 +40,8 @@
     "build:types": "tsc --emitDeclarationOnly"
   },
   "dependencies": {
-    "@tanstack/query-persist-client-core": "workspace:*"
+    "@tanstack/query-persist-client-core": "workspace:*",
+    "client-only": "0.0.1"
   },
   "devDependencies": {
     "@tanstack/react-query": "workspace:*",

packages/react-query-persist-client/src/PersistQueryClientProvider.tsx

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 
 import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'

packages/react-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.70",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -45,7 +45,8 @@
     "!build/codemods/**/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-core": "workspace:*"
+    "@tanstack/query-core": "workspace:*",
+    "client-only": "0.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.4",

packages/react-query/src/QueryClientProvider.tsx

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 
 import type { QueryClient } from '@tanstack/query-core'

packages/react-query/src/useBaseQuery.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 
 import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'

packages/react-query/src/useInfiniteQuery.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import type {
   QueryObserver,
   QueryKey,

packages/react-query/src/useIsFetching.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 import type { QueryClient, QueryFilters } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'

packages/react-query/src/useMutation.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 import type { QueryClient, DefaultError } from '@tanstack/query-core'
 import { notifyManager, MutationObserver } from '@tanstack/query-core'

packages/react-query/src/useMutationState.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 
 import type {

packages/react-query/src/useQueries.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import * as React from 'react'
 
 import type {

packages/react-query/src/useQuery.ts

@@ -1,4 +1,4 @@
-'use client'
+import 'client-only'
 import type { QueryClient, QueryKey, DefaultError } from '@tanstack/query-core'
 import { QueryObserver } from '@tanstack/query-core'
 import type {

packages/solid-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "5.0.0-alpha.69",
+  "version": "5.0.0-alpha.70",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",

packages/svelte-query-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-query-devtools",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.70",
   "description": "Developer tools to interact with and visualize the TanStack/svelte-query cache",
   "author": "Lachlan Collins",
   "license": "MIT",

packages/svelte-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-query",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.70",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Svelte",
   "author": "Lachlan Collins",
   "license": "MIT",

packages/vue-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-query",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.70",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in Vue",
   "author": "Damian Osipiuk",
   "license": "MIT",