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

Author: lachlancollins

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",

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",

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.

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

@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig

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"
   }
 }

…ct/auto-refetching/src/pages/api/data.js …ct/auto-refetching/src/pages/api/data.tsexamples/react/auto-refetching/src/pages/api/data.js renamed to examples/react/auto-refetching/src/pages/api/data.ts examples/react/auto-refetching/src/pages/api/data.js renamed to 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)

…react/auto-refetching/src/pages/index.js …eact/auto-refetching/src/pages/index.tsxexamples/react/auto-refetching/src/pages/index.js renamed to examples/react/auto-refetching/src/pages/index.tsx examples/react/auto-refetching/src/pages/index.js renamed to 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

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"]
+}

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.

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