From b58da75a6931d64b11a2bd4fb6c06deacb687349 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Wed, 10 Jul 2024 14:48:50 +1000
Subject: [PATCH] docs(examples): Modernise Next.js examples (#7706)

* docs(examples): Update react/auto-refetching

* Update infinite-query-with-max-pages, load-more-infinite-scroll

* Upgrade react/nextjs

* More projects

* Update playground

* Update prefetching

* Cleanup deps

* Disable typescript during next build

* Fix eslint plugin

* Final changes
---
 docs/config.json                              |   2 +-
 .../package.json                              |   4 +-
 examples/react/auto-refetching/next-env.d.ts  |   5 +
 examples/react/auto-refetching/next.config.js |   3 +
 examples/react/auto-refetching/package.json   |   6 +-
 .../src/pages/api/{data.js => data.ts}        |   7 +-
 .../src/pages/{index.js => index.tsx}         |  14 +-
 examples/react/auto-refetching/tsconfig.json  |  19 ++
 .../next-env.d.ts                             |   5 +
 .../next.config.js                            |   3 +
 .../package.json                              |   9 +-
 .../pages/api/{projects.js => projects.ts}    |   5 +-
 .../src/pages/{index.js => index.tsx}         |   2 +-
 .../tsconfig.json                             |  19 ++
 .../load-more-infinite-scroll/next-env.d.ts   |   5 +
 .../load-more-infinite-scroll/next.config.js  |   3 +
 .../load-more-infinite-scroll/package.json    |   6 +-
 .../src/pages/{about.js => about.tsx}         |   0
 .../pages/api/{projects.js => projects.ts}    |   5 +-
 .../src/pages/{index.js => index.tsx}         |  12 +-
 .../load-more-infinite-scroll/tsconfig.json   |  19 ++
 .../nextjs-app-prefetching/next.config.js     |   3 +
 .../react/nextjs-app-prefetching/package.json |   5 +-
 .../nextjs-suspense-streaming/next.config.js  |   3 +
 .../nextjs-suspense-streaming/package.json    |   4 +-
 examples/react/nextjs/next-env.d.ts           |   5 +
 examples/react/nextjs/next.config.js          |   3 +
 examples/react/nextjs/package.json            |   9 +-
 .../{Header/index.js => Header.tsx}           |   0
 .../{InfoBox/index.js => InfoBox.tsx}         |   2 +-
 .../{Layout/index.js => Layout.tsx}           |   2 +-
 .../{PostList/index.js => PostList.tsx}       |   7 +-
 .../src/components/{index.js => index.ts}     |   2 +-
 examples/react/nextjs/src/hooks/index.js      |   1 -
 .../hooks/{usePosts/index.js => usePosts.ts}  |  12 +-
 .../nextjs/src/pages/{_app.js => _app.tsx}    |   3 +-
 .../pages/{client-only.js => client-only.tsx} |   2 +-
 .../nextjs/src/pages/{index.js => index.tsx}  |   6 +-
 examples/react/nextjs/tsconfig.json           |  19 ++
 examples/react/offline/src/App.tsx            |   2 +-
 examples/react/offline/src/api.ts             |   1 +
 .../optimistic-updates-cache/next.config.js   |   3 +
 .../optimistic-updates-cache/package.json     |   2 -
 .../src/pages/api/{data.js => data.ts}        |  10 +-
 .../src/pages/index.tsx                       |  11 +-
 .../optimistic-updates-ui/next.config.js      |   3 +
 .../react/optimistic-updates-ui/package.json  |   2 -
 .../src/pages/api/{data.js => data.ts}        |  10 +-
 .../optimistic-updates-ui/src/pages/index.tsx |   5 +-
 examples/react/pagination/next-env.d.ts       |   5 +
 examples/react/pagination/next.config.js      |   3 +
 examples/react/pagination/package.json        |   6 +-
 .../pages/api/{projects.js => projects.ts}    |   5 +-
 .../src/pages/{index.js => index.tsx}         |  11 +-
 examples/react/pagination/tsconfig.json       |  19 ++
 examples/react/playground/index.html          |   2 +-
 examples/react/playground/package.json        |   1 +
 .../playground/src/{index.jsx => index.tsx}   |  51 +--
 examples/react/playground/tsconfig.json       |  24 ++
 examples/react/playground/vite.config.ts      |   6 +
 examples/react/prefetching/libs/fetch.js      |   6 -
 examples/react/prefetching/next-env.d.ts      |   5 +
 examples/react/prefetching/next.config.js     |   3 +
 examples/react/prefetching/package.json       |   6 +-
 .../pages/[user]/{[repo].js => [repo].tsx}    |  24 +-
 .../src/pages/{_app.js => _app.tsx}           |   3 +-
 .../react/prefetching/src/pages/api/data.js   |  26 --
 .../src/pages/{index.js => index.tsx}         |   6 +-
 examples/react/prefetching/tsconfig.json      |  19 ++
 examples/react/rick-morty/index.html          |   2 +-
 examples/react/rick-morty/package.json        |   1 +
 .../src/App.jsx => rick-morty/src/App.tsx}    |   4 +-
 .../rick-morty/src/{Layout.jsx => Layout.tsx} |   7 +-
 .../index.jsx => rick-morty/src/index.tsx}    |   4 +-
 examples/react/rick-morty/tsconfig.json       |  25 ++
 examples/react/rick-morty/vite.config.ts      |   6 +
 examples/react/shadow-dom/package.json        |   9 +-
 examples/react/star-wars/index.html           |   2 +-
 examples/react/star-wars/package.json         |   1 +
 .../src/App.jsx => star-wars/src/App.tsx}     |   8 +-
 .../star-wars/src/{Layout.jsx => Layout.tsx}  |   9 +-
 .../src/index.jsx => star-wars/src/index.tsx} |   4 +-
 examples/react/star-wars/tsconfig.json        |  25 ++
 examples/react/star-wars/vite.config.ts       |   6 +
 integrations/react-next-15/next.config.js     |   3 +
 integrations/react-next-15/package.json       |   5 +-
 integrations/react-next/next.config.js        |   3 +
 integrations/react-next/package.json          |   1 -
 pnpm-lock.yaml                                | 322 +++++++-----------
 89 files changed, 589 insertions(+), 379 deletions(-)
 create mode 100644 examples/react/auto-refetching/next-env.d.ts
 rename examples/react/auto-refetching/src/pages/api/{data.js => data.ts} (67%)
 rename examples/react/auto-refetching/src/pages/{index.js => index.tsx} (93%)
 create mode 100644 examples/react/auto-refetching/tsconfig.json
 create mode 100644 examples/react/infinite-query-with-max-pages/next-env.d.ts
 rename examples/react/infinite-query-with-max-pages/src/pages/api/{projects.js => projects.ts} (78%)
 rename examples/react/infinite-query-with-max-pages/src/pages/{index.js => index.tsx} (100%)
 create mode 100644 examples/react/infinite-query-with-max-pages/tsconfig.json
 create mode 100644 examples/react/load-more-infinite-scroll/next-env.d.ts
 rename examples/react/load-more-infinite-scroll/src/pages/{about.js => about.tsx} (100%)
 rename examples/react/load-more-infinite-scroll/src/pages/api/{projects.js => projects.ts} (78%)
 rename examples/react/load-more-infinite-scroll/src/pages/{index.js => index.tsx} (91%)
 create mode 100644 examples/react/load-more-infinite-scroll/tsconfig.json
 create mode 100644 examples/react/nextjs/next-env.d.ts
 rename examples/react/nextjs/src/components/{Header/index.js => Header.tsx} (100%)
 rename examples/react/nextjs/src/components/{InfoBox/index.js => InfoBox.tsx} (83%)
 rename examples/react/nextjs/src/components/{Layout/index.js => Layout.tsx} (93%)
 rename examples/react/nextjs/src/components/{PostList/index.js => PostList.tsx} (89%)
 rename examples/react/nextjs/src/components/{index.js => index.ts} (100%)
 delete mode 100644 examples/react/nextjs/src/hooks/index.js
 rename examples/react/nextjs/src/hooks/{usePosts/index.js => usePosts.ts} (58%)
 rename examples/react/nextjs/src/pages/{_app.js => _app.tsx} (82%)
 rename examples/react/nextjs/src/pages/{client-only.js => client-only.tsx} (79%)
 rename examples/react/nextjs/src/pages/{index.js => index.tsx} (74%)
 create mode 100644 examples/react/nextjs/tsconfig.json
 rename examples/react/optimistic-updates-cache/src/pages/api/{data.js => data.ts} (66%)
 rename examples/react/optimistic-updates-ui/src/pages/api/{data.js => data.ts} (66%)
 create mode 100644 examples/react/pagination/next-env.d.ts
 rename examples/react/pagination/src/pages/api/{projects.js => projects.ts} (72%)
 rename examples/react/pagination/src/pages/{index.js => index.tsx} (95%)
 create mode 100644 examples/react/pagination/tsconfig.json
 rename examples/react/playground/src/{index.jsx => index.tsx} (91%)
 create mode 100644 examples/react/playground/tsconfig.json
 create mode 100644 examples/react/playground/vite.config.ts
 delete mode 100755 examples/react/prefetching/libs/fetch.js
 create mode 100644 examples/react/prefetching/next-env.d.ts
 rename examples/react/prefetching/src/pages/[user]/{[repo].js => [repo].tsx} (58%)
 rename examples/react/prefetching/src/pages/{_app.js => _app.tsx} (72%)
 delete mode 100644 examples/react/prefetching/src/pages/api/data.js
 rename examples/react/prefetching/src/pages/{index.js => index.tsx} (94%)
 create mode 100644 examples/react/prefetching/tsconfig.json
 rename examples/react/{star-wars/src/App.jsx => rick-morty/src/App.tsx} (97%)
 rename examples/react/rick-morty/src/{Layout.jsx => Layout.tsx} (91%)
 rename examples/react/{star-wars/src/index.jsx => rick-morty/src/index.tsx} (59%)
 create mode 100644 examples/react/rick-morty/tsconfig.json
 create mode 100644 examples/react/rick-morty/vite.config.ts
 rename examples/react/{rick-morty/src/App.jsx => star-wars/src/App.tsx} (90%)
 rename examples/react/star-wars/src/{Layout.jsx => Layout.tsx} (89%)
 rename examples/react/{rick-morty/src/index.jsx => star-wars/src/index.tsx} (59%)
 create mode 100644 examples/react/star-wars/tsconfig.json
 create mode 100644 examples/react/star-wars/vite.config.ts

diff --git a/docs/config.json b/docs/config.json
index 60cf48e8fe..d47c5bbb44 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -903,7 +903,7 @@
             },
             {
               "label": "Basic",
-              "to": "framework/solid/examples/basic-typescript"
+              "to": "framework/solid/examples/basic"
             },
             {
               "label": "Basic w/ GraphQL-Request",
diff --git a/examples/angular/infinite-query-with-max-pages/package.json b/examples/angular/infinite-query-with-max-pages/package.json
index e47053a1ff..ac01ceb91b 100644
--- a/examples/angular/infinite-query-with-max-pages/package.json
+++ b/examples/angular/infinite-query-with-max-pages/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@tanstack/query-example-angular-infinite-query-with-max-pages",
-  "version": "0.0.0",
+  "private": true,
+  "type": "module",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development"
   },
-  "private": true,
   "dependencies": {
     "@angular/common": "^17.3.10",
     "@angular/compiler": "^17.3.10",
diff --git a/examples/react/auto-refetching/next-env.d.ts b/examples/react/auto-refetching/next-env.d.ts
new file mode 100644
index 0000000000..4f11a03dc6
--- /dev/null
+++ b/examples/react/auto-refetching/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/react/auto-refetching/next.config.js b/examples/react/auto-refetching/next.config.js
index 4fd508c5f4..033754658c 100644
--- a/examples/react/auto-refetching/next.config.js
+++ b/examples/react/auto-refetching/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig
diff --git a/examples/react/auto-refetching/package.json b/examples/react/auto-refetching/package.json
index 3ec3ef35e0..3474926d4f 100644
--- a/examples/react/auto-refetching/package.json
+++ b/examples/react/auto-refetching/package.json
@@ -10,9 +10,13 @@
   "dependencies": {
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
-    "isomorphic-unfetch": "4.0.2",
     "next": "^14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.3.3"
   }
 }
diff --git a/examples/react/auto-refetching/src/pages/api/data.js b/examples/react/auto-refetching/src/pages/api/data.ts
similarity index 67%
rename from examples/react/auto-refetching/src/pages/api/data.js
rename to examples/react/auto-refetching/src/pages/api/data.ts
index 9c0cb35897..57faeb3916 100644
--- a/examples/react/auto-refetching/src/pages/api/data.js
+++ b/examples/react/auto-refetching/src/pages/api/data.ts
@@ -1,7 +1,12 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
 // an simple endpoint for getting current list
 let list = ['Item 1', 'Item 2', 'Item 3']
 
-export default async (req, res) => {
+export default async (
+  req: NextApiRequest,
+  res: NextApiResponse<typeof list>,
+) => {
   if (req.query.add) {
     if (!list.includes(req.query.add)) {
       list.push(req.query.add)
diff --git a/examples/react/auto-refetching/src/pages/index.js b/examples/react/auto-refetching/src/pages/index.tsx
similarity index 93%
rename from examples/react/auto-refetching/src/pages/index.js
rename to examples/react/auto-refetching/src/pages/index.tsx
index ace9bc343a..470a6e78fa 100644
--- a/examples/react/auto-refetching/src/pages/index.js
+++ b/examples/react/auto-refetching/src/pages/index.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
 
-//
-
 import {
-  useQuery,
-  useQueryClient,
-  useMutation,
   QueryClient,
   QueryClientProvider,
+  useMutation,
+  useQuery,
+  useQueryClient,
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
@@ -28,7 +26,7 @@ function Example() {
 
   const { status, data, error, isFetching } = useQuery({
     queryKey: ['todos'],
-    queryFn: async () => {
+    queryFn: async (): Promise<Array<string>> => {
       const response = await fetch('/api/data')
       return await response.json()
     },
@@ -37,7 +35,7 @@ function Example() {
   })
 
   const addMutation = useMutation({
-    mutationFn: (add) => fetch(`/api/data?add=${add}`),
+    mutationFn: (add: string) => fetch(`/api/data?add=${add}`),
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
   })
 
@@ -51,7 +49,7 @@ function Example() {
 
   return (
     <div>
-      <h1>Auto Refetch with stale-time set to 1s)</h1>
+      <h1>Auto Refetch with stale-time set to {intervalMs}ms</h1>
       <p>
         This example is best experienced on your own machine, where you can open
         multiple tabs to the same localhost server and see your changes
diff --git a/examples/react/auto-refetching/tsconfig.json b/examples/react/auto-refetching/tsconfig.json
new file mode 100644
index 0000000000..9575d0eab5
--- /dev/null
+++ b/examples/react/auto-refetching/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/react/infinite-query-with-max-pages/next-env.d.ts b/examples/react/infinite-query-with-max-pages/next-env.d.ts
new file mode 100644
index 0000000000..4f11a03dc6
--- /dev/null
+++ b/examples/react/infinite-query-with-max-pages/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/react/infinite-query-with-max-pages/next.config.js b/examples/react/infinite-query-with-max-pages/next.config.js
index 4fd508c5f4..033754658c 100644
--- a/examples/react/infinite-query-with-max-pages/next.config.js
+++ b/examples/react/infinite-query-with-max-pages/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig
diff --git a/examples/react/infinite-query-with-max-pages/package.json b/examples/react/infinite-query-with-max-pages/package.json
index 636bb35bd0..0da6802a24 100644
--- a/examples/react/infinite-query-with-max-pages/package.json
+++ b/examples/react/infinite-query-with-max-pages/package.json
@@ -10,10 +10,13 @@
   "dependencies": {
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
-    "isomorphic-unfetch": "4.0.2",
     "next": "^14.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-intersection-observer": "^8.34.0"
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.3.3"
   }
 }
diff --git a/examples/react/infinite-query-with-max-pages/src/pages/api/projects.js b/examples/react/infinite-query-with-max-pages/src/pages/api/projects.ts
similarity index 78%
rename from examples/react/infinite-query-with-max-pages/src/pages/api/projects.js
rename to examples/react/infinite-query-with-max-pages/src/pages/api/projects.ts
index a13fbee1aa..29b5228484 100644
--- a/examples/react/infinite-query-with-max-pages/src/pages/api/projects.js
+++ b/examples/react/infinite-query-with-max-pages/src/pages/api/projects.ts
@@ -1,5 +1,6 @@
-// an endpoint for getting projects data
-export default (req, res) => {
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
   const cursor = parseInt(req.query.cursor) || 0
   const pageSize = 4
 
diff --git a/examples/react/infinite-query-with-max-pages/src/pages/index.js b/examples/react/infinite-query-with-max-pages/src/pages/index.tsx
similarity index 100%
rename from examples/react/infinite-query-with-max-pages/src/pages/index.js
rename to examples/react/infinite-query-with-max-pages/src/pages/index.tsx
index 8df4c0e8d9..29fac3d44a 100644
--- a/examples/react/infinite-query-with-max-pages/src/pages/index.js
+++ b/examples/react/infinite-query-with-max-pages/src/pages/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import {
-  useInfiniteQuery,
   QueryClient,
   QueryClientProvider,
+  useInfiniteQuery,
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
diff --git a/examples/react/infinite-query-with-max-pages/tsconfig.json b/examples/react/infinite-query-with-max-pages/tsconfig.json
new file mode 100644
index 0000000000..9575d0eab5
--- /dev/null
+++ b/examples/react/infinite-query-with-max-pages/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/react/load-more-infinite-scroll/next-env.d.ts b/examples/react/load-more-infinite-scroll/next-env.d.ts
new file mode 100644
index 0000000000..4f11a03dc6
--- /dev/null
+++ b/examples/react/load-more-infinite-scroll/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/react/load-more-infinite-scroll/next.config.js b/examples/react/load-more-infinite-scroll/next.config.js
index 4fd508c5f4..033754658c 100644
--- a/examples/react/load-more-infinite-scroll/next.config.js
+++ b/examples/react/load-more-infinite-scroll/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig
diff --git a/examples/react/load-more-infinite-scroll/package.json b/examples/react/load-more-infinite-scroll/package.json
index c35c1f54b9..219c55b20e 100644
--- a/examples/react/load-more-infinite-scroll/package.json
+++ b/examples/react/load-more-infinite-scroll/package.json
@@ -10,10 +10,14 @@
   "dependencies": {
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
-    "isomorphic-unfetch": "4.0.2",
     "next": "^14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^8.34.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.3.3"
   }
 }
diff --git a/examples/react/load-more-infinite-scroll/src/pages/about.js b/examples/react/load-more-infinite-scroll/src/pages/about.tsx
similarity index 100%
rename from examples/react/load-more-infinite-scroll/src/pages/about.js
rename to examples/react/load-more-infinite-scroll/src/pages/about.tsx
diff --git a/examples/react/load-more-infinite-scroll/src/pages/api/projects.js b/examples/react/load-more-infinite-scroll/src/pages/api/projects.ts
similarity index 78%
rename from examples/react/load-more-infinite-scroll/src/pages/api/projects.js
rename to examples/react/load-more-infinite-scroll/src/pages/api/projects.ts
index 03492c0a15..493a453a96 100644
--- a/examples/react/load-more-infinite-scroll/src/pages/api/projects.js
+++ b/examples/react/load-more-infinite-scroll/src/pages/api/projects.ts
@@ -1,5 +1,6 @@
-// an endpoint for getting projects data
-export default (req, res) => {
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
   const cursor = parseInt(req.query.cursor) || 0
   const pageSize = 5
 
diff --git a/examples/react/load-more-infinite-scroll/src/pages/index.js b/examples/react/load-more-infinite-scroll/src/pages/index.tsx
similarity index 91%
rename from examples/react/load-more-infinite-scroll/src/pages/index.js
rename to examples/react/load-more-infinite-scroll/src/pages/index.tsx
index b3b679be4e..9aa6742d15 100644
--- a/examples/react/load-more-infinite-scroll/src/pages/index.js
+++ b/examples/react/load-more-infinite-scroll/src/pages/index.tsx
@@ -34,13 +34,19 @@ function Example() {
     hasPreviousPage,
   } = useInfiniteQuery({
     queryKey: ['projects'],
-    queryFn: async ({ pageParam }) => {
+    queryFn: async ({
+      pageParam,
+    }): Promise<{
+      data: Array<{ name: string; id: number }>
+      previousId: number
+      nextId: number
+    }> => {
       const response = await fetch(`/api/projects?cursor=${pageParam}`)
       return await response.json()
     },
     initialPageParam: 0,
-    getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
-    getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
+    getPreviousPageParam: (firstPage) => firstPage.previousId,
+    getNextPageParam: (lastPage) => lastPage.nextId,
   })
 
   React.useEffect(() => {
diff --git a/examples/react/load-more-infinite-scroll/tsconfig.json b/examples/react/load-more-infinite-scroll/tsconfig.json
new file mode 100644
index 0000000000..9575d0eab5
--- /dev/null
+++ b/examples/react/load-more-infinite-scroll/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/react/nextjs-app-prefetching/next.config.js b/examples/react/nextjs-app-prefetching/next.config.js
index 4fd508c5f4..033754658c 100644
--- a/examples/react/nextjs-app-prefetching/next.config.js
+++ b/examples/react/nextjs-app-prefetching/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig
diff --git a/examples/react/nextjs-app-prefetching/package.json b/examples/react/nextjs-app-prefetching/package.json
index f3478e4ccb..d71d41a088 100644
--- a/examples/react/nextjs-app-prefetching/package.json
+++ b/examples/react/nextjs-app-prefetching/package.json
@@ -12,11 +12,10 @@
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
     "next": "^15.0.0-rc.0",
-    "react": "^19.0.0-rc-4c2e457c7c-20240522",
-    "react-dom": "^19.0.0-rc-4c2e457c7c-20240522"
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
-    "@types/node": "^20.12.12",
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
     "typescript": "5.3.3"
diff --git a/examples/react/nextjs-suspense-streaming/next.config.js b/examples/react/nextjs-suspense-streaming/next.config.js
index 9b538eb739..591cd313c3 100644
--- a/examples/react/nextjs-suspense-streaming/next.config.js
+++ b/examples/react/nextjs-suspense-streaming/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
   webpack: (config) => {
     if (config.name === 'server') config.optimization.concatenateModules = false
 
diff --git a/examples/react/nextjs-suspense-streaming/package.json b/examples/react/nextjs-suspense-streaming/package.json
index f282f6a039..958f9b4232 100644
--- a/examples/react/nextjs-suspense-streaming/package.json
+++ b/examples/react/nextjs-suspense-streaming/package.json
@@ -14,11 +14,9 @@
     "@tanstack/react-query-next-experimental": "^5.50.1",
     "next": "^14.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "superjson": "^2.2.1"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.12.12",
     "@types/react": "^18.2.79",
     "typescript": "5.3.3"
   }
diff --git a/examples/react/nextjs/next-env.d.ts b/examples/react/nextjs/next-env.d.ts
new file mode 100644
index 0000000000..4f11a03dc6
--- /dev/null
+++ b/examples/react/nextjs/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/react/nextjs/next.config.js b/examples/react/nextjs/next.config.js
index 4fd508c5f4..033754658c 100644
--- a/examples/react/nextjs/next.config.js
+++ b/examples/react/nextjs/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig
diff --git a/examples/react/nextjs/package.json b/examples/react/nextjs/package.json
index 6c40ed726f..4388f88cc1 100644
--- a/examples/react/nextjs/package.json
+++ b/examples/react/nextjs/package.json
@@ -12,8 +12,11 @@
     "@tanstack/react-query-devtools": "^5.50.1",
     "next": "^14.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "resolve-from": "^5.0.0",
-    "web-streams-polyfill": "^4.0.0"
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.3.3"
   }
 }
diff --git a/examples/react/nextjs/src/components/Header/index.js b/examples/react/nextjs/src/components/Header.tsx
similarity index 100%
rename from examples/react/nextjs/src/components/Header/index.js
rename to examples/react/nextjs/src/components/Header.tsx
diff --git a/examples/react/nextjs/src/components/InfoBox/index.js b/examples/react/nextjs/src/components/InfoBox.tsx
similarity index 83%
rename from examples/react/nextjs/src/components/InfoBox/index.js
rename to examples/react/nextjs/src/components/InfoBox.tsx
index b0ff42f7d3..4bc1ecbbea 100644
--- a/examples/react/nextjs/src/components/InfoBox/index.js
+++ b/examples/react/nextjs/src/components/InfoBox.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const InfoBox = ({ children }) => (
+const InfoBox = ({ children }: { children: React.ReactNode }) => (
   <div className="info">
     <style jsx>{`
       .info {
diff --git a/examples/react/nextjs/src/components/Layout/index.js b/examples/react/nextjs/src/components/Layout.tsx
similarity index 93%
rename from examples/react/nextjs/src/components/Layout/index.js
rename to examples/react/nextjs/src/components/Layout.tsx
index 3ffea4e4cc..b974183018 100644
--- a/examples/react/nextjs/src/components/Layout/index.js
+++ b/examples/react/nextjs/src/components/Layout.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const Layout = ({ children }) => {
+export const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <main>
       {children}
diff --git a/examples/react/nextjs/src/components/PostList/index.js b/examples/react/nextjs/src/components/PostList.tsx
similarity index 89%
rename from examples/react/nextjs/src/components/PostList/index.js
rename to examples/react/nextjs/src/components/PostList.tsx
index 88dfc5b56c..cc495e4ffa 100644
--- a/examples/react/nextjs/src/components/PostList/index.js
+++ b/examples/react/nextjs/src/components/PostList.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { usePosts } from '../../hooks/usePosts'
+import { usePosts } from '../hooks/usePosts'
 
 export const PostList = () => {
   const [postCount, setPostCount] = useState(10)
@@ -12,10 +12,7 @@ export const PostList = () => {
       <ul>
         {data?.map((post, index) => (
           <li key={post.id}>
-            <div>
-              <span>{index + 1}. </span>
-              <a href="#">{post.title}</a>
-            </div>
+            {index + 1}. {post.title}
           </li>
         ))}
       </ul>
diff --git a/examples/react/nextjs/src/components/index.js b/examples/react/nextjs/src/components/index.ts
similarity index 100%
rename from examples/react/nextjs/src/components/index.js
rename to examples/react/nextjs/src/components/index.ts
index 31a8a0c10f..4bfe479ce4 100644
--- a/examples/react/nextjs/src/components/index.js
+++ b/examples/react/nextjs/src/components/index.ts
@@ -1,4 +1,4 @@
-export * from './Layout'
 export * from './Header'
 export * from './InfoBox'
+export * from './Layout'
 export * from './PostList'
diff --git a/examples/react/nextjs/src/hooks/index.js b/examples/react/nextjs/src/hooks/index.js
deleted file mode 100644
index e30241c69e..0000000000
--- a/examples/react/nextjs/src/hooks/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './usePosts'
diff --git a/examples/react/nextjs/src/hooks/usePosts/index.js b/examples/react/nextjs/src/hooks/usePosts.ts
similarity index 58%
rename from examples/react/nextjs/src/hooks/usePosts/index.js
rename to examples/react/nextjs/src/hooks/usePosts.ts
index 8affadecf8..570f9f2b9b 100644
--- a/examples/react/nextjs/src/hooks/usePosts/index.js
+++ b/examples/react/nextjs/src/hooks/usePosts.ts
@@ -1,12 +1,18 @@
 import { useQuery } from '@tanstack/react-query'
 
-const fetchPosts = async (limit = 10) => {
+type Post = {
+  id: number
+  title: string
+  body: string
+}
+
+const fetchPosts = async (limit = 10): Promise<Array<Post>> => {
   const response = await fetch('https://jsonplaceholder.typicode.com/posts')
   const data = await response.json()
-  return data.filter((x) => x.id <= limit)
+  return data.filter((x: Post) => x.id <= limit)
 }
 
-const usePosts = (limit) => {
+const usePosts = (limit: number) => {
   return useQuery({
     queryKey: ['posts', limit],
     queryFn: () => fetchPosts(limit),
diff --git a/examples/react/nextjs/src/pages/_app.js b/examples/react/nextjs/src/pages/_app.tsx
similarity index 82%
rename from examples/react/nextjs/src/pages/_app.js
rename to examples/react/nextjs/src/pages/_app.tsx
index 3529f4e271..a62c582869 100644
--- a/examples/react/nextjs/src/pages/_app.js
+++ b/examples/react/nextjs/src/pages/_app.tsx
@@ -5,8 +5,9 @@ import {
   QueryClientProvider,
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import type { AppProps } from 'next/app'
 
-export default function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }: AppProps) {
   const [queryClient] = React.useState(() => new QueryClient())
 
   return (
diff --git a/examples/react/nextjs/src/pages/client-only.js b/examples/react/nextjs/src/pages/client-only.tsx
similarity index 79%
rename from examples/react/nextjs/src/pages/client-only.js
rename to examples/react/nextjs/src/pages/client-only.tsx
index 3647351418..86fabce758 100644
--- a/examples/react/nextjs/src/pages/client-only.js
+++ b/examples/react/nextjs/src/pages/client-only.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Layout, Header, InfoBox, PostList } from '../components'
+import { Header, InfoBox, Layout, PostList } from '../components'
 
 const ClientOnly = () => {
   return (
diff --git a/examples/react/nextjs/src/pages/index.js b/examples/react/nextjs/src/pages/index.tsx
similarity index 74%
rename from examples/react/nextjs/src/pages/index.js
rename to examples/react/nextjs/src/pages/index.tsx
index ca6bbe9e30..3e21704639 100644
--- a/examples/react/nextjs/src/pages/index.js
+++ b/examples/react/nextjs/src/pages/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { dehydrate, QueryClient } from '@tanstack/react-query'
-import { Layout, Header, InfoBox, PostList } from '../components'
-import { fetchPosts } from '../hooks'
+import { QueryClient, dehydrate } from '@tanstack/react-query'
+import { Header, InfoBox, Layout, PostList } from '../components'
+import { fetchPosts } from '../hooks/usePosts'
 
 const Home = () => {
   return (
diff --git a/examples/react/nextjs/tsconfig.json b/examples/react/nextjs/tsconfig.json
new file mode 100644
index 0000000000..9575d0eab5
--- /dev/null
+++ b/examples/react/nextjs/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/react/offline/src/App.tsx b/examples/react/offline/src/App.tsx
index a891b5607d..fdb8e1908a 100644
--- a/examples/react/offline/src/App.tsx
+++ b/examples/react/offline/src/App.tsx
@@ -7,7 +7,7 @@ import {
   useQuery,
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import toast, { Toaster } from 'react-hot-toast'
+import { Toaster, toast } from 'react-hot-toast'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
 import {
diff --git a/examples/react/offline/src/api.ts b/examples/react/offline/src/api.ts
index eb547bdfaf..0ae95d8b9b 100644
--- a/examples/react/offline/src/api.ts
+++ b/examples/react/offline/src/api.ts
@@ -36,6 +36,7 @@ export const updateMovie = async (id: string, comment: string) => {
   const response = await fetch(`/movies/${id}`, {
     method: 'POST',
     body: JSON.stringify({ comment }),
+    headers: { 'Content-Type': 'application/json' },
   })
   return await response.json()
 }
diff --git a/examples/react/optimistic-updates-cache/next.config.js b/examples/react/optimistic-updates-cache/next.config.js
index 4fd508c5f4..033754658c 100644
--- a/examples/react/optimistic-updates-cache/next.config.js
+++ b/examples/react/optimistic-updates-cache/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig
diff --git a/examples/react/optimistic-updates-cache/package.json b/examples/react/optimistic-updates-cache/package.json
index 33520ea40c..193f99c958 100755
--- a/examples/react/optimistic-updates-cache/package.json
+++ b/examples/react/optimistic-updates-cache/package.json
@@ -11,13 +11,11 @@
   "dependencies": {
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
-    "isomorphic-unfetch": "4.0.2",
     "next": "^14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.12.12",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "typescript": "5.3.3"
diff --git a/examples/react/optimistic-updates-cache/src/pages/api/data.js b/examples/react/optimistic-updates-cache/src/pages/api/data.ts
similarity index 66%
rename from examples/react/optimistic-updates-cache/src/pages/api/data.js
rename to examples/react/optimistic-updates-cache/src/pages/api/data.ts
index d94e339e7a..eabd6f5f7d 100644
--- a/examples/react/optimistic-updates-cache/src/pages/api/data.js
+++ b/examples/react/optimistic-updates-cache/src/pages/api/data.ts
@@ -1,10 +1,14 @@
-const items = []
+import type { NextApiRequest, NextApiResponse } from 'next'
 
-export default async (req, res) => {
+type Todo = { id: string; text: string }
+
+const items: Array<Todo> = []
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
   await new Promise((r) => setTimeout(r, 1000))
 
   if (req.method === 'POST') {
-    const { text } = req.body
+    const text: string = req.body.text
 
     // sometimes it will fail, this will cause a regression on the UI
 
diff --git a/examples/react/optimistic-updates-cache/src/pages/index.tsx b/examples/react/optimistic-updates-cache/src/pages/index.tsx
index b5b9343d2f..af91a45142 100644
--- a/examples/react/optimistic-updates-cache/src/pages/index.tsx
+++ b/examples/react/optimistic-updates-cache/src/pages/index.tsx
@@ -1,22 +1,22 @@
 import * as React from 'react'
 
 import {
+  QueryClient,
+  QueryClientProvider,
   queryOptions,
+  useMutation,
   useQuery,
   useQueryClient,
-  useMutation,
-  QueryClient,
-  QueryClientProvider,
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 const client = new QueryClient()
 
 type Todos = {
-  items: readonly {
+  items: ReadonlyArray<{
     id: string
     text: string
-  }[]
+  }>
   ts: number
 }
 
@@ -40,6 +40,7 @@ function Example() {
       const response = await fetch('/api/data', {
         method: 'POST',
         body: JSON.stringify({ text: newTodo }),
+        headers: { 'Content-Type': 'application/json' },
       })
       return await response.json()
     },
diff --git a/examples/react/optimistic-updates-ui/next.config.js b/examples/react/optimistic-updates-ui/next.config.js
index 4fd508c5f4..033754658c 100644
--- a/examples/react/optimistic-updates-ui/next.config.js
+++ b/examples/react/optimistic-updates-ui/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig
diff --git a/examples/react/optimistic-updates-ui/package.json b/examples/react/optimistic-updates-ui/package.json
index aa6be1b41d..b8e6e98419 100755
--- a/examples/react/optimistic-updates-ui/package.json
+++ b/examples/react/optimistic-updates-ui/package.json
@@ -10,13 +10,11 @@
   "dependencies": {
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
-    "isomorphic-unfetch": "4.0.2",
     "next": "^14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.12.12",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "typescript": "5.3.3"
diff --git a/examples/react/optimistic-updates-ui/src/pages/api/data.js b/examples/react/optimistic-updates-ui/src/pages/api/data.ts
similarity index 66%
rename from examples/react/optimistic-updates-ui/src/pages/api/data.js
rename to examples/react/optimistic-updates-ui/src/pages/api/data.ts
index d94e339e7a..eabd6f5f7d 100644
--- a/examples/react/optimistic-updates-ui/src/pages/api/data.js
+++ b/examples/react/optimistic-updates-ui/src/pages/api/data.ts
@@ -1,10 +1,14 @@
-const items = []
+import type { NextApiRequest, NextApiResponse } from 'next'
 
-export default async (req, res) => {
+type Todo = { id: string; text: string }
+
+const items: Array<Todo> = []
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
   await new Promise((r) => setTimeout(r, 1000))
 
   if (req.method === 'POST') {
-    const { text } = req.body
+    const text: string = req.body.text
 
     // sometimes it will fail, this will cause a regression on the UI
 
diff --git a/examples/react/optimistic-updates-ui/src/pages/index.tsx b/examples/react/optimistic-updates-ui/src/pages/index.tsx
index a382f1c8a1..18f9bd8714 100644
--- a/examples/react/optimistic-updates-ui/src/pages/index.tsx
+++ b/examples/react/optimistic-updates-ui/src/pages/index.tsx
@@ -11,10 +11,10 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 const client = new QueryClient()
 
 type Todos = {
-  items: readonly {
+  items: ReadonlyArray<{
     id: string
     text: string
-  }[]
+  }>
   ts: number
 }
 
@@ -37,6 +37,7 @@ function Example() {
       const response = await fetch('/api/data', {
         method: 'POST',
         body: JSON.stringify({ text: newTodo }),
+        headers: { 'Content-Type': 'application/json' },
       })
       return await response.json()
     },
diff --git a/examples/react/pagination/next-env.d.ts b/examples/react/pagination/next-env.d.ts
new file mode 100644
index 0000000000..4f11a03dc6
--- /dev/null
+++ b/examples/react/pagination/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/react/pagination/next.config.js b/examples/react/pagination/next.config.js
index 4fd508c5f4..033754658c 100644
--- a/examples/react/pagination/next.config.js
+++ b/examples/react/pagination/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig
diff --git a/examples/react/pagination/package.json b/examples/react/pagination/package.json
index 8fc4070b5a..8bd6b08eba 100644
--- a/examples/react/pagination/package.json
+++ b/examples/react/pagination/package.json
@@ -10,9 +10,13 @@
   "dependencies": {
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
-    "isomorphic-unfetch": "4.0.2",
     "next": "^14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.3.3"
   }
 }
diff --git a/examples/react/pagination/src/pages/api/projects.js b/examples/react/pagination/src/pages/api/projects.ts
similarity index 72%
rename from examples/react/pagination/src/pages/api/projects.js
rename to examples/react/pagination/src/pages/api/projects.ts
index a0799644eb..02a0e09b72 100644
--- a/examples/react/pagination/src/pages/api/projects.js
+++ b/examples/react/pagination/src/pages/api/projects.ts
@@ -1,5 +1,6 @@
-// an endpoint for getting projects data
-export default async (req, res) => {
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
   const page = parseInt(req.query.page) || 0
 
   const pageSize = 10
diff --git a/examples/react/pagination/src/pages/index.js b/examples/react/pagination/src/pages/index.tsx
similarity index 95%
rename from examples/react/pagination/src/pages/index.js
rename to examples/react/pagination/src/pages/index.tsx
index 1b937ffd51..64eec265f0 100644
--- a/examples/react/pagination/src/pages/index.js
+++ b/examples/react/pagination/src/pages/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import {
-  useQuery,
-  useQueryClient,
   QueryClient,
   QueryClientProvider,
   keepPreviousData,
+  useQuery,
+  useQueryClient,
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
@@ -18,7 +18,12 @@ export default function App() {
   )
 }
 
-async function fetchProjects(page = 0) {
+const fetchProjects = async (
+  page = 0,
+): Promise<{
+  projects: Array<{ name: string; id: number }>
+  hasMore: boolean
+}> => {
   const response = await fetch(`/api/projects?page=${page}`)
   return await response.json()
 }
diff --git a/examples/react/pagination/tsconfig.json b/examples/react/pagination/tsconfig.json
new file mode 100644
index 0000000000..9575d0eab5
--- /dev/null
+++ b/examples/react/pagination/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/react/playground/index.html b/examples/react/playground/index.html
index eff7945cd0..fb7608a83a 100644
--- a/examples/react/playground/index.html
+++ b/examples/react/playground/index.html
@@ -11,6 +11,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/examples/react/playground/package.json b/examples/react/playground/package.json
index cf58d757a8..273d6722bd 100644
--- a/examples/react/playground/package.json
+++ b/examples/react/playground/package.json
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "5.3.3",
     "vite": "^5.2.11"
   }
 }
diff --git a/examples/react/playground/src/index.jsx b/examples/react/playground/src/index.tsx
similarity index 91%
rename from examples/react/playground/src/index.jsx
rename to examples/react/playground/src/index.tsx
index 5f6288224a..8da861804c 100644
--- a/examples/react/playground/src/index.jsx
+++ b/examples/react/playground/src/index.tsx
@@ -1,16 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-
 import {
   QueryClient,
   QueryClientProvider,
+  useMutation,
   useQuery,
   useQueryClient,
-  useMutation,
 } from '@tanstack/react-query'
-
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-
 import './styles.css'
 
 let id = 0
@@ -23,6 +20,9 @@ let list = [
   'grapes',
 ].map((d) => ({ id: id++, name: d, notes: 'These are some notes' }))
 
+type Todos = typeof list
+type Todo = Todos[0]
+
 let errorRate = 0.05
 let queryTimeMin = 1000
 let queryTimeMax = 2000
@@ -31,7 +31,7 @@ const queryClient = new QueryClient()
 
 function Root() {
   const [staleTime, setStaleTime] = React.useState(1000)
-  const [gcTime, setgcTime] = React.useState(3000)
+  const [gcTime, setGcTime] = React.useState(3000)
   const [localErrorRate, setErrorRate] = React.useState(errorRate)
   const [localFetchTimeMin, setLocalFetchTimeMin] = React.useState(queryTimeMin)
   const [localFetchTimeMax, setLocalFetchTimeMax] = React.useState(queryTimeMax)
@@ -64,7 +64,7 @@ function Root() {
           min="0"
           step="1000"
           value={staleTime}
-          onChange={(e) => setStaleTime(parseFloat(e.target.value, 10))}
+          onChange={(e) => setStaleTime(parseFloat(e.target.value))}
           style={{ width: '100px' }}
         />
       </div>
@@ -75,7 +75,7 @@ function Root() {
           min="0"
           step="1000"
           value={gcTime}
-          onChange={(e) => setgcTime(parseFloat(e.target.value, 10))}
+          onChange={(e) => setGcTime(parseFloat(e.target.value))}
           style={{ width: '100px' }}
         />
       </div>
@@ -88,7 +88,7 @@ function Root() {
           max="1"
           step=".05"
           value={localErrorRate}
-          onChange={(e) => setErrorRate(parseFloat(e.target.value, 10))}
+          onChange={(e) => setErrorRate(parseFloat(e.target.value))}
           style={{ width: '100px' }}
         />
       </div>
@@ -99,7 +99,7 @@ function Root() {
           min="1"
           step="500"
           value={localFetchTimeMin}
-          onChange={(e) => setLocalFetchTimeMin(parseFloat(e.target.value, 10))}
+          onChange={(e) => setLocalFetchTimeMin(parseFloat(e.target.value))}
           style={{ width: '60px' }}
         />{' '}
       </div>
@@ -110,7 +110,7 @@ function Root() {
           min="1"
           step="500"
           value={localFetchTimeMax}
-          onChange={(e) => setLocalFetchTimeMax(parseFloat(e.target.value, 10))}
+          onChange={(e) => setLocalFetchTimeMax(parseFloat(e.target.value))}
           style={{ width: '60px' }}
         />
       </div>
@@ -124,7 +124,7 @@ function Root() {
 
 function App() {
   const queryClient = useQueryClient()
-  const [editingIndex, setEditingIndex] = React.useState(null)
+  const [editingIndex, setEditingIndex] = React.useState<number | null>(null)
   const [views, setViews] = React.useState(['', 'fruit', 'grape'])
   // const [views, setViews] = React.useState([""]);
 
@@ -171,7 +171,13 @@ function App() {
   )
 }
 
-function Todos({ initialFilter = '', setEditingIndex }) {
+function Todos({
+  initialFilter = '',
+  setEditingIndex,
+}: {
+  initialFilter: string
+  setEditingIndex: React.Dispatch<React.SetStateAction<number | null>>
+}) {
   const [filter, setFilter] = React.useState(initialFilter)
 
   const { status, data, isFetching, error, failureCount, refetch } = useQuery({
@@ -224,14 +230,19 @@ function Todos({ initialFilter = '', setEditingIndex }) {
   )
 }
 
-function EditTodo({ editingIndex, setEditingIndex }) {
+function EditTodo({
+  editingIndex,
+  setEditingIndex,
+}: {
+  editingIndex: number
+  setEditingIndex: React.Dispatch<React.SetStateAction<number | null>>
+}) {
   const queryClient = useQueryClient()
 
   // Don't attempt to query until editingIndex is truthy
   const { status, data, isFetching, error, failureCount, refetch } = useQuery({
     queryKey: ['todo', { id: editingIndex }],
     queryFn: () => fetchTodoById({ id: editingIndex }),
-    enabled: editingIndex !== null,
   })
 
   const [todo, setTodo] = React.useState(data || {})
@@ -348,7 +359,7 @@ function AddTodo() {
       />
       <button
         onClick={() => {
-          addMutation.mutate({ name })
+          addMutation.mutate({ name, notes: 'These are some notes' })
         }}
         disabled={addMutation.status === 'pending' || !name}
       >
@@ -365,7 +376,7 @@ function AddTodo() {
   )
 }
 
-function fetchTodos({ signal, queryKey: [, { filter }] }) {
+function fetchTodos({ signal, queryKey: [, { filter }] }): Promise<Todos> {
   console.info('fetchTodos', { filter })
 
   if (signal) {
@@ -389,7 +400,7 @@ function fetchTodos({ signal, queryKey: [, { filter }] }) {
   })
 }
 
-function fetchTodoById({ id }) {
+function fetchTodoById({ id }: { id: number }): Promise<Todo> {
   console.info('fetchTodoById', { id })
   return new Promise((resolve, reject) => {
     setTimeout(
@@ -406,7 +417,7 @@ function fetchTodoById({ id }) {
   })
 }
 
-function postTodo({ name, notes }) {
+function postTodo({ name, notes }: Omit<Todo, 'id'>) {
   console.info('postTodo', { name, notes })
   return new Promise((resolve, reject) => {
     setTimeout(
@@ -425,7 +436,7 @@ function postTodo({ name, notes }) {
   })
 }
 
-function patchTodo(todo) {
+function patchTodo(todo?: Todo): Promise<Todo> {
   console.info('patchTodo', todo)
   return new Promise((resolve, reject) => {
     setTimeout(
@@ -446,5 +457,5 @@ function patchTodo(todo) {
   })
 }
 
-const rootElement = document.getElementById('root')
+const rootElement = document.getElementById('root') as HTMLElement
 ReactDOM.createRoot(rootElement).render(<Root />)
diff --git a/examples/react/playground/tsconfig.json b/examples/react/playground/tsconfig.json
new file mode 100644
index 0000000000..23a8707ef4
--- /dev/null
+++ b/examples/react/playground/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "eslint.config.js"]
+}
diff --git a/examples/react/playground/vite.config.ts b/examples/react/playground/vite.config.ts
new file mode 100644
index 0000000000..9ffcc67574
--- /dev/null
+++ b/examples/react/playground/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/examples/react/prefetching/libs/fetch.js b/examples/react/prefetching/libs/fetch.js
deleted file mode 100755
index c2f95fc722..0000000000
--- a/examples/react/prefetching/libs/fetch.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import fetch from 'isomorphic-unfetch'
-
-export default async function (...args) {
-  const res = await fetch(...args)
-  return await res.json()
-}
diff --git a/examples/react/prefetching/next-env.d.ts b/examples/react/prefetching/next-env.d.ts
new file mode 100644
index 0000000000..4f11a03dc6
--- /dev/null
+++ b/examples/react/prefetching/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/react/prefetching/next.config.js b/examples/react/prefetching/next.config.js
index 4fd508c5f4..033754658c 100644
--- a/examples/react/prefetching/next.config.js
+++ b/examples/react/prefetching/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig
diff --git a/examples/react/prefetching/package.json b/examples/react/prefetching/package.json
index bb293cbded..b201f64021 100644
--- a/examples/react/prefetching/package.json
+++ b/examples/react/prefetching/package.json
@@ -10,9 +10,13 @@
   "dependencies": {
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
-    "isomorphic-unfetch": "4.0.2",
     "next": "^14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.3.3"
   }
 }
diff --git a/examples/react/prefetching/src/pages/[user]/[repo].js b/examples/react/prefetching/src/pages/[user]/[repo].tsx
similarity index 58%
rename from examples/react/prefetching/src/pages/[user]/[repo].js
rename to examples/react/prefetching/src/pages/[user]/[repo].tsx
index 81b6fd27a6..f8e05754d0 100644
--- a/examples/react/prefetching/src/pages/[user]/[repo].js
+++ b/examples/react/prefetching/src/pages/[user]/[repo].tsx
@@ -1,16 +1,26 @@
 import React from 'react'
 import Link from 'next/link'
-import fetch from '../../../libs/fetch'
-
 import { useQuery } from '@tanstack/react-query'
+import { usePathname } from 'next/navigation'
+
+async function fetchProject(id: string): Promise<{
+  forks_count: number
+  stargazers_count: number
+  watchers_count: number
+}> {
+  console.info('Fetching project:', id)
+
+  const response = await fetch(`https://api.github.com/repos/${id}`)
+  await new Promise((r) => setTimeout(r, 1000))
+  return await response.json()
+}
 
-export default () => {
-  const id =
-    typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''
+export default function Repo() {
+  const id = usePathname()
 
   const { status, data, error, isFetching } = useQuery({
     queryKey: ['team', id],
-    queryFn: () => fetch('/api/data?id=' + id),
+    queryFn: () => fetchProject(id),
   })
 
   return (
@@ -25,7 +35,7 @@ export default () => {
           <div>
             <p>forks: {data.forks_count}</p>
             <p>stars: {data.stargazers_count}</p>
-            <p>watchers: {data.watchers}</p>
+            <p>watchers: {data.watchers_count}</p>
           </div>
           <div>{isFetching ? 'Background Updating...' : ' '}</div>
         </>
diff --git a/examples/react/prefetching/src/pages/_app.js b/examples/react/prefetching/src/pages/_app.tsx
similarity index 72%
rename from examples/react/prefetching/src/pages/_app.js
rename to examples/react/prefetching/src/pages/_app.tsx
index d31935d2e6..1e87d50b12 100644
--- a/examples/react/prefetching/src/pages/_app.js
+++ b/examples/react/prefetching/src/pages/_app.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import type { AppProps } from 'next/app'
 
-export default function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }: AppProps) {
   const [queryClient] = React.useState(() => new QueryClient())
 
   return (
diff --git a/examples/react/prefetching/src/pages/api/data.js b/examples/react/prefetching/src/pages/api/data.js
deleted file mode 100644
index fac5320741..0000000000
--- a/examples/react/prefetching/src/pages/api/data.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import fetch from 'isomorphic-unfetch'
-
-const projects = [
-  'tannerlinsley/react-query',
-  'tannerlinsley/react-table',
-  'facebook/react',
-  'zeit/next.js',
-]
-
-export default (req, res) => {
-  if (req.query.id) {
-    // a slow endpoint for getting repo data
-    fetch(`https://api.github.com/repos/${req.query.id}`)
-      .then((resp) => resp.json())
-      .then((data) => {
-        setTimeout(() => {
-          res.json(data)
-        }, 2000)
-      })
-
-    return
-  }
-  setTimeout(() => {
-    res.json(projects)
-  }, 2000)
-}
diff --git a/examples/react/prefetching/src/pages/index.js b/examples/react/prefetching/src/pages/index.tsx
similarity index 94%
rename from examples/react/prefetching/src/pages/index.js
rename to examples/react/prefetching/src/pages/index.tsx
index 4c37c32c8f..9b2217c527 100644
--- a/examples/react/prefetching/src/pages/index.js
+++ b/examples/react/prefetching/src/pages/index.tsx
@@ -2,13 +2,15 @@ import React from 'react'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
-const getCharacters = async () => {
+const getCharacters = async (): Promise<{
+  results: Array<{ id: number; name: string }>
+}> => {
   await new Promise((r) => setTimeout(r, 500))
   const response = await fetch('https://rickandmortyapi.com/api/character/')
   return await response.json()
 }
 
-const getCharacter = async (selectedChar) => {
+const getCharacter = async (selectedChar: number) => {
   await new Promise((r) => setTimeout(r, 500))
   const response = await fetch(
     `https://rickandmortyapi.com/api/character/${selectedChar}`,
diff --git a/examples/react/prefetching/tsconfig.json b/examples/react/prefetching/tsconfig.json
new file mode 100644
index 0000000000..9575d0eab5
--- /dev/null
+++ b/examples/react/prefetching/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/react/rick-morty/index.html b/examples/react/rick-morty/index.html
index 625610e643..244598b0b4 100644
--- a/examples/react/rick-morty/index.html
+++ b/examples/react/rick-morty/index.html
@@ -11,6 +11,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/examples/react/rick-morty/package.json b/examples/react/rick-morty/package.json
index 334c9e841e..21d16628c1 100644
--- a/examples/react/rick-morty/package.json
+++ b/examples/react/rick-morty/package.json
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "5.3.3",
     "vite": "^5.2.11"
   }
 }
diff --git a/examples/react/star-wars/src/App.jsx b/examples/react/rick-morty/src/App.tsx
similarity index 97%
rename from examples/react/star-wars/src/App.jsx
rename to examples/react/rick-morty/src/App.tsx
index 3ec768ad97..f129746d99 100644
--- a/examples/react/star-wars/src/App.jsx
+++ b/examples/react/rick-morty/src/App.tsx
@@ -1,13 +1,11 @@
-import React from 'react'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { ThemeProvider } from '@mui/material'
 import { createTheme } from '@mui/material/styles'
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import Layout from './Layout'
 
 import './styles.css'
-import Layout from './Layout'
 
 const queryClient = new QueryClient()
 
diff --git a/examples/react/rick-morty/src/Layout.jsx b/examples/react/rick-morty/src/Layout.tsx
similarity index 91%
rename from examples/react/rick-morty/src/Layout.jsx
rename to examples/react/rick-morty/src/Layout.tsx
index b33a76a9d3..dbc7d4aaa4 100644
--- a/examples/react/rick-morty/src/Layout.jsx
+++ b/examples/react/rick-morty/src/Layout.tsx
@@ -1,12 +1,11 @@
-import React from 'react'
+import { Button, Link } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { Route, Link as RouterLink, Routes } from 'react-router-dom'
 import Episodes from './Episodes'
 import Episode from './Episode'
 import Characters from './Characters'
 import Character from './Character'
 import Home from './Home'
-import { Link, Button } from '@mui/material'
-import { makeStyles } from '@mui/styles'
-import { Routes, Route, Link as RouterLink } from 'react-router-dom'
 
 export default function Layout() {
   const classes = useStyles()
diff --git a/examples/react/star-wars/src/index.jsx b/examples/react/rick-morty/src/index.tsx
similarity index 59%
rename from examples/react/star-wars/src/index.jsx
rename to examples/react/rick-morty/src/index.tsx
index 03066f37fc..5482de0621 100644
--- a/examples/react/star-wars/src/index.jsx
+++ b/examples/react/rick-morty/src/index.tsx
@@ -1,7 +1,5 @@
-import React from 'react'
 import ReactDOM from 'react-dom/client'
-
 import App from './App'
 
-const rootElement = document.getElementById('root')
+const rootElement = document.getElementById('root') as HTMLElement
 ReactDOM.createRoot(rootElement).render(<App />)
diff --git a/examples/react/rick-morty/tsconfig.json b/examples/react/rick-morty/tsconfig.json
new file mode 100644
index 0000000000..656a7d66a9
--- /dev/null
+++ b/examples/react/rick-morty/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "allowJs": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "eslint.config.js"]
+}
diff --git a/examples/react/rick-morty/vite.config.ts b/examples/react/rick-morty/vite.config.ts
new file mode 100644
index 0000000000..9ffcc67574
--- /dev/null
+++ b/examples/react/rick-morty/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/examples/react/shadow-dom/package.json b/examples/react/shadow-dom/package.json
index 68d284c42a..412b4fce4f 100644
--- a/examples/react/shadow-dom/package.json
+++ b/examples/react/shadow-dom/package.json
@@ -1,7 +1,6 @@
 {
   "name": "@tanstack/query-example-react-shadow-dom",
   "private": true,
-  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,10 +15,10 @@
     "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
diff --git a/examples/react/star-wars/index.html b/examples/react/star-wars/index.html
index 3adbff566c..7e8ec2cdf0 100644
--- a/examples/react/star-wars/index.html
+++ b/examples/react/star-wars/index.html
@@ -11,6 +11,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/examples/react/star-wars/package.json b/examples/react/star-wars/package.json
index 9cc6375427..eb9ca70172 100644
--- a/examples/react/star-wars/package.json
+++ b/examples/react/star-wars/package.json
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "5.3.3",
     "vite": "^5.2.11"
   }
 }
diff --git a/examples/react/rick-morty/src/App.jsx b/examples/react/star-wars/src/App.tsx
similarity index 90%
rename from examples/react/rick-morty/src/App.jsx
rename to examples/react/star-wars/src/App.tsx
index 044d7cd145..f129746d99 100644
--- a/examples/react/rick-morty/src/App.jsx
+++ b/examples/react/star-wars/src/App.tsx
@@ -1,13 +1,11 @@
-import React from 'react'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { ThemeProvider } from '@mui/material'
-import { createMuiTheme } from '@mui/material/styles'
-
+import { createTheme } from '@mui/material/styles'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import Layout from './Layout'
 
 import './styles.css'
-import Layout from './Layout'
 
 const queryClient = new QueryClient()
 
@@ -24,7 +22,7 @@ export default function App() {
   )
 }
 
-const theme = createMuiTheme({
+const theme = createTheme({
   typography: {
     h1: {
       fontFamily: 'Roboto Mono, monospace',
diff --git a/examples/react/star-wars/src/Layout.jsx b/examples/react/star-wars/src/Layout.tsx
similarity index 89%
rename from examples/react/star-wars/src/Layout.jsx
rename to examples/react/star-wars/src/Layout.tsx
index eeca6342dd..597292166a 100644
--- a/examples/react/star-wars/src/Layout.jsx
+++ b/examples/react/star-wars/src/Layout.tsx
@@ -1,14 +1,13 @@
-import React from 'react'
+import { Button, Link } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { Route, Link as RouterLink, Routes } from 'react-router-dom'
 import Films from './Films'
 import Film from './Film'
 import Characters from './Characters'
 import Character from './Character'
 import Home from './Home'
-import { Link, Button } from '@mui/material'
-import { makeStyles } from '@mui/styles'
-import { Routes, Route, Link as RouterLink } from 'react-router-dom'
 
-export default function Layout(props) {
+export default function Layout() {
   const classes = useStyles()
 
   return (
diff --git a/examples/react/rick-morty/src/index.jsx b/examples/react/star-wars/src/index.tsx
similarity index 59%
rename from examples/react/rick-morty/src/index.jsx
rename to examples/react/star-wars/src/index.tsx
index 03066f37fc..5482de0621 100644
--- a/examples/react/rick-morty/src/index.jsx
+++ b/examples/react/star-wars/src/index.tsx
@@ -1,7 +1,5 @@
-import React from 'react'
 import ReactDOM from 'react-dom/client'
-
 import App from './App'
 
-const rootElement = document.getElementById('root')
+const rootElement = document.getElementById('root') as HTMLElement
 ReactDOM.createRoot(rootElement).render(<App />)
diff --git a/examples/react/star-wars/tsconfig.json b/examples/react/star-wars/tsconfig.json
new file mode 100644
index 0000000000..656a7d66a9
--- /dev/null
+++ b/examples/react/star-wars/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "allowJs": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "eslint.config.js"]
+}
diff --git a/examples/react/star-wars/vite.config.ts b/examples/react/star-wars/vite.config.ts
new file mode 100644
index 0000000000..9ffcc67574
--- /dev/null
+++ b/examples/react/star-wars/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/integrations/react-next-15/next.config.js b/integrations/react-next-15/next.config.js
index 8d2a9bf37a..f041db5139 100644
--- a/integrations/react-next-15/next.config.js
+++ b/integrations/react-next-15/next.config.js
@@ -3,6 +3,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 module.exports = nextConfig
diff --git a/integrations/react-next-15/package.json b/integrations/react-next-15/package.json
index 4ec3ca3263..092a8e466b 100644
--- a/integrations/react-next-15/package.json
+++ b/integrations/react-next-15/package.json
@@ -10,12 +10,11 @@
     "@tanstack/react-query": "workspace:*",
     "@tanstack/react-query-devtools": "workspace:*",
     "next": "^15.0.0-rc.0",
-    "react": "^19.0.0-rc-4c2e457c7c-20240522",
-    "react-dom": "^19.0.0-rc-4c2e457c7c-20240522",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
     "tupleson": "0.23.1"
   },
   "devDependencies": {
-    "@types/node": "^20.12.12",
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
     "typescript": "5.3.3"
diff --git a/integrations/react-next/next.config.js b/integrations/react-next/next.config.js
index 8d2a9bf37a..f041db5139 100644
--- a/integrations/react-next/next.config.js
+++ b/integrations/react-next/next.config.js
@@ -3,6 +3,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 module.exports = nextConfig
diff --git a/integrations/react-next/package.json b/integrations/react-next/package.json
index f7aa52d4e0..0850a6bf66 100644
--- a/integrations/react-next/package.json
+++ b/integrations/react-next/package.json
@@ -12,7 +12,6 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.12.12",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "typescript": "5.3.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 174206e816..4c7293ce9d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -369,9 +369,6 @@ importers:
       '@tanstack/react-query-devtools':
         specifier: ^5.50.1
         version: link:../../../packages/react-query-devtools
-      isomorphic-unfetch:
-        specifier: 4.0.2
-        version: 4.0.2
       next:
         specifier: ^14.2.4
         version: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.71.1)
@@ -381,6 +378,16 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@types/react':
+        specifier: npm:types-react@rc
+        version: types-react@19.0.0-rc.1
+      '@types/react-dom':
+        specifier: npm:types-react-dom@rc
+        version: types-react-dom@19.0.0-rc.1
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
 
   examples/react/basic:
     dependencies:
@@ -486,9 +493,6 @@ importers:
       '@tanstack/react-query-devtools':
         specifier: ^5.50.1
         version: link:../../../packages/react-query-devtools
-      isomorphic-unfetch:
-        specifier: 4.0.2
-        version: 4.0.2
       next:
         specifier: ^14.2.4
         version: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.71.1)
@@ -498,9 +502,16 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
-      react-intersection-observer:
-        specifier: ^8.34.0
-        version: 8.34.0(react@18.3.1)
+    devDependencies:
+      '@types/react':
+        specifier: npm:types-react@rc
+        version: types-react@19.0.0-rc.1
+      '@types/react-dom':
+        specifier: npm:types-react-dom@rc
+        version: types-react-dom@19.0.0-rc.1
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
 
   examples/react/load-more-infinite-scroll:
     dependencies:
@@ -510,9 +521,6 @@ importers:
       '@tanstack/react-query-devtools':
         specifier: ^5.50.1
         version: link:../../../packages/react-query-devtools
-      isomorphic-unfetch:
-        specifier: 4.0.2
-        version: 4.0.2
       next:
         specifier: ^14.2.4
         version: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.71.1)
@@ -525,6 +533,16 @@ importers:
       react-intersection-observer:
         specifier: ^8.34.0
         version: 8.34.0(react@18.3.1)
+    devDependencies:
+      '@types/react':
+        specifier: npm:types-react@rc
+        version: types-react@19.0.0-rc.1
+      '@types/react-dom':
+        specifier: npm:types-react-dom@rc
+        version: types-react-dom@19.0.0-rc.1
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
 
   examples/react/nextjs:
     dependencies:
@@ -543,12 +561,16 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
-      resolve-from:
-        specifier: ^5.0.0
-        version: 5.0.0
-      web-streams-polyfill:
-        specifier: ^4.0.0
-        version: 4.0.0
+    devDependencies:
+      '@types/react':
+        specifier: npm:types-react@rc
+        version: types-react@19.0.0-rc.1
+      '@types/react-dom':
+        specifier: npm:types-react-dom@rc
+        version: types-react-dom@19.0.0-rc.1
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
 
   examples/react/nextjs-app-prefetching:
     dependencies:
@@ -562,15 +584,12 @@ importers:
         specifier: ^15.0.0-rc.0
         version: 15.0.0-rc.0(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522))(react@19.0.0-rc-4c2e457c7c-20240522)(sass@1.71.1)
       react:
-        specifier: ^19.0.0-rc-4c2e457c7c-20240522
+        specifier: 19.0.0-rc-4c2e457c7c-20240522
         version: 19.0.0-rc-4c2e457c7c-20240522
       react-dom:
-        specifier: ^19.0.0-rc-4c2e457c7c-20240522
+        specifier: 19.0.0-rc-4c2e457c7c-20240522
         version: 19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522)
     devDependencies:
-      '@types/node':
-        specifier: ^20.12.12
-        version: 20.12.12
       '@types/react':
         specifier: npm:types-react@rc
         version: types-react@19.0.0-rc.1
@@ -601,13 +620,7 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
-      superjson:
-        specifier: ^2.2.1
-        version: 2.2.1
     devDependencies:
-      '@types/node':
-        specifier: ^20.12.12
-        version: 20.12.12
       '@types/react':
         specifier: npm:types-react@rc
         version: types-react@19.0.0-rc.1
@@ -663,9 +676,6 @@ importers:
       '@tanstack/react-query-devtools':
         specifier: ^5.50.1
         version: link:../../../packages/react-query-devtools
-      isomorphic-unfetch:
-        specifier: 4.0.2
-        version: 4.0.2
       next:
         specifier: ^14.2.4
         version: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.71.1)
@@ -676,9 +686,6 @@ importers:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
     devDependencies:
-      '@types/node':
-        specifier: ^20.12.12
-        version: 20.12.12
       '@types/react':
         specifier: npm:types-react@rc
         version: types-react@19.0.0-rc.1
@@ -697,9 +704,6 @@ importers:
       '@tanstack/react-query-devtools':
         specifier: ^5.50.1
         version: link:../../../packages/react-query-devtools
-      isomorphic-unfetch:
-        specifier: 4.0.2
-        version: 4.0.2
       next:
         specifier: ^14.2.4
         version: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.71.1)
@@ -710,9 +714,6 @@ importers:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
     devDependencies:
-      '@types/node':
-        specifier: ^20.12.12
-        version: 20.12.12
       '@types/react':
         specifier: npm:types-react@rc
         version: types-react@19.0.0-rc.1
@@ -731,9 +732,6 @@ importers:
       '@tanstack/react-query-devtools':
         specifier: ^5.50.1
         version: link:../../../packages/react-query-devtools
-      isomorphic-unfetch:
-        specifier: 4.0.2
-        version: 4.0.2
       next:
         specifier: ^14.2.4
         version: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.71.1)
@@ -743,6 +741,16 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@types/react':
+        specifier: npm:types-react@rc
+        version: types-react@19.0.0-rc.1
+      '@types/react-dom':
+        specifier: npm:types-react-dom@rc
+        version: types-react-dom@19.0.0-rc.1
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
 
   examples/react/playground:
     dependencies:
@@ -762,6 +770,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^4.2.1
         version: 4.2.1(vite@5.2.11(@types/node@20.12.12)(less@4.2.0)(sass@1.71.1)(terser@5.29.1))
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
       vite:
         specifier: ^5.2.11
         version: 5.2.11(@types/node@20.12.12)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)
@@ -774,9 +785,6 @@ importers:
       '@tanstack/react-query-devtools':
         specifier: ^5.50.1
         version: link:../../../packages/react-query-devtools
-      isomorphic-unfetch:
-        specifier: 4.0.2
-        version: 4.0.2
       next:
         specifier: ^14.2.4
         version: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.71.1)
@@ -786,6 +794,16 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@types/react':
+        specifier: npm:types-react@rc
+        version: types-react@19.0.0-rc.1
+      '@types/react-dom':
+        specifier: npm:types-react-dom@rc
+        version: types-react-dom@19.0.0-rc.1
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
 
   examples/react/react-native:
     dependencies:
@@ -936,6 +954,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^4.2.1
         version: 4.2.1(vite@5.2.11(@types/node@20.12.12)(less@4.2.0)(sass@1.71.1)(terser@5.29.1))
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
       vite:
         specifier: ^5.2.11
         version: 5.2.11(@types/node@20.12.12)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)
@@ -962,11 +983,11 @@ importers:
         specifier: npm:types-react-dom@rc
         version: types-react-dom@19.0.0-rc.1
       '@typescript-eslint/eslint-plugin':
-        specifier: ^7.0.2
-        version: 7.14.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3)
+        specifier: ^7.15.0
+        version: 7.15.0(@typescript-eslint/parser@7.15.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3)
       '@typescript-eslint/parser':
-        specifier: ^7.0.2
-        version: 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+        specifier: ^7.15.0
+        version: 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       '@vitejs/plugin-react':
         specifier: ^4.2.1
         version: 4.2.1(vite@5.2.11(@types/node@20.12.12)(less@4.2.0)(sass@1.71.1)(terser@5.29.1))
@@ -978,7 +999,7 @@ importers:
         version: 4.6.2(eslint@8.57.0)
       eslint-plugin-react-refresh:
         specifier: ^0.4.7
-        version: 0.4.7(eslint@8.57.0)
+        version: 0.4.8(eslint@8.57.0)
       typescript:
         specifier: 5.3.3
         version: 5.3.3
@@ -1047,6 +1068,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^4.2.1
         version: 4.2.1(vite@5.2.11(@types/node@20.12.12)(less@4.2.0)(sass@1.71.1)(terser@5.29.1))
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
       vite:
         specifier: ^5.2.11
         version: 5.2.11(@types/node@20.12.12)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)
@@ -1689,9 +1713,6 @@ importers:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
     devDependencies:
-      '@types/node':
-        specifier: ^20.12.12
-        version: 20.12.12
       '@types/react':
         specifier: npm:types-react@rc
         version: types-react@19.0.0-rc.1
@@ -1717,18 +1738,15 @@ importers:
         specifier: ^15.0.0-rc.0
         version: 15.0.0-rc.0(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522))(react@19.0.0-rc-4c2e457c7c-20240522)(sass@1.71.1)
       react:
-        specifier: ^19.0.0-rc-4c2e457c7c-20240522
+        specifier: 19.0.0-rc-4c2e457c7c-20240522
         version: 19.0.0-rc-4c2e457c7c-20240522
       react-dom:
-        specifier: ^19.0.0-rc-4c2e457c7c-20240522
+        specifier: 19.0.0-rc-4c2e457c7c-20240522
         version: 19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522)
       tupleson:
         specifier: 0.23.1
         version: 0.23.1
     devDependencies:
-      '@types/node':
-        specifier: ^20.12.12
-        version: 20.12.12
       '@types/react':
         specifier: npm:types-react@rc
         version: types-react@19.0.0-rc.1
@@ -6667,17 +6685,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/eslint-plugin@7.14.1':
-    resolution: {integrity: sha512-aAJd6bIf2vvQRjUG3ZkNXkmBpN+J7Wd0mfQiiVCJMu9Z5GcZZdcc0j8XwN/BM97Fl7e3SkTXODSk4VehUv7CGw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^7.0.0
-      eslint: ^8.57.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@typescript-eslint/eslint-plugin@7.15.0':
     resolution: {integrity: sha512-uiNHpyjZtFrLwLDpHnzaDlP3Tt6sGMqTCiqmxaN4n4RP0EfYZDODJyddiFDF44Hjwxr5xAcaYxVKm9QKQFJFLA==}
     engines: {node: ^18.18.0 || >=20.0.0}
@@ -6727,16 +6734,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/parser@7.14.1':
-    resolution: {integrity: sha512-8lKUOebNLcR0D7RvlcloOacTOWzOqemWEWkKSVpMZVF/XVcwjPR+3MD08QzbW9TCGJ+DwIc6zUSGZ9vd8cO1IA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.57.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@typescript-eslint/parser@7.15.0':
     resolution: {integrity: sha512-k9fYuQNnypLFcqORNClRykkGOMOj+pV6V91R4GO/l1FDGwpqmSwoOQrOHo3cGaH63e+D3ZiCAOsuS/D2c99j/A==}
     engines: {node: ^18.18.0 || >=20.0.0}
@@ -8996,10 +8993,6 @@ packages:
   damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
-  data-uri-to-buffer@4.0.1:
-    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
-    engines: {node: '>= 12'}
-
   data-urls@2.0.0:
     resolution: {integrity: sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==}
     engines: {node: '>=10'}
@@ -9877,8 +9870,8 @@ packages:
       typescript:
         optional: true
 
-  eslint-plugin-react-refresh@0.4.7:
-    resolution: {integrity: sha512-yrj+KInFmwuQS2UQcg1SF83ha1tuHC1jMQbRNyuWtlEzzKRDgAl7L4Yp4NlDUZTZNlWvHEzOtJhMi40R7JxcSw==}
+  eslint-plugin-react-refresh@0.4.8:
+    resolution: {integrity: sha512-MIKAclwaDFIiYtVBLzDdm16E+Ty4GwhB6wZlCAG1R3Ur+F9Qbo6PRxpA5DK7XtDgm+WlCoAY2WxAwqhmIDHg6Q==}
     peerDependencies:
       eslint: ^8.57.0
 
@@ -10243,10 +10236,6 @@ packages:
   fbjs@3.0.5:
     resolution: {integrity: sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==}
 
-  fetch-blob@3.2.0:
-    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
-    engines: {node: ^12.20 || >= 14.13}
-
   fetch-retry@4.1.1:
     resolution: {integrity: sha512-e6eB7zN6UBSwGVwrbWVH+gdLnkW9WwHhmq2YDK1Sh30pzx1onRVGBvogTlUeWxwTa+L86NYdo4hFkh7O8ZjSnA==}
 
@@ -10473,10 +10462,6 @@ packages:
     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
     engines: {node: '>= 6'}
 
-  formdata-polyfill@4.0.10:
-    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
-    engines: {node: '>=12.20.0'}
-
   forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -11763,9 +11748,6 @@ packages:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
     engines: {node: '>=0.10.0'}
 
-  isomorphic-unfetch@4.0.2:
-    resolution: {integrity: sha512-1Yd+CF/7al18/N2BDbsLBcp6RO3tucSW+jcLq24dqdX5MNbCNTw1z4BsGsp4zNmjr/Izm2cs/cEqZPp4kvWSCA==}
-
   istanbul-lib-coverage@3.2.2:
     resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
@@ -13387,10 +13369,6 @@ packages:
     resolution: {integrity: sha512-tmPX422rYgofd4epzrNoOXiE8XFZYOcCq1vD7MAXCDO+O+zndlA2ztdKKMa+EeuBG5tHETpr4ml4RGgpqDCCAg==}
     engines: {node: '>= 0.10.5'}
 
-  node-domexception@1.0.0:
-    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
-    engines: {node: '>=10.5.0'}
-
   node-emoji@2.1.3:
     resolution: {integrity: sha512-E2WEOVsgs7O16zsURJ/eH8BqhF029wGpEOnv7Urwdo2wmQanOACwJQh0devF9D9RhoZru0+9JXIS0dBXIAz+lA==}
     engines: {node: '>=18'}
@@ -13407,10 +13385,6 @@ packages:
       encoding:
         optional: true
 
-  node-fetch@3.3.2:
-    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   node-forge@0.10.0:
     resolution: {integrity: sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==}
     engines: {node: '>= 6.0.0'}
@@ -17378,9 +17352,6 @@ packages:
   unescape-js@1.1.4:
     resolution: {integrity: sha512-42SD8NOQEhdYntEiUQdYq/1V/YHwr1HLwlHuTJB5InVVdOSbgI6xu8jK5q65yIzuFCfczzyDF/7hbGzVbyCw0g==}
 
-  unfetch@5.0.0:
-    resolution: {integrity: sha512-3xM2c89siXg0nHvlmYsQ2zkLASvVMBisZm5lF3gFDqfF2xonNStDJyMpvaOBe0a1Edxmqrf2E0HBdmy9QyZaeg==}
-
   unherit@3.0.1:
     resolution: {integrity: sha512-akOOQ/Yln8a2sgcLj4U0Jmx0R5jpIg2IUyRrWOzmEbjBtGzBdHtSeFKgoEcoH4KYIG/Pb8GQ/BwtYm0GCq1Sqg==}
 
@@ -18040,14 +18011,6 @@ packages:
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
-  web-streams-polyfill@3.3.2:
-    resolution: {integrity: sha512-3pRGuxRF5gpuZc0W+EpwQRmCD7gRqcDOMt688KmdlDAgAyaB1XlN0zq2njfDNm44XVdIouE7pZ6GzbdyH47uIQ==}
-    engines: {node: '>= 8'}
-
-  web-streams-polyfill@4.0.0:
-    resolution: {integrity: sha512-0zJXHRAYEjM2tUfZ2DiSOHAa2aw1tisnnhU3ufD57R8iefL+DcdJyRBRyJpG+NUimDgbTI/lH+gAE1PAvV3Cgw==}
-    engines: {node: '>= 8'}
-
   web-vitals@3.5.2:
     resolution: {integrity: sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==}
 
@@ -21681,9 +21644,9 @@ snapshots:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
       '@eslint-react/tools': 1.5.17
       '@eslint-react/types': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 7.14.1
-      '@typescript-eslint/types': 7.14.1
-      '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 7.15.0
+      '@typescript-eslint/types': 7.15.0
+      '@typescript-eslint/utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       effect: 3.4.5
       string-ts: 2.2.0
       ts-pattern: 5.2.0
@@ -21700,10 +21663,10 @@ snapshots:
       '@eslint-react/tools': 1.5.17
       '@eslint-react/types': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
       '@eslint-react/var': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 7.14.1
-      '@typescript-eslint/type-utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/types': 7.14.1
-      '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 7.15.0
+      '@typescript-eslint/type-utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/types': 7.15.0
+      '@typescript-eslint/utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       effect: 3.4.5
       short-unique-id: 5.2.0
       ts-pattern: 5.2.0
@@ -21740,9 +21703,9 @@ snapshots:
       '@eslint-react/tools': 1.5.17
       '@eslint-react/types': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
       '@eslint-react/var': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 7.14.1
-      '@typescript-eslint/types': 7.14.1
-      '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 7.15.0
+      '@typescript-eslint/types': 7.15.0
+      '@typescript-eslint/utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       effect: 3.4.5
       micro-memoize: 4.1.2
       ts-pattern: 5.2.0
@@ -21753,7 +21716,7 @@ snapshots:
 
   '@eslint-react/shared@1.5.17(eslint@8.57.0)(typescript@5.3.3)':
     dependencies:
-      '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       deepmerge-ts: 7.0.3
       valibot: 0.35.0
     transitivePeerDependencies:
@@ -21767,7 +21730,7 @@ snapshots:
     dependencies:
       '@eslint-react/tools': 1.5.17
       '@typescript-eslint/types': 7.14.1
-      '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
     transitivePeerDependencies:
       - eslint
       - supports-color
@@ -21778,9 +21741,9 @@ snapshots:
       '@eslint-react/ast': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
       '@eslint-react/tools': 1.5.17
       '@eslint-react/types': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 7.14.1
-      '@typescript-eslint/types': 7.14.1
-      '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 7.15.0
+      '@typescript-eslint/types': 7.15.0
+      '@typescript-eslint/utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       effect: 3.4.5
       string-ts: 2.2.0
       valibot: 0.35.0
@@ -22589,7 +22552,11 @@ snapshots:
       jest-runner: 26.6.3
       jest-runtime: 26.6.3
     transitivePeerDependencies:
+      - bufferutil
+      - canvas
       - supports-color
+      - ts-node
+      - utf-8-validate
 
   '@jest/test-sequencer@27.5.1':
     dependencies:
@@ -24647,7 +24614,7 @@ snapshots:
 
   '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.4.0)(typescript@5.4.2))(eslint@9.4.0)(typescript@5.4.2)':
     dependencies:
-      '@eslint-community/regexpp': 4.10.0
+      '@eslint-community/regexpp': 4.11.0
       '@typescript-eslint/parser': 5.62.0(eslint@9.4.0)(typescript@5.4.2)
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/type-utils': 5.62.0(eslint@9.4.0)(typescript@5.4.2)
@@ -24664,24 +24631,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@7.14.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 7.14.1
-      '@typescript-eslint/type-utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/visitor-keys': 7.14.1
-      eslint: 8.57.0
-      graphemer: 1.4.0
-      ignore: 5.3.1
-      natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.3.3)
-    optionalDependencies:
-      typescript: 5.3.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/eslint-plugin@7.15.0(@typescript-eslint/parser@7.15.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3)':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
@@ -24757,19 +24706,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.3.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 7.14.1
-      '@typescript-eslint/types': 7.14.1
-      '@typescript-eslint/typescript-estree': 7.14.1(typescript@5.3.3)
-      '@typescript-eslint/visitor-keys': 7.14.1
-      debug: 4.3.5(supports-color@6.1.0)
-      eslint: 8.57.0
-    optionalDependencies:
-      typescript: 5.3.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@7.15.0(eslint@8.57.0)(typescript@5.3.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 7.15.0
@@ -27840,8 +27776,6 @@ snapshots:
 
   damerau-levenshtein@1.0.8: {}
 
-  data-uri-to-buffer@4.0.1: {}
-
   data-urls@2.0.0:
     dependencies:
       abab: 2.0.6
@@ -28947,9 +28881,9 @@ snapshots:
       '@eslint-react/tools': 1.5.17
       '@eslint-react/types': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
       '@eslint-react/var': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 7.14.1
+      '@typescript-eslint/scope-manager': 7.15.0
       '@typescript-eslint/types': 7.14.1
-      '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       effect: 3.4.5
       eslint: 8.57.0
       string-ts: 2.2.0
@@ -28968,10 +28902,10 @@ snapshots:
       '@eslint-react/tools': 1.5.17
       '@eslint-react/types': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
       '@eslint-react/var': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 7.14.1
-      '@typescript-eslint/type-utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 7.15.0
+      '@typescript-eslint/type-utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       '@typescript-eslint/types': 7.14.1
-      '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       effect: 3.4.5
       eslint: 8.57.0
       string-ts: 2.2.0
@@ -28997,10 +28931,10 @@ snapshots:
       '@eslint-react/shared': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
       '@eslint-react/tools': 1.5.17
       '@eslint-react/types': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 7.14.1
-      '@typescript-eslint/type-utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 7.15.0
+      '@typescript-eslint/type-utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       '@typescript-eslint/types': 7.14.1
-      '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       effect: 3.4.5
       eslint: 8.57.0
       string-ts: 2.2.0
@@ -29010,7 +28944,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-react-refresh@0.4.7(eslint@8.57.0):
+  eslint-plugin-react-refresh@0.4.8(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
 
@@ -29023,10 +28957,10 @@ snapshots:
       '@eslint-react/tools': 1.5.17
       '@eslint-react/types': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
       '@eslint-react/var': 1.5.17(eslint@8.57.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 7.14.1
-      '@typescript-eslint/type-utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/scope-manager': 7.15.0
+      '@typescript-eslint/type-utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       '@typescript-eslint/types': 7.14.1
-      '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.15.0(eslint@8.57.0)(typescript@5.3.3)
       effect: 3.4.5
       eslint: 8.57.0
       string-ts: 2.2.0
@@ -29621,11 +29555,6 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  fetch-blob@3.2.0:
-    dependencies:
-      node-domexception: 1.0.0
-      web-streams-polyfill: 3.3.2
-
   fetch-retry@4.1.1: {}
 
   fflate@0.8.2: {}
@@ -29876,10 +29805,6 @@ snapshots:
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
-  formdata-polyfill@4.0.10:
-    dependencies:
-      fetch-blob: 3.2.0
-
   forwarded@0.2.0: {}
 
   fraction.js@4.3.7: {}
@@ -31215,11 +31140,6 @@ snapshots:
 
   isobject@3.0.1: {}
 
-  isomorphic-unfetch@4.0.2:
-    dependencies:
-      node-fetch: 3.3.2
-      unfetch: 5.0.0
-
   istanbul-lib-coverage@3.2.2: {}
 
   istanbul-lib-instrument@4.0.3:
@@ -31337,7 +31257,11 @@ snapshots:
       stack-utils: 2.0.6
       throat: 5.0.0
     transitivePeerDependencies:
+      - bufferutil
+      - canvas
       - supports-color
+      - ts-node
+      - utf-8-validate
 
   jest-circus@27.5.1:
     dependencies:
@@ -34025,8 +33949,6 @@ snapshots:
     dependencies:
       minimatch: 3.1.2
 
-  node-domexception@1.0.0: {}
-
   node-emoji@2.1.3:
     dependencies:
       '@sindresorhus/is': 4.6.0
@@ -34042,12 +33964,6 @@ snapshots:
     optionalDependencies:
       encoding: 0.1.13
 
-  node-fetch@3.3.2:
-    dependencies:
-      data-uri-to-buffer: 4.0.1
-      fetch-blob: 3.2.0
-      formdata-polyfill: 4.0.10
-
   node-forge@0.10.0: {}
 
   node-forge@1.3.1: {}
@@ -38789,8 +38705,6 @@ snapshots:
     dependencies:
       string.fromcodepoint: 0.2.1
 
-  unfetch@5.0.0: {}
-
   unherit@3.0.1: {}
 
   unicode-canonical-property-names-ecmascript@2.0.0: {}
@@ -39567,10 +39481,6 @@ snapshots:
 
   web-namespaces@2.0.1: {}
 
-  web-streams-polyfill@3.3.2: {}
-
-  web-streams-polyfill@4.0.0: {}
-
   web-vitals@3.5.2: {}
 
   webidl-conversions@3.0.1: {}