}> = "fetch"
5 |
6 | let sleeper = (ms, x) => Promise.make((resolve, _) => setTimeout(_ => resolve(x), ms)->ignore)
7 |
8 | let fetcher = key => {
9 | fetch("https://catfact.ninja" ++ key)
10 | ->Promise.then(res => res["json"]())
11 | ->Promise.thenResolve(res => res.fact)
12 | }
13 |
14 | let renderData = data => ("Cat fact: " ++ data)->React.string
15 | let renderError = (err: SwrEasy.error) => {("Error: " ++ err.message)->React.string}
16 |
17 | module App = {
18 | @react.component
19 | let make = () => {
20 | open React
21 | open SwrEasy
22 |
23 | let {result, mutate} = useSWR("/fact", fetcher)
24 |
25 | let btns =
26 | <>
27 |
28 |
29 |
39 |
40 |
41 | let render = switch result {
42 | | Pending => {"Loading..."->string}
43 | | Refresh(Ok(data)) =>
44 | <>
45 | {renderData(data)}
46 | {"Revalidating..."->string}
47 |
48 | | Refresh(Error(err)) =>
49 | <>
50 | {renderError(err)}
51 | {"Validating..."->string}
52 |
53 | | Replete(Ok(data)) =>
54 | <>
55 | {renderData(data)}
56 | {btns}
57 |
58 | | Replete(Error(err)) =>
59 | <>
60 | {renderError(err)}
61 | {btns}
62 |
63 | | _ =>
64 | <>
65 | {"Cat fact not loaded"->string}
66 |
67 |
68 |
69 |
70 | }
71 |
72 |
73 | {render}
74 |
75 | {"Click on "->string}
76 | {"this"->string}
77 | {" link to see the JavaScript equivalent of this code."->string}
78 |
79 |