Better Pagination support, better examples

Author: tannerlinsley

.babelrc

@@ -3,9 +3,11 @@
     [
       "@babel/env",
       {
-        "modules": false
+        "modules": false,
+        "exclude": ["@babel/plugin-transform-regenerator"]
       }
     ],
     "@babel/react"
-  ]
+  ],
+  "plugins": ["module:fast-async"]
 }

README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run dev` or `yarn dev`

examples/api-hooks/README.md

@@ -0,0 +1,9 @@
+import { useQuery } from 'react-query'
+
+import fetch from '../libs/fetch'
+
+function useProjects() {
+  return useQuery('projects', () => fetch('/api/data'))
+}
+
+export default useProjects

examples/api-hooks/hooks/use-projects.js

@@ -0,0 +1,9 @@
+import { useQuery } from 'react-query'
+
+import fetch from '../libs/fetch'
+
+function useRepository(id) {
+  return useQuery(['repository', { id }], () => fetch('/api/data?id=' + id))
+}
+
+export default useRepository

examples/api-hooks/hooks/use-repository.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/api-hooks/libs/fetch.js

@@ -0,0 +1,16 @@
+{
+  "name": "basic",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "isomorphic-unfetch": "3.0.0",
+    "next": "9.1.2",
+    "react-query": "latest"
+  },
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build"
+  }
+}

examples/api-hooks/package.json

@@ -0,0 +1,32 @@
+import React from 'react'
+import Link from 'next/link'
+import useRepository from '../../hooks/use-repository'
+
+export default () => {
+  const id =
+    typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''
+  const { data, isLoading, isFetching } = useRepository(id)
+
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <h1>{id}</h1>
+      {isLoading ? (
+        'Loading...'
+      ) : data ? (
+        <>
+          <div>
+            <p>forks: {data.forks_count}</p>
+            <p>stars: {data.stargazers_count}</p>
+            <p>watchers: {data.watchers}</p>
+          </div>
+          <div>{isFetching ? 'Background Updating...' : ' '}</div>
+        </>
+      ) : null}
+      <br />
+      <br />
+      <Link href="/">
+        <a>Back</a>
+      </Link>
+    </div>
+  )
+}

examples/api-hooks/pages/[user]/[repo].js

@@ -0,0 +1,26 @@
+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/api-hooks/pages/api/data.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import Link from 'next/link'
+import useProjects from '../hooks/use-projects'
+
+export default () => {
+  const { data, isLoading, isFetching } = useProjects()
+
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <h1>Trending Projects</h1>
+      <div>
+        {isLoading ? (
+          'Loading...'
+        ) : data ? (
+          <>
+            <div>
+              {data.map(project => (
+                <p key={project}>
+                  <Link href="/[user]/[repo]" as={`/${project}`}>
+                    <a>{project}</a>
+                  </Link>
+                </p>
+              ))}
+            </div>
+            <div>{isFetching ? 'Background Updating...' : ' '}</div>
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}