demo for zeit/swr#230

examples/server-render/components/nav.js

@@ -0,0 +1,11 @@
+export default function Nav() {
+  return (<>
+    <nav>
+      <h1>
+        <a href="https://github.com/zeit/swr/issues/230">zeit/swr#230 demo</a>
+      </h1>
+      <a href="/demo">demo</a> and <a href="/workaround">workaround</a>
+    </nav>
+    <br />
+  </>)
+}

examples/server-render/components/pokemon.js

@@ -0,0 +1,20 @@
+export default function Pokemon({ item, revalidate }) {
+  if (!item || !item.name) return (<div>loading...</div>);
+  return (
+    <div>
+      <h2>{item.name}</h2>
+      <div>
+        <figure>
+          <img src={item.sprites.front_default} width="96" height="96" />
+        </figure>
+        <p>height: {item.height}</p>
+        <p>weight: {item.weight}</p>
+        <p>abilities: {item.abilities.map(({ ability }) => ability.name).join(', ')}</p>
+        {revalidate
+          ? <p><button onClick={revalidate}>revalidate</button></p>
+          : <></>
+        }
+      </div>
+    </div>
+  )
+}

examples/server-render/package.json

@@ -4,11 +4,12 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
+    "idx": "2.5.6",
     "isomorphic-unfetch": "3.0.0",
     "next": "9.1.1",
     "react": "16.11.0",
     "react-dom": "16.11.0",
-    "swr": "latest"
+    "swr": "0.1.16"
   },
   "scripts": {
     "dev": "next",

examples/server-render/pages/demo.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Link from 'next/link'
+import fetcher from '../libs/fetcher'
+import Nav from '../components/nav'
+import Pokemon from '../components/pokemon'
+
+import useSWR from 'swr'
+
+const api = {
+  list: () => 'https://pokeapi.co/api/v2/pokemon/',
+  item: (pokemon) => `https://pokeapi.co/api/v2/pokemon/${pokemon}`,
+}
+
+export default function Home(props) {
+  const { data: list } = useSWR(api.list(), fetcher, { initialData: props.list })
+  const [selected, setSelected] = React.useState(list.results[0].name);
+  const { data: item, revalidate } = useSWR(() => api.item(selected), fetcher, { initialData: props.item })
+
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <Nav />
+      <h2>Demo</h2>
+      <div>
+        <label htmlFor="pokemon-select">Choose a pokemon:</label>
+        <select name="pets" id="pet-select" defaultValue={selected} onChange={e => { setSelected(e.target.value); }}>
+          {list.results.map(pokemon => (
+            <option value={pokemon.name} key={pokemon.name}>
+              {pokemon.name}
+            </option>
+          ))}
+        </select>
+        <Pokemon item={item} revalidate={revalidate} />
+      </div>
+    </div>
+  )
+}
+
+Home.getInitialProps = async () => {
+  const list = await fetcher(api.list())
+  const item = await fetcher(api.item(list.results[0].name))
+  return { list, item }
+}

examples/server-render/pages/index.js

@@ -1,32 +1,11 @@
+import React from 'react';
 import Link from 'next/link'
-import fetcher from '../libs/fetcher'
-
-import useSWR from 'swr'
-
-const URL = 'https://pokeapi.co/api/v2/pokemon/'
-
-export default function Home({ initialData }) {
-  const { data } = useSWR(URL, fetcher, { initialData })
+import Nav from '../components/nav'
 
+export default function Home(props) {
   return (
-    <div style={{ textAlign: 'center' }}>
-      <h1>Trending Projects</h1>
-      <div>
-        {data && data.results
-          ? data.results.map(pokemon => (
-              <p key={pokemon.name}>
-                <Link href="/[pokemon]" as={`/${pokemon.name}`}>
-                  <a>{pokemon.name}</a>
-                </Link>
-              </p>
-            ))
-          : 'loading...'}
-      </div>
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <Nav />
     </div>
   )
 }
-
-Home.getInitialProps = async () => {
-  const data = await fetcher(URL)
-  return { initialData: data }
-}

examples/server-render/pages/workaround.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import Link from 'next/link'
+import fetcher from '../libs/fetcher'
+import Nav from '../components/nav'
+import Pokemon from '../components/pokemon'
+
+import useSWR from 'swr'
+
+const useFixedSWR = (key, fetcher, {initialData, ...config} = {}) => {
+  const initial = React.useRef(initialData);
+  React.useEffect(() => {
+    if(key){
+      initial.current = undefined;
+    }
+  }, [key]);
+  return useSWR(key, fetcher, {...config, initialData: initial.current});
+}
+
+const api = {
+  list: () => 'https://pokeapi.co/api/v2/pokemon/',
+  item: (pokemon) => `https://pokeapi.co/api/v2/pokemon/${pokemon}`,
+}
+
+export default function Home(props) {
+  const { data: list } = useFixedSWR(api.list(), fetcher, { initialData: props.list })
+  const [selected, setSelected] = React.useState(list.results[0].name);
+  const { data: item } = useFixedSWR(api.item(selected), fetcher, { initialData: props.item })
+
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      <Nav />
+      <h2>Workaround</h2>
+      <div>
+        <label htmlFor="pokemon-select">Choose a pokemon:</label>
+        <select name="pets" id="pet-select" defaultValue={selected} onChange={e => { setSelected(e.target.value); }}>
+          {list.results.map(pokemon => (
+            <option value={pokemon.name} key={pokemon.name}>
+              {pokemon.name}
+            </option>
+          ))}
+        </select>
+        <Pokemon item={item} />
+        <hr/>
+        <h3>Workaround itself:</h3>
+        <pre><code>{`
+
+const useFixedSWR = (key, fetcher, {initialData, ...config} = {}) => {
+  const initial = React.useRef(initialData);
+  React.useEffect(() => {
+    if(key){
+      initial.current = undefined;
+    }
+  }, [key]);
+  return useSWR(key, fetcher, {...config, initialData: initial.current});
+}
+
+        `}</code></pre>
+      </div>
+    </div>
+  )
+}
+
+Home.getInitialProps = async () => {
+  const list = await fetcher(api.list())
+  const item = await fetcher(api.item(list.results[0].name))
+  return { list, item }
+}