Merge branch 'alpha' into feature/devtools-iconbuttons

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.71",
   "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.71",
   "description": "React bindings to work with persisters in TanStack/react-query",
   "author": "tannerlinsley",
   "license": "MIT",

packages/react-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.71",
   "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/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.71",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in Vue",
   "author": "Damian Osipiuk",
   "license": "MIT",
@@ -42,6 +42,15 @@
     "build:rollup": "rollup --config rollup.config.js",
     "build:types": "tsc --emitDeclarationOnly"
   },
+  "nx": {
+    "targets": {
+      "test:lib": {
+        "dependsOn": [
+          "test:types"
+        ]
+      }
+    }
+  },
   "files": [
     "build/lib/*",
     "src"

packages/vue-query/src/useBaseQuery.ts

@@ -14,9 +14,8 @@ import type {
   QueryObserverResult,
   DefaultedQueryObserverOptions,
 } from '@tanstack/query-core'
-import { isServer } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient'
-import { updateState, cloneDeepUnref, noop } from './utils'
+import { updateState, cloneDeepUnref } from './utils'
 import type { QueryClient } from './queryClient'
 import type { UseQueryOptions } from './useQuery'
 import type { UseInfiniteQueryOptions } from './useInfiniteQuery'
@@ -87,20 +86,19 @@ export function useBaseQuery<
   const observer = new Observer(client, defaultedOptions.value)
   const state = reactive(observer.getCurrentResult())
 
-  const unsubscribe = ref(noop)
+  const unsubscribe = ref(() => {
+    // noop
+  })
 
   watch(
     client.isRestoring,
     (isRestoring) => {
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (!isRestoring) {
         unsubscribe.value()
-        // Nuxt2 memory leak fix - do not subscribe on server
-        if (!isServer) {
-          unsubscribe.value = observer.subscribe((result) => {
-            updateState(state, result)
-          })
-        }
+        unsubscribe.value = observer.subscribe((result) => {
+          updateState(state, result)
+        })
       }
     },
     { immediate: true },
@@ -121,7 +119,9 @@ export function useBaseQuery<
 
   const suspense = () => {
     return new Promise<QueryObserverResult<TData, TError>>((resolve) => {
-      let stopWatch = noop
+      let stopWatch = () => {
+        //noop
+      }
       const run = () => {
         if (defaultedOptions.value.enabled !== false) {
           const optimisticResult = observer.getOptimisticResult(

packages/vue-query/src/useIsFetching.ts

@@ -1,9 +1,8 @@
 import { computed, onScopeDispose, ref, watch } from 'vue-demi'
 import type { Ref } from 'vue-demi'
 import type { QueryFilters as QF } from '@tanstack/query-core'
-import { isServer } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient'
-import { cloneDeepUnref, noop } from './utils'
+import { cloneDeepUnref } from './utils'
 import type { MaybeRefDeep } from './types'
 import type { QueryClient } from './queryClient'
 
@@ -18,12 +17,9 @@ export function useIsFetching(
 
   const isFetching = ref(client.isFetching(filters))
 
-  // Nuxt2 memory leak fix - do not subscribe on server
-  const unsubscribe = isServer
-    ? noop
-    : client.getQueryCache().subscribe(() => {
-        isFetching.value = client.isFetching(filters)
-      })
+  const unsubscribe = client.getQueryCache().subscribe(() => {
+    isFetching.value = client.isFetching(filters)
+  })
 
   watch(
     filters,

packages/vue-query/src/useMutation.ts

@@ -14,10 +14,9 @@ import type {
   MutationObserverOptions,
   DefaultError,
 } from '@tanstack/query-core'
-import { isServer } from '@tanstack/query-core'
 import type { MaybeRefDeep, DistributiveOmit } from './types'
 import { MutationObserver } from '@tanstack/query-core'
-import { cloneDeepUnref, updateState, noop } from './utils'
+import { cloneDeepUnref, updateState } from './utils'
 import { useQueryClient } from './useQueryClient'
 import type { QueryClient } from './queryClient'
 
@@ -72,12 +71,9 @@ export function useMutation<
   const observer = new MutationObserver(client, options.value)
   const state = reactive(observer.getCurrentResult())
 
-  // Nuxt2 memory leak fix - do not subscribe on server
-  const unsubscribe = isServer
-    ? noop
-    : observer.subscribe((result) => {
-        updateState(state, result)
-      })
+  const unsubscribe = observer.subscribe((result) => {
+    updateState(state, result)
+  })
 
   const mutate = (
     variables: TVariables,