-
Auto Refetch with stale-time set to 1s)
+
Auto Refetch with stale-time set to {intervalMs}ms
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 @@
+///
+///
+
+// 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 @@
+///
+///
+
+// 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 @@
+///
+///
+
+// 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 }) => (