TanStack · Jun 26, 2024 · Jun 26, 2024 · Jun 26, 2024 · Jun 26, 2024 · Jun 26, 2024
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,5 +1,4 @@
 {
-  "installCommand": "install:csb",
   "buildCommand": "build:csb",
   "sandboxes": [
     "/examples/angular/basic",
@@ -9,5 +8,5 @@
     "/examples/vue/basic"
   ],
   "packages": ["packages/**"],
-  "node": "18"
+  "node": "20"
 }
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md
@@ -432,24 +432,23 @@ export default function Posts() {
 
 > Note that you could also `useQuery` instead of `useSuspenseQuery`, and the Promise would still be picked up correctly. However, NextJs won't suspend in that case and the component will render in the `pending` status, which also opts out of server rendering the content.
 
-If you're using non-JSON data types and serialize the query results on the server, you can specify the `hydrate.transformPromise` option to deserialize the data on the client after the promise is resolved, before the data is put into the cache:
+If you're using non-JSON data types and serialize the query results on the server, you can specify the `dehydrate.serializeData` and `hydrate.deserializeData` options to serialize and deserialize the data on each side of the boundary to ensure the data in the cache is the same format both on the server and the client:
 
 ```tsx
 // app/get-query-client.ts
 import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query'
-import { deserialize } from './transformer'
+import { deserialize, serialize } from './transformer'
 
 export function makeQueryClient() {
   return new QueryClient({
     defaultOptions: {
+      // ...
       hydrate: {
-        /**
-         * Called when the query is rebuilt from a prefetched
-         * promise, before the query data is put into the cache.
-         */
-        transformPromise: (promise) => promise.then(deserialize),
+        deserializeData: deserialize,
+      },
+      dehydrate: {
+        serializeData: serialize,
       },
-      // ...
     },
   })
 }
@@ -471,7 +470,7 @@ export default function PostsPage() {
   // look ma, no await
   queryClient.prefetchQuery({
     queryKey: ['posts'],
-    queryFn: () => getPosts().then(serialize), // <-- serilize the data on the server
+    queryFn: () => getPosts().then(serialize), // <-- serialize the data on the server
   })
 
   return (

diff --git a/docs/framework/react/reference/hydration.md b/docs/framework/react/reference/hydration.md
@@ -37,6 +37,7 @@ const dehydratedState = dehydrate(queryClient, {
       - Return `true` to include this query in dehydration, or `false` otherwise
     - Defaults to only including successful queries
     - If you would like to extend the function while retaining the default behavior, import and execute `defaultShouldDehydrateQuery` as part of the return statement
+  - `serializeData?: (data: any) => any` A function to transform (serialize) data during dehydration.
 
 **Returns**
 
@@ -83,6 +84,7 @@ hydrate(queryClient, dehydratedState, options)
     - Optional
     - `mutations: MutationOptions` The default mutation options to use for the hydrated mutations.
     - `queries: QueryOptions` The default query options to use for the hydrated queries.
+    - `deserializeData?: (data: any) => any` A function to transform (deserialize) data before it is put into the cache.
   - `queryClient?: QueryClient`,
     - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
 

diff --git a/docs/framework/react/reference/usePrefetchInfiniteQuery.md b/docs/framework/react/reference/usePrefetchInfiniteQuery.md
@@ -4,7 +4,7 @@ title: usePrefetchInfiniteQuery
 ---
 
 ```tsx
-const result = usePrefetchInfiniteQuery(options)
+usePrefetchInfiniteQuery(options)
 ```
 
 **Options**

diff --git a/docs/framework/react/reference/usePrefetchQuery.md b/docs/framework/react/reference/usePrefetchQuery.md
@@ -4,7 +4,7 @@ title: usePrefetchQuery
 ---
 
 ```tsx
-const result = usePrefetchQuery(options)
+usePrefetchQuery(options)
 ```
 
 **Options**

diff --git a/docs/framework/react/reference/useSuspenseQuery.md b/docs/framework/react/reference/useSuspenseQuery.md
@@ -11,7 +11,6 @@ const result = useSuspenseQuery(options)
 
 The same as for [useQuery](../useQuery), except for:
 
-- `suspense`
 - `throwOnError`
 - `enabled`
 - `placeholderData`

diff --git a/docs/framework/vue/devtools.md b/docs/framework/vue/devtools.md
@@ -7,15 +7,10 @@ Wave your hands in the air and shout hooray because Vue Query comes with dedicat
 
 When you begin your Vue Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of Vue Query and will likely save you hours of debugging if you find yourself in a pinch!
 
-The only thing you need to do is to install the official **[Vue Devtools](https://devtools.vuejs.org/guide/installation.html)**.
-
-Vue Query will seamlessly integrate with the official devtools, adding custom inspector and timeline events.
-Devtool code will be treeshaken from production bundles by default.
-
 ## Component based Devtools (Vue 3)
 
-You can embeed devtools component into your page by using dedicated package.  
-Component based devtools are using the same framework-agnostic implementation, have more features and are updated more frequently.
+You can directly integrate the devtools component into your page using a dedicated package.
+Component-based devtools use a framework-agnostic implementation and are always up-to-date.
 
 The devtools component is a separate package that you need to install:
 
@@ -49,19 +44,34 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
 ### Options
 
 - `initialIsOpen: Boolean`
-  - Set this `true` if you want the dev tools to default to being open
+  - Set this `true` if you want the dev tools to default to being open.
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
-  - Defaults to `bottom-right`
-  - The position of the React Query logo to open and close the devtools panel
+  - Defaults to `bottom-right`.
+  - The position of the React Query logo to open and close the devtools panel.
 - `position?: "top" | "bottom" | "left" | "right"`
-  - Defaults to `bottom`
-  - The position of the React Query devtools panel
-- `client?: QueryClient`,
+  - Defaults to `bottom`.
+  - The position of the React Query devtools panel.
+- `client?: QueryClient`
   - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
 - `errorTypes?: { name: string; initializer: (query: Query) => TError}`
-  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+  - Use this to predefine some errors that can be triggered on your queries. The initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
 - `styleNonce?: string`
   - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
 - `shadowDOMTarget?: ShadowRoot`
   - Default behavior will apply the devtool's styles to the head tag within the DOM.
-  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instad of within the head tag in the light DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+
+## Traditional Devtools
+
+Vue Query will seamlessly integrate with the [Official Vue devtools](https://github.com/vuejs/devtools-next), adding custom inspector and timeline events.
+Devtool code will be treeshaken from production bundles by default.
+
+To make it work, you only need to enable it in the plugin options:
+
+```ts
+app.use(VueQueryPlugin, {
+  enableDevtoolsV6Plugin: true,
+})
+```
+
+Both v6 and v7 versions of devtools are supported.
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,43 @@
+// @ts-check
+
+// @ts-ignore Needed due to moduleResolution Node vs Bundler
+import { tanstackConfig } from '@tanstack/config/eslint'
+import pluginCspell from '@cspell/eslint-plugin'
+
+export default [
+  ...tanstackConfig,
+  {
+    name: 'tanstack/temp',
+    plugins: {
+      cspell: pluginCspell,
+    },
+    rules: {
+      'cspell/spellchecker': [
+        'warn',
+        {
+          cspell: {
+            words: [
+              'codemod', // We support our codemod
+              'extralight', // Our public interface
+              'jscodeshift',
+              'Promisable', // Our public interface
+              'retryer', // Our public interface
+              'solidjs', // Our target framework
+              'tabular-nums', // https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
+              'tanstack', // Our package scope
+              'todos', // Too general word to be caught as error
+              'TSES', // @typescript-eslint package's interface
+              'tsqd', // Our public interface (TanStack Query Devtools shorthand)
+              'tsup', // We use tsup as builder
+              'typecheck', // Field of vite.config.ts
+              'vue-demi', // dependency of @tanstack/vue-query
+            ],
+          },
+        },
+      ],
+      'ts/ban-types': 'off',
+      'ts/no-empty-function': 'off',
+      'no-case-declarations': 'off',
+    },
+  },
+]
diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json
@@ -14,7 +14,7 @@
     "@angular/core": "^17.3.10",
     "@angular/platform-browser": "^17.3.10",
     "@angular/platform-browser-dynamic": "^17.3.10",
-    "@tanstack/angular-query-experimental": "^5.48.0",
+    "@tanstack/angular-query-experimental": "^5.49.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.6"
@@ -23,7 +23,7 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.10",
-    "@tanstack/angular-query-devtools-experimental": "^5.48.0",
+    "@tanstack/angular-query-devtools-experimental": "^5.49.0",
     "typescript": "5.3.3"
   }
 }
diff --git a/examples/angular/infinite-query-with-max-pages/package.json b/examples/angular/infinite-query-with-max-pages/package.json
@@ -14,7 +14,7 @@
     "@angular/core": "^17.3.10",
     "@angular/platform-browser": "^17.3.10",
     "@angular/platform-browser-dynamic": "^17.3.10",
-    "@tanstack/angular-query-experimental": "^5.48.0",
+    "@tanstack/angular-query-experimental": "^5.49.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.6"
@@ -23,7 +23,7 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.10",
-    "@tanstack/angular-query-devtools-experimental": "^5.48.0",
+    "@tanstack/angular-query-devtools-experimental": "^5.49.0",
     "typescript": "5.3.3"
   }
 }
diff --git a/examples/angular/router/package.json b/examples/angular/router/package.json
@@ -15,7 +15,7 @@
     "@angular/platform-browser": "^17.3.10",
     "@angular/platform-browser-dynamic": "^17.3.10",
     "@angular/router": "^17.3.10",
-    "@tanstack/angular-query-experimental": "^5.48.0",
+    "@tanstack/angular-query-experimental": "^5.49.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.6"
@@ -24,7 +24,7 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.10",
-    "@tanstack/angular-query-devtools-experimental": "^5.48.0",
+    "@tanstack/angular-query-devtools-experimental": "^5.49.0",
     "typescript": "5.3.3"
   }
 }