Skip to content

Commit 2a5863b

Browse files
jaydensericjaydenseric
committed
Improved the example web app.
1 parent 68251c6 commit 2a5863b

18 files changed

+296
-75
lines changed

‎changelog.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Replaced [`isomorphic-unfetch`](https://npm.im/isomorphic-unfetch) with the more updated [`cross-fetch`](https://npm.im/cross-fetch).
77
* Added a `fetchError` `Query` render function argument, enabling graceful caching and handling of errors in situations such as when a global `fetch` API is unavailable or a relative URL is used on the sever.
88
* Use `.prettierignore` to defer `package.json` formatting to npm.
9-
* Improved example project environment config and deployed it to [graphql-react.now.sh](https://graphql-react.now.sh).
9+
* Improved the example web app and deployed it to [graphql-react.now.sh](https://graphql-react.now.sh).
1010

1111
## 1.0.0-alpha.3
1212

‎example/components/create-timer.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ const CreateTimer = () => (
88
fetchOptionsOverride={timeFetchOptionsOverride}
99
query={
1010
/* GraphQL */ `
11-
mutation createTimer {
12-
createTimer {
13-
id
11+
mutation createTimer {
12+
createTimer {
13+
id
14+
}
1415
}
15-
}
16-
`
16+
`
1717
}
1818
>
1919
{({ loading, data, load }) => (
2020
<section>
21-
{data && <p>Timer ID “{data.createTimer.id}” created.</p>}
21+
{data && <p>Created timer ID “{data.createTimer.id}”.</p>}
2222
{loading ? <Loader /> : <button onClick={load}>Create timer</button>}
2323
</section>
2424
)}

‎example/components/error-message.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const ErrorMessage = ({ heading, children }) => (
2+
<aside>
3+
<h1>{heading}</h1>
4+
{children}
5+
<style jsx>{`
6+
aside {
7+
border-left: 2px solid;
8+
padding-left: 0.85em;
9+
font-size: 90%;
10+
color: #e10098;
11+
}
12+
`}</style>
13+
</aside>
14+
)
15+
16+
export default ErrorMessage

‎example/components/fetch-error.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import ErrorMessage from './error-message'
2+
13
const FetchError = ({ error }) => (
2-
<aside>
3-
<h1>Fetch error</h1>
4+
<ErrorMessage heading="Fetch error">
45
<p>{error}</p>
5-
</aside>
6+
</ErrorMessage>
67
)
78

89
export default FetchError

‎example/components/graphql-errors.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import ErrorMessage from './error-message'
2+
13
const GraphQLErrors = ({ errors }) => (
2-
<aside>
3-
<h1>GraphQL errors</h1>
4+
<ErrorMessage heading="GraphQL errors">
45
<ul>
56
{errors.map(({ message }, index) => <li key={index}>{message}</li>)}
67
</ul>
7-
</aside>
8+
</ErrorMessage>
89
)
910

1011
export default GraphQLErrors

‎example/components/http-error.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import ErrorMessage from './error-message'
2+
13
const HTTPError = ({ error: { status, statusText } }) => (
2-
<aside>
3-
<h1>Error: {status}</h1>
4+
<ErrorMessage heading={`HTTP error: ${status}`}>
45
<p>{statusText}</p>
5-
</aside>
6+
</ErrorMessage>
67
)
78

89
export default HTTPError

‎example/components/page.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Fragment } from 'react'
2+
import Head from 'next/head'
3+
4+
const Page = ({ title, description, children }) => (
5+
<Fragment>
6+
<Head>
7+
<title>{title}</title>
8+
{description && <meta name="description" content={description} />}
9+
<meta
10+
name="viewport"
11+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
12+
/>
13+
<meta name="theme-color" content="white" />
14+
<meta property="og:title" content={title} />
15+
{description && <meta property="og:description" content={description} />}
16+
<meta
17+
property="og:image"
18+
content={`${process.env.DOMAIN}/static/thumbnail.png`}
19+
/>
20+
<link rel="icon" sizes="192x192" href="/static/icon.png" />
21+
<link rel="apple-touch-icon" href="/static/apple-touch-icon.png" />
22+
<link rel="manifest" href="/static/manifest.webmanifest" />
23+
</Head>
24+
<style jsx global>{`
25+
html {
26+
text-size-adjust: none;
27+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
28+
Arial, sans-serif;
29+
}
30+
body {
31+
box-sizing: border-box;
32+
margin: 0;
33+
padding: 2em 1.5em 4em;
34+
min-width: 320px;
35+
max-width: 36em;
36+
font-size: 120%;
37+
}
38+
`}</style>
39+
{children}
40+
</Fragment>
41+
)
42+
43+
export default Page

‎example/components/parse-error.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import ErrorMessage from './error-message'
2+
13
const ParseError = ({ error }) => (
2-
<aside>
3-
<h1>Parse error</h1>
4+
<ErrorMessage heading="Parse error">
45
<p>{error}</p>
5-
</aside>
6+
</ErrorMessage>
67
)
78

89
export default ParseError

‎example/components/pokemon.js

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import { Fragment } from 'react'
21
import { Query } from 'graphql-react'
2+
import { pokemonFetchOptionsOverride } from '../api-fetch-options'
33
import Loader from './loader'
44
import FetchError from './fetch-error'
55
import HTTPError from './http-error'
66
import ParseError from './parse-error'
77
import GraphQLErrors from './graphql-errors'
8-
import { pokemonFetchOptionsOverride } from '../api-fetch-options'
98

109
const Pokemon = ({ name }) => (
1110
<Query
@@ -15,41 +14,57 @@ const Pokemon = ({ name }) => (
1514
fetchOptionsOverride={pokemonFetchOptionsOverride}
1615
query={
1716
/* GraphQL */ `
18-
query pokemon($name: String!) {
19-
pokemon(name: $name) {
20-
number
21-
classification
22-
image
17+
query pokemon($name: String!) {
18+
pokemon(name: $name) {
19+
number
20+
classification
21+
image
22+
}
2323
}
24-
}
25-
`
24+
`
2625
}
2726
>
2827
{({ loading, fetchError, httpError, parseError, graphQLErrors, data }) => (
2928
<article>
30-
<h1>{name}</h1>
31-
{data && (
32-
<Fragment>
33-
<img src={data.pokemon.image} width="100" alt={name} />
29+
{loading && <Loader />}
30+
{fetchError && <FetchError error={fetchError} />}
31+
{httpError && <HTTPError error={httpError} />}
32+
{parseError && <ParseError error={parseError} />}
33+
{graphQLErrors && <GraphQLErrors errors={graphQLErrors} />}
34+
{data &&
35+
data.pokemon && (
3436
<table>
3537
<tbody>
3638
<tr>
3739
<th>Number</th>
3840
<td>{data.pokemon.number}</td>
3941
</tr>
42+
<tr>
43+
<th>Name</th>
44+
<td>{name}</td>
45+
</tr>
4046
<tr>
4147
<th>Classification</th>
4248
<td>{data.pokemon.classification}</td>
4349
</tr>
50+
<tr>
51+
<th>Image</th>
52+
<td>
53+
<img src={data.pokemon.image} width="50" alt={name} />
54+
</td>
55+
</tr>
4456
</tbody>
57+
<style jsx>{`
58+
th {
59+
text-align: right;
60+
}
61+
th,
62+
td {
63+
vertical-align: top;
64+
}
65+
`}</style>
4566
</table>
46-
</Fragment>
47-
)}
48-
{loading && <Loader />}
49-
{fetchError && <FetchError error={fetchError} />}
50-
{httpError && <HTTPError error={httpError} />}
51-
{parseError && <ParseError error={parseError} />}
52-
{graphQLErrors && <GraphQLErrors errors={graphQLErrors} />}
67+
)}
5368
</article>
5469
)}
5570
</Query>

‎example/components/timers.js

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
import { Query } from 'graphql-react'
2+
import { timeFetchOptionsOverride } from '../api-fetch-options'
23
import Loader from './loader'
34
import FetchError from './fetch-error'
45
import HTTPError from './http-error'
56
import ParseError from './parse-error'
67
import GraphQLErrors from './graphql-errors'
7-
import { timeFetchOptionsOverride } from '../api-fetch-options'
88

99
const Timer = ({ id, milliseconds }) => (
1010
<Query
1111
fetchOptionsOverride={timeFetchOptionsOverride}
1212
variables={{ id }}
1313
query={
1414
/* GraphQL */ `
15-
query timer($id: ID!) {
16-
timer(timerId: $id) {
17-
id
18-
milliseconds
15+
query timer($id: ID!) {
16+
timer(timerId: $id) {
17+
id
18+
milliseconds
19+
}
1920
}
20-
}
21-
`
21+
`
2222
}
2323
>
2424
{({
@@ -31,16 +31,18 @@ const Timer = ({ id, milliseconds }) => (
3131
data
3232
}) => (
3333
<tr>
34+
<td>{id}</td>
35+
<td style={{ textAlign: 'right' }}>
36+
{data ? data.timer.milliseconds : milliseconds}
37+
</td>
3438
<td>
3539
<button disabled={loading} onClick={load}>
36-
Load
40+
↻
3741
</button>
3842
{(fetchError || httpError || parseError || graphQLErrors) && (
3943
<strong>Error!</strong>
4044
)}
4145
</td>
42-
<td>{id}</td>
43-
<td>{data ? data.timer.milliseconds : milliseconds}</td>
4446
</tr>
4547
)}
4648
</Query>
@@ -53,39 +55,42 @@ const Timers = () => (
5355
fetchOptionsOverride={timeFetchOptionsOverride}
5456
query={
5557
/* GraphQL */ `
56-
{
57-
timers {
58-
id
59-
milliseconds
58+
{
59+
timers {
60+
id
61+
milliseconds
62+
}
6063
}
61-
}
62-
`
64+
`
6365
}
6466
>
6567
{({ loading, fetchError, httpError, parseError, graphQLErrors, data }) => (
6668
<section>
69+
{loading && <Loader />}
70+
{fetchError && <FetchError error={fetchError} />}
71+
{httpError && <HTTPError error={httpError} />}
72+
{parseError && <ParseError error={parseError} />}
73+
{graphQLErrors && <GraphQLErrors errors={graphQLErrors} />}
6774
{data &&
6875
(data.timers.length ? (
6976
<table>
7077
<thead>
7178
<tr>
72-
<th>Load</th>
73-
<th>Id</th>
74-
<th>Milliseconds</th>
79+
<th style={{ textAlign: 'left' }}>Timer ID</th>
80+
<th style={{ textAlign: 'right' }} colSpan="2">
81+
Duration (ms)
82+
</th>
7583
</tr>
7684
</thead>
7785
<tbody>
7886
{data.timers.map(timer => <Timer key={timer.id} {...timer} />)}
7987
</tbody>
8088
</table>
8189
) : (
82-
<p>Create a first timer.</p>
90+
<p>
91+
<em>Create a first timer…</em>
92+
</p>
8393
))}
84-
{loading && <Loader />}
85-
{fetchError && <FetchError error={fetchError} />}
86-
{httpError && <HTTPError error={httpError} />}
87-
{parseError && <ParseError error={parseError} />}
88-
{graphQLErrors && <GraphQLErrors errors={graphQLErrors} />}
8994
</section>
9095
)}
9196
</Query>

0 commit comments

Comments
 (0)