small

Author: luo0412

_fetch/rapidjs/.gitkeep

@@ -0,0 +1,15 @@
+import useSWR from 'swr'
+import ReactDOM from "react-dom"
+import request from 'umi-request'
+
+function App () {
+    const { data, error } = useSWR('/mock/user.json', request)
+
+    if (error) return <div>failed to load</div>
+    if (!data) return <div>loading...</div>
+
+    return <div>hello {data.data.name}!</div>
+}
+
+ReactDOM.render(<App />, mountNode);
+

_fetch/swr/README.md

@@ -0,0 +1,16 @@
+import useSWR from 'swr'
+import ReactDOM from "react-dom"
+import fetch from 'unfetch'
+
+const fetcher = url => fetch(url).then(r => r.json())
+
+function App () {
+    const { data, error } = useSWR('/mock/user.json', fetcher)
+
+    if (error) return <div>failed to load</div>
+    if (!data) return <div>loading...</div>
+    return <div>hello {data.data.name}!</div>
+}
+
+ReactDOM.render(<App />, mountNode);
+

_fetch/swr/combine-umi-request.js

@@ -0,0 +1,21 @@
+import useSWR from 'swr'
+import ReactDOM from "react-dom"
+
+const fetcher = url => fetch(url).then(r => r.json())
+
+function App () {
+    const { data: users } = useSWR('/mock/users.json', fetcher)
+    const { data: user } = useSWR(() => '/mock/user.json?name=' + users.data[0].name, fetcher)
+
+    if (!user) {
+        return <>loading...</>
+    }
+
+    return <ul>
+        { users.data.map((item) => <li key={item.name} style={{
+            color: item.name === user.data.name ? 'red' : 'blue'
+        }}>{item.name}</li>) }
+    </ul>
+}
+
+ReactDOM.render(<App />, mountNode);

_fetch/swr/combine-unfetch.js

@@ -0,0 +1,31 @@
+import useSWR, { SWRConfig } from 'swr'
+import ReactDOM from 'react-dom'
+
+function Dashboard () {
+    const { data: user } = useSWR('/mock/users.json')
+
+    // const { data: user } = useSWR('/mock/users.json', { refreshInterval: 0 }) // --> don't refresh
+
+    if (!user) { return <>loading...</> }
+
+    return <ul>
+        { user.data.map((user) => <li key={user.name}>{user.name}</li>) }
+    </ul>
+}
+
+function App () {
+    return (
+        <SWRConfig
+            value={{
+                refreshInterval: 3000,
+                // 窗口聚焦时自动重新验证
+                revalidateOnFocus: true,
+                fetcher: (...args) => fetch(...args).then(res => res.json())
+            }}
+        >
+            <Dashboard />
+        </SWRConfig>
+    )
+}
+
+ReactDOM.render(<App />, mountNode)

_fetch/swr/dependent-fetching.js

@@ -0,0 +1,24 @@
+import { request } from 'graphql-request'
+import useSWR from "swr";
+import ReactDOM from 'react-dom'
+
+const API = 'https://api.graph.cool/simple/v1/movies'
+const fetcher = query => request(API, query)
+
+function App () {
+    const { data: resp, error } = useSWR(
+        `{
+      Movie(title: "Inception") {
+        releaseDate
+        actors {
+          name
+        }
+      }
+    }`,
+        fetcher
+    )
+    if (!resp) return <div>loading...</div>
+    return <div>{ JSON.stringify(resp) } </div>
+}
+
+ReactDOM.render(<App />, mountNode)

_fetch/swr/global-configuration.js

@@ -0,0 +1,12 @@
+import useSWR from 'swr'
+import ReactDOM from "react-dom"
+
+function App () {
+    const { data, error } = useSWR('/mock/user.json', (url) => fetch(url).then(r => r.json()))
+
+    if (error) return <div>failed to load</div>
+    if (!data) return <div>loading...</div>
+    return <div>hello {data.data.name}!</div>
+}
+
+ReactDOM.render(<App />, mountNode);

_fetch/swr/index.js

@@ -0,0 +1,24 @@
+import { Suspense } from 'react'
+import useSWR from 'swr'
+import ReactDOM from 'react-dom'
+
+import fetch from 'unfetch'
+
+const fetcher = url => fetch(url).then(r => r.json())
+
+
+function Profile () {
+    const { data } = useSWR('/mock/user.json', fetcher, { suspense: true })
+    console.log(data)
+    return <div>hello, { data.data.name }</div>
+}
+
+function App () {
+    return (
+        <Suspense fallback={<div>loading...</div>}>
+            <Profile/>
+        </Suspense>
+    )
+}
+
+ReactDOM.render(<App/>, mountNode)