Add example on how to use fetch + mutate to prefetch data

examples/prefetch/README.md

@@ -0,0 +1,38 @@
+# Prefetch
+
+## One-Click Deploy
+
+Deploy your own SWR project with ZEIT Now.
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/swr/tree/master/examples/prefetch)
+
+## How to Use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/swr/tar.gz/master | tar -xz --strip=2 swr-master/examples/prefetch
+cd prefetch
+```
+
+Install it and run:
+
+```bash
+yarn
+yarn dev
+# or
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/home) ([download](https://zeit.co/download))
+
+```
+now
+```
+
+## The Idea behind the Example
+
+This examples show how you could combine fetch and mutate to prefetch data to be used by SWR later.
+
+In the example the list of projects page will prefetch every project data, and the project details will prefetch the list of projects in case you accessed directly the details without seeing the list before.

examples/prefetch/libs/fetch.js

@@ -0,0 +1,6 @@
+import fetch from 'isomorphic-unfetch'
+
+export default async function (...args) {
+  const res = await fetch(...args)
+  return await res.json()
+}

examples/prefetch/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "prefetch",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "isomorphic-unfetch": "3.0.0",
+    "next": "9.1.1",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "swr": "latest"
+  },
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build"
+  }
+}

examples/prefetch/pages/[user]/[repo].js

@@ -0,0 +1,29 @@
+import React from 'react'
+import Link from 'next/link'
+import fetch from '../../libs/fetch'
+
+import useSWR, { mutate } from 'swr'
+
+export default () => {
+  const id = typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''
+  const { data } = useSWR('/api/data?id=' + id, fetch)
+
+  React.useEffect(() => {
+    fetch('/api/data')
+      .then(projects => mutate('/api/data', projects, false))
+  }, []);
+
+  return <div style={{ textAlign: 'center' }}>
+    <h1>{id}</h1>
+    {
+      data ? <div>
+        <p>forks: {data.forks_count}</p>
+        <p>stars: {data.stargazers_count}</p>
+        <p>watchers: {data.watchers}</p>
+      </div> : 'loading...'
+    }
+    <br />
+    <br />
+    <Link href="/"><a>Back</a></Link>
+  </div>
+}

examples/prefetch/pages/api/data.js

@@ -0,0 +1,23 @@
+import fetch from 'isomorphic-unfetch'
+
+const projects = [
+  'facebook/flipper', 'vuejs/vuepress', 'rust-lang/rust', 'zeit/next.js'
+]
+
+export default (req, res) => {
+  if (req.query.id) {
+    // a slow endpoint for getting repo data
+    fetch(`https://api.github.com/repos/${req.query.id}`)
+      .then(resp => resp.json())
+      .then(data => {
+        setTimeout(() => {
+          res.json(data)
+        }, 2000)
+      })
+
+    return
+  }
+  setTimeout(() => {
+    res.json(projects)
+  }, 2000)
+}

examples/prefetch/pages/index.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import Link from 'next/link'
+import fetch from '../libs/fetch'
+
+import useSWR, { mutate } from 'swr'
+
+export default () => {
+  const { data } = useSWR('/api/data', fetch)
+
+  React.useEffect(() => {
+    if (!data) return
+    if (data.length === 0) return
+    data.forEach(project => {
+      fetch(`https://api.github.com/repos/${project}`)
+        .then(projectData => {
+          mutate(`/api/data?id=${project}`, projectData, false)
+        })
+    })
+  }, [data]);
+
+  return <div style={{ textAlign: 'center' }}>
+    <h1>Trending Projects</h1>
+    <div>
+    {
+      data ? data.map(project => 
+        <p key={project}><Link href='/[user]/[repo]' as={`/${project}`}><a>{project}</a></Link></p>
+      ) : 'loading...'
+    }
+    </div>
+  </div>
+}