examples: Bump SWR to v2.0.0 (#44790)

examples/api-routes-graphql/package.json

@@ -11,7 +11,7 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "^1.3.0"
+    "swr": "^2.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.2",

examples/api-routes-graphql/pages/index.tsx

@@ -11,18 +11,25 @@ const fetcher = (query: string) =>
     .then((res) => res.json())
     .then((json) => json.data)
 
+type Data = {
+  users: {
+    name: string
+  }[]
+}
+
 export default function Index() {
-  const { data, error } = useSWR('{ users { name } }', fetcher)
+  const { data, error, isLoading } = useSWR<Data>('{ users { name } }', fetcher)
 
   if (error) return <div>Failed to load</div>
-  if (!data) return <div>Loading...</div>
+  if (isLoading) return <div>Loading...</div>
+  if (!data) return null
 
   const { users } = data
 
   return (
     <div>
-      {users.map((user: any, i: number) => (
-        <div key={i}>{user.name}</div>
+      {users.map((user, index) => (
+        <div key={index}>{user.name}</div>
       ))}
     </div>
   )

examples/api-routes-middleware/package.json

@@ -10,9 +10,10 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "^1.3.0"
+    "swr": "^2.0.0"
   },
   "devDependencies": {
+    "@types/cookie": "^0.5.1",
     "@types/node": "^18.0.2",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",

examples/api-routes-middleware/pages/index.tsx

@@ -1,12 +1,13 @@
 import useSWR from 'swr'
 
-const fetcher = (url) => fetch(url).then((res) => res.text())
+const fetcher = (url: string) => fetch(url).then((res) => res.text())
 
 export default function Index() {
-  const { data, error } = useSWR('/api/cookies', fetcher)
+  const { data, error, isLoading } = useSWR<string>('/api/cookies', fetcher)
 
   if (error) return <div>Failed to load</div>
-  if (!data) return <div>Loading...</div>
+  if (isLoading) return <div>Loading...</div>
+  if (!data) return null
 
   return <div>{`Cookie from response: "${data}"`}</div>
 }

examples/api-routes-rest/package.json

@@ -9,7 +9,7 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "^1.3.0"
+    "swr": "^2.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.3",

examples/api-routes-rest/pages/api/user/[id].ts

@@ -1,10 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+import type { User } from '../../../interfaces'
 
-export default function userHandler(req: NextApiRequest, res: NextApiResponse) {
-  const {
-    query: { id, name },
-    method,
-  } = req
+export default function userHandler(
+  req: NextApiRequest,
+  res: NextApiResponse<User>
+) {
+  const { query, method } = req
+  const id = parseInt(query.id as string, 10)
+  const name = query.name as string
 
   switch (method) {
     case 'GET':

examples/api-routes-rest/pages/api/users.ts

@@ -4,7 +4,10 @@ import type { User } from '../../interfaces'
 // Fake users data
 const users: User[] = [{ id: 1 }, { id: 2 }, { id: 3 }]
 
-export default function handler(_req: NextApiRequest, res: NextApiResponse) {
+export default function handler(
+  _req: NextApiRequest,
+  res: NextApiResponse<User[]>
+) {
   // Get data from your database
   res.status(200).json(users)
 }

examples/api-routes-rest/pages/index.tsx

@@ -5,17 +5,18 @@ import Link from 'next/link'
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 export default function Index() {
-  const { data, error } = useSwr<User[]>('/api/users', fetcher)
+  const { data, error, isLoading } = useSwr<User[]>('/api/users', fetcher)
 
   if (error) return <div>Failed to load users</div>
-  if (!data) return <div>Loading...</div>
+  if (isLoading) return <div>Loading...</div>
+  if (!data) return null
 
   return (
     <ul>
       {data.map((user) => (
         <li key={user.id}>
-          <Link href="/user/[id]" as={`/user/${user.id}`} legacyBehavior>
-            {`User ${user.id}`}
+          <Link href="/user/[id]" as={`/user/${user.id}`}>
+            {user.name ?? `User ${user.id}`}
           </Link>
         </li>
       ))}

examples/api-routes-rest/pages/user/[id].tsx

@@ -5,14 +5,15 @@ import useSwr from 'swr'
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 export default function UserPage() {
-  const router = useRouter()
-  const { data, error } = useSwr<User>(
-    router.query.id ? `/api/user/${router.query.id}` : null,
+  const { query } = useRouter()
+  const { data, error, isLoading } = useSwr<User>(
+    query.id ? `/api/user/${query.id}` : null,
     fetcher
   )
 
   if (error) return <div>Failed to load user</div>
-  if (!data) return <div>Loading...</div>
+  if (isLoading) return <div>Loading...</div>
+  if (!data) return null
 
   return <div>{data.name}</div>
 }

examples/api-routes/interfaces/index.ts

@@ -8,3 +8,7 @@ export type Person = {
   eye_color: string
   gender: string
 }
+
+export type ResponseError = {
+  message: string
+}

examples/api-routes/package.json

@@ -9,7 +9,7 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "^1.3.0"
+    "swr": "^2.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",

examples/api-routes/pages/api/people/[id].ts

@@ -1,21 +1,17 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 import { people } from '../../../data'
-import { Person } from '../../../interfaces'
-
-type ResponseError = {
-  message: string
-}
+import type { Person, ResponseError } from '../../../interfaces'
 
 export default function personHandler(
   req: NextApiRequest,
   res: NextApiResponse<Person | ResponseError>
 ) {
   const { query } = req
   const { id } = query
-  const filtered = people.filter((p) => p.id === id)
+  const person = people.find((p) => p.id === id)
 
   // User with id exists
-  return filtered.length > 0
-    ? res.status(200).json(filtered[0])
+  return person
+    ? res.status(200).json(person)
     : res.status(404).json({ message: `User with id: ${id} not found.` })
 }

examples/api-routes/pages/index.tsx

@@ -1,18 +1,19 @@
 import useSWR from 'swr'
 import PersonComponent from '../components/Person'
-import { Person } from '../interfaces'
+import type { Person } from '../interfaces'
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 export default function Index() {
-  const { data, error } = useSWR('/api/people', fetcher)
+  const { data, error, isLoading } = useSWR<Person[]>('/api/people', fetcher)
 
   if (error) return <div>Failed to load</div>
-  if (!data) return <div>Loading...</div>
+  if (isLoading) return <div>Loading...</div>
+  if (!data) return null
 
   return (
     <ul>
-      {data.map((p: Person) => (
+      {data.map((p) => (
         <PersonComponent key={p.id} person={p} />
       ))}
     </ul>

examples/api-routes/pages/person/[id].tsx

@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router'
 import useSWR from 'swr'
+import type { Person, ResponseError } from '../../interfaces'
 
 const fetcher = async (url: string) => {
   const res = await fetch(url)
@@ -11,15 +12,16 @@ const fetcher = async (url: string) => {
   return data
 }
 
-export default function Person() {
+export default function PersonPage() {
   const { query } = useRouter()
-  const { data, error } = useSWR(
-    () => query.id && `/api/people/${query.id}`,
-    fetcher
-  )
+  const { data, error, isLoading, isValidating } = useSWR<
+    Person,
+    ResponseError
+  >(() => (query.id ? `/api/people/${query.id}` : null), fetcher)
 
   if (error) return <div>{error.message}</div>
-  if (!data) return <div>Loading...</div>
+  if (isLoading) return <div>Loading...</div>
+  if (!data) return null
 
   return (
     <table>
@@ -36,13 +38,21 @@ export default function Person() {
       </thead>
       <tbody>
         <tr>
-          <td>{data.name}</td>
-          <td>{data.height}</td>
-          <td>{data.mass}</td>
-          <td>{data.hair_color}</td>
-          <td>{data.skin_color}</td>
-          <td>{data.eye_color}</td>
-          <td>{data.gender}</td>
+          {isValidating ? (
+            <td colSpan={7} align="center">
+              Validating...
+            </td>
+          ) : (
+            <>
+              <td>{data.name}</td>
+              <td>{data.height}</td>
+              <td>{data.mass}</td>
+              <td>{data.hair_color}</td>
+              <td>{data.skin_color}</td>
+              <td>{data.eye_color}</td>
+              <td>{data.gender}</td>
+            </>
+          )}
         </tr>
       </tbody>
     </table>

examples/blog-with-comment/package.json

@@ -17,7 +17,7 @@
     "react-dom": "^18.2.0",
     "remark": "^14.0.2",
     "remark-html": "^15.0.1",
-    "swr": "^1.3.0"
+    "swr": "^2.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.11.5",

examples/with-axiom/package.json

@@ -10,7 +10,7 @@
     "next-axiom": "^0.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "^1.3.0"
+    "swr": "^2.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.5",

examples/with-cookie-auth-fauna/package.json

@@ -11,6 +11,6 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "0.2.3"
+    "swr": "^2.0.0"
   }
 }

examples/with-fauna/package.json

@@ -15,7 +15,7 @@
     "next": "latest",
     "react": "18.1.0",
     "react-dom": "18.1.0",
-    "swr": "1.3.0"
+    "swr": "^2.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.7",

examples/with-iron-session/package.json

@@ -11,7 +11,7 @@
     "octokit": "^1.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "^1.0.1"
+    "swr": "^2.0.0"
   },
   "devDependencies": {
     "@octokit/types": "^6.34.0",

examples/with-magic/package.json

@@ -13,6 +13,6 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "0.5.5"
+    "swr": "^2.0.0"
   }
 }

examples/with-mongodb-mongoose/package.json

@@ -10,6 +10,6 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "^1.0.1"
+    "swr": "^2.0.0"
   }
 }

examples/with-mongodb-mongoose/pages/[id]/edit.js

@@ -10,10 +10,15 @@ const fetcher = (url) =>
 const EditPet = () => {
   const router = useRouter()
   const { id } = router.query
-  const { data: pet, error } = useSWR(id ? `/api/pets/${id}` : null, fetcher)
+  const {
+    data: pet,
+    error,
+    isLoading,
+  } = useSWR(id ? `/api/pets/${id}` : null, fetcher)
 
   if (error) return <p>Failed to load</p>
-  if (!pet) return <p>Loading...</p>
+  if (isLoading) return <p>Loading...</p>
+  if (!pet) return null
 
   const petForm = {
     name: pet.name,

examples/with-mux-video/package.json

@@ -12,7 +12,7 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "^1.3.0"
+    "swr": "^2.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.11.10",

examples/with-neo4j/package.json

@@ -10,6 +10,6 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "0.3.9"
+    "swr": "^2.0.0"
   }
 }

examples/with-neo4j/pages/actor/[name].js

@@ -9,10 +9,11 @@ import Footer from '../../components/footer'
 export default function Actor() {
   const router = useRouter()
   const { name } = router.query
-  const { data, error } = useSWR(`/api/actors/${name}`, fetcher)
+  const { data, error, isLoading } = useSWR(`/api/actors/${name}`, fetcher)
 
   if (error) return <div>failed to load</div>
-  if (!data) return <div>loading...</div>
+  if (isLoading) return <div>loading...</div>
+  if (!data) return null
 
   return (
     <div className="container">

examples/with-neo4j/pages/index.js

@@ -6,10 +6,11 @@ import Header from '../components/header'
 import Footer from '../components/footer'
 
 export default function Home() {
-  const { data, error } = useSWR('/api/movies', fetcher)
+  const { data, error, isLoading } = useSWR('/api/movies', fetcher)
 
   if (error) return <div>failed to load</div>
-  if (!data) return <div>loading...</div>
+  if (isLoading) return <div>loading...</div>
+  if (!data) return null
 
   return (
     <div className="container">