Skip to content

Commit b58da75

Browse files
lachlancollinslachlancollins
authored
docs(examples): Modernise Next.js examples (TanStack#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
1 parent 8d0ba7e commit b58da75

File tree

89 files changed

+589
-379
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+589
-379
lines changed

‎docs/config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -903,7 +903,7 @@
903903
},
904904
{
905905
"label": "Basic",
906-
"to": "framework/solid/examples/basic-typescript"
906+
"to": "framework/solid/examples/basic"
907907
},
908908
{
909909
"label": "Basic w/ GraphQL-Request",

‎examples/angular/infinite-query-with-max-pages/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"name": "@tanstack/query-example-angular-infinite-query-with-max-pages",
3-
"version": "0.0.0",
3+
"private": true,
4+
"type": "module",
45
"scripts": {
56
"ng": "ng",
67
"start": "ng serve",
78
"build": "ng build",
89
"watch": "ng build --watch --configuration development"
910
},
10-
"private": true,
1111
"dependencies": {
1212
"@angular/common": "^17.3.10",
1313
"@angular/compiler": "^17.3.10",

‎examples/react/auto-refetching/next-env.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎examples/react/auto-refetching/next.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ const nextConfig = {
55
eslint: {
66
ignoreDuringBuilds: true,
77
},
8+
typescript: {
9+
ignoreBuildErrors: true,
10+
},
811
}
912

1013
export default nextConfig

‎examples/react/auto-refetching/package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,13 @@
1010
"dependencies": {
1111
"@tanstack/react-query": "^5.50.1",
1212
"@tanstack/react-query-devtools": "^5.50.1",
13-
"isomorphic-unfetch": "4.0.2",
1413
"next": "^14.2.4",
1514
"react": "^18.2.0",
1615
"react-dom": "^18.2.0"
16+
},
17+
"devDependencies": {
18+
"@types/react": "^18.2.79",
19+
"@types/react-dom": "^18.2.25",
20+
"typescript": "5.3.3"
1721
}
1822
}

‎examples/react/auto-refetching/src/pages/api/data.js renamed to ‎examples/react/auto-refetching/src/pages/api/data.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1+
import type { NextApiRequest, NextApiResponse } from 'next'
2+
13
// an simple endpoint for getting current list
24
let list = ['Item 1', 'Item 2', 'Item 3']
35

4-
export default async (req, res) => {
6+
export default async (
7+
req: NextApiRequest,
8+
res: NextApiResponse<typeof list>,
9+
) => {
510
if (req.query.add) {
611
if (!list.includes(req.query.add)) {
712
list.push(req.query.add)

‎examples/react/auto-refetching/src/pages/index.js renamed to ‎examples/react/auto-refetching/src/pages/index.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from 'react'
22

3-
//
4-
53
import {
6-
useQuery,
7-
useQueryClient,
8-
useMutation,
94
QueryClient,
105
QueryClientProvider,
6+
useMutation,
7+
useQuery,
8+
useQueryClient,
119
} from '@tanstack/react-query'
1210
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
1311

@@ -28,7 +26,7 @@ function Example() {
2826

2927
const { status, data, error, isFetching } = useQuery({
3028
queryKey: ['todos'],
31-
queryFn: async () => {
29+
queryFn: async (): Promise<Array<string>> => {
3230
const response = await fetch('/api/data')
3331
return await response.json()
3432
},
@@ -37,7 +35,7 @@ function Example() {
3735
})
3836

3937
const addMutation = useMutation({
40-
mutationFn: (add) => fetch(`/api/data?add=${add}`),
38+
mutationFn: (add: string) => fetch(`/api/data?add=${add}`),
4139
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
4240
})
4341

@@ -51,7 +49,7 @@ function Example() {
5149

5250
return (
5351
<div>
54-
<h1>Auto Refetch with stale-time set to 1s)</h1>
52+
<h1>Auto Refetch with stale-time set to {intervalMs}ms</h1>
5553
<p>
5654
This example is best experienced on your own machine, where you can open
5755
multiple tabs to the same localhost server and see your changes

‎examples/react/auto-refetching/tsconfig.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"lib": ["dom", "dom.iterable", "esnext"],
4+
"allowJs": true,
5+
"skipLibCheck": true,
6+
"strict": true,
7+
"forceConsistentCasingInFileNames": true,
8+
"noEmit": true,
9+
"esModuleInterop": true,
10+
"module": "esnext",
11+
"moduleResolution": "Bundler",
12+
"resolveJsonModule": true,
13+
"isolatedModules": true,
14+
"jsx": "preserve",
15+
"incremental": true
16+
},
17+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
18+
"exclude": ["node_modules"]
19+
}

‎examples/react/infinite-query-with-max-pages/next-env.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎examples/react/infinite-query-with-max-pages/next.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ const nextConfig = {
55
eslint: {
66
ignoreDuringBuilds: true,
77
},
8+
typescript: {
9+
ignoreBuildErrors: true,
10+
},
811
}
912

1013
export default nextConfig

‎examples/react/infinite-query-with-max-pages/package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,13 @@
1010
"dependencies": {
1111
"@tanstack/react-query": "^5.50.1",
1212
"@tanstack/react-query-devtools": "^5.50.1",
13-
"isomorphic-unfetch": "4.0.2",
1413
"next": "^14.2.4",
1514
"react": "^18.2.0",
16-
"react-dom": "^18.2.0",
17-
"react-intersection-observer": "^8.34.0"
15+
"react-dom": "^18.2.0"
16+
},
17+
"devDependencies": {
18+
"@types/react": "^18.2.79",
19+
"@types/react-dom": "^18.2.25",
20+
"typescript": "5.3.3"
1821
}
1922
}

‎examples/react/infinite-query-with-max-pages/src/pages/api/projects.js renamed to ‎examples/react/infinite-query-with-max-pages/src/pages/api/projects.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
// an endpoint for getting projects data
2-
export default (req, res) => {
1+
import type { NextApiRequest, NextApiResponse } from 'next'
2+
3+
export default (req: NextApiRequest, res: NextApiResponse) => {
34
const cursor = parseInt(req.query.cursor) || 0
45
const pageSize = 4
56

‎examples/react/infinite-query-with-max-pages/src/pages/index.js renamed to ‎examples/react/infinite-query-with-max-pages/src/pages/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react'
22
import {
3-
useInfiniteQuery,
43
QueryClient,
54
QueryClientProvider,
5+
useInfiniteQuery,
66
} from '@tanstack/react-query'
77
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
88

‎examples/react/infinite-query-with-max-pages/tsconfig.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"lib": ["dom", "dom.iterable", "esnext"],
4+
"allowJs": true,
5+
"skipLibCheck": true,
6+
"strict": true,
7+
"forceConsistentCasingInFileNames": true,
8+
"noEmit": true,
9+
"esModuleInterop": true,
10+
"module": "esnext",
11+
"moduleResolution": "Bundler",
12+
"resolveJsonModule": true,
13+
"isolatedModules": true,
14+
"jsx": "preserve",
15+
"incremental": true
16+
},
17+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
18+
"exclude": ["node_modules"]
19+
}

‎examples/react/load-more-infinite-scroll/next-env.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎examples/react/load-more-infinite-scroll/next.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ const nextConfig = {
55
eslint: {
66
ignoreDuringBuilds: true,
77
},
8+
typescript: {
9+
ignoreBuildErrors: true,
10+
},
811
}
912

1013
export default nextConfig

‎examples/react/load-more-infinite-scroll/package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,14 @@
1010
"dependencies": {
1111
"@tanstack/react-query": "^5.50.1",
1212
"@tanstack/react-query-devtools": "^5.50.1",
13-
"isomorphic-unfetch": "4.0.2",
1413
"next": "^14.2.4",
1514
"react": "^18.2.0",
1615
"react-dom": "^18.2.0",
1716
"react-intersection-observer": "^8.34.0"
17+
},
18+
"devDependencies": {
19+
"@types/react": "^18.2.79",
20+
"@types/react-dom": "^18.2.25",
21+
"typescript": "5.3.3"
1822
}
1923
}

‎examples/react/load-more-infinite-scroll/src/pages/about.js renamed to ‎examples/react/load-more-infinite-scroll/src/pages/about.tsx

File renamed without changes.

‎examples/react/load-more-infinite-scroll/src/pages/api/projects.js renamed to ‎examples/react/load-more-infinite-scroll/src/pages/api/projects.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
// an endpoint for getting projects data
2-
export default (req, res) => {
1+
import type { NextApiRequest, NextApiResponse } from 'next'
2+
3+
export default (req: NextApiRequest, res: NextApiResponse) => {
34
const cursor = parseInt(req.query.cursor) || 0
45
const pageSize = 5
56

‎examples/react/load-more-infinite-scroll/src/pages/index.js renamed to ‎examples/react/load-more-infinite-scroll/src/pages/index.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,19 @@ function Example() {
3434
hasPreviousPage,
3535
} = useInfiniteQuery({
3636
queryKey: ['projects'],
37-
queryFn: async ({ pageParam }) => {
37+
queryFn: async ({
38+
pageParam,
39+
}): Promise<{
40+
data: Array<{ name: string; id: number }>
41+
previousId: number
42+
nextId: number
43+
}> => {
3844
const response = await fetch(`/api/projects?cursor=${pageParam}`)
3945
return await response.json()
4046
},
4147
initialPageParam: 0,
42-
getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
43-
getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
48+
getPreviousPageParam: (firstPage) => firstPage.previousId,
49+
getNextPageParam: (lastPage) => lastPage.nextId,
4450
})
4551

4652
React.useEffect(() => {

‎examples/react/load-more-infinite-scroll/tsconfig.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"lib": ["dom", "dom.iterable", "esnext"],
4+
"allowJs": true,
5+
"skipLibCheck": true,
6+
"strict": true,
7+
"forceConsistentCasingInFileNames": true,
8+
"noEmit": true,
9+
"esModuleInterop": true,
10+
"module": "esnext",
11+
"moduleResolution": "Bundler",
12+
"resolveJsonModule": true,
13+
"isolatedModules": true,
14+
"jsx": "preserve",
15+
"incremental": true
16+
},
17+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
18+
"exclude": ["node_modules"]
19+
}

‎examples/react/nextjs-app-prefetching/next.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ const nextConfig = {
55
eslint: {
66
ignoreDuringBuilds: true,
77
},
8+
typescript: {
9+
ignoreBuildErrors: true,
10+
},
811
}
912

1013
export default nextConfig

‎examples/react/nextjs-app-prefetching/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,10 @@
1212
"@tanstack/react-query": "^5.50.1",
1313
"@tanstack/react-query-devtools": "^5.50.1",
1414
"next": "^15.0.0-rc.0",
15-
"react": "^19.0.0-rc-4c2e457c7c-20240522",
16-
"react-dom": "^19.0.0-rc-4c2e457c7c-20240522"
15+
"react": "19.0.0-rc-4c2e457c7c-20240522",
16+
"react-dom": "19.0.0-rc-4c2e457c7c-20240522"
1717
},
1818
"devDependencies": {
19-
"@types/node": "^20.12.12",
2019
"@types/react": "npm:types-react@rc",
2120
"@types/react-dom": "npm:types-react-dom@rc",
2221
"typescript": "5.3.3"

‎examples/react/nextjs-suspense-streaming/next.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ const nextConfig = {
55
eslint: {
66
ignoreDuringBuilds: true,
77
},
8+
typescript: {
9+
ignoreBuildErrors: true,
10+
},
811
webpack: (config) => {
912
if (config.name === 'server') config.optimization.concatenateModules = false
1013

‎examples/react/nextjs-suspense-streaming/package.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,9 @@
1414
"@tanstack/react-query-next-experimental": "^5.50.1",
1515
"next": "^14.2.4",
1616
"react": "^18.2.0",
17-
"react-dom": "^18.2.0",
18-
"superjson": "^2.2.1"
17+
"react-dom": "^18.2.0"
1918
},
2019
"devDependencies": {
21-
"@types/node": "^20.12.12",
2220
"@types/react": "^18.2.79",
2321
"typescript": "5.3.3"
2422
}

‎examples/react/nextjs/next-env.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎examples/react/nextjs/next.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ const nextConfig = {
55
eslint: {
66
ignoreDuringBuilds: true,
77
},
8+
typescript: {
9+
ignoreBuildErrors: true,
10+
},
811
}
912

1013
export default nextConfig

‎examples/react/nextjs/package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,11 @@
1212
"@tanstack/react-query-devtools": "^5.50.1",
1313
"next": "^14.2.4",
1414
"react": "^18.2.0",
15-
"react-dom": "^18.2.0",
16-
"resolve-from": "^5.0.0",
17-
"web-streams-polyfill": "^4.0.0"
15+
"react-dom": "^18.2.0"
16+
},
17+
"devDependencies": {
18+
"@types/react": "^18.2.79",
19+
"@types/react-dom": "^18.2.25",
20+
"typescript": "5.3.3"
1821
}
1922
}

‎examples/react/nextjs/src/components/Header/index.js renamed to ‎examples/react/nextjs/src/components/Header.tsx

File renamed without changes.

‎examples/react/nextjs/src/components/InfoBox/index.js renamed to ‎examples/react/nextjs/src/components/InfoBox.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22

3-
const InfoBox = ({ children }) => (
3+
const InfoBox = ({ children }: { children: React.ReactNode }) => (
44
<div className="info">
55
<style jsx>{`
66
.info {

‎examples/react/nextjs/src/components/Layout/index.js renamed to ‎examples/react/nextjs/src/components/Layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22

3-
export const Layout = ({ children }) => {
3+
export const Layout = ({ children }: { children: React.ReactNode }) => {
44
return (
55
<main>
66
{children}

0 commit comments

Comments
 (0)