Skip to content

Commit b3a6313

Browse files
ludofischerludofischer
authored
fix(examples): make with-graphql-hooks run correctly again (vercel#20929)
Fixes vercel#20474 * Switch API url to working URL used in apollo example * Update deps * Move styled jsx out of the way to avoid demonstrating too many unfamiliar concepts at once dev, build and start work now.
1 parent 4dc0779 commit b3a6313

File tree

8 files changed

+122
-116
lines changed

8 files changed

+122
-116
lines changed

Diff for: ‎examples/with-graphql-hooks/components/app.js

+1-42
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,3 @@
11
export default function App({ children }) {
2-
return (
3-
<main>
4-
{children}
5-
<style jsx global>{`
6-
* {
7-
font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
8-
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
9-
monospace, serif;
10-
}
11-
body {
12-
margin: 0;
13-
padding: 25px 50px;
14-
}
15-
a {
16-
color: #22bad9;
17-
}
18-
p {
19-
font-size: 14px;
20-
line-height: 24px;
21-
}
22-
article {
23-
margin: 0 auto;
24-
max-width: 650px;
25-
}
26-
button {
27-
align-items: center;
28-
background-color: #22bad9;
29-
border: 0;
30-
color: white;
31-
display: flex;
32-
padding: 5px 7px;
33-
}
34-
button:active {
35-
background-color: #1b9db7;
36-
transition: background-color 0.3s;
37-
}
38-
button:focus {
39-
outline: none;
40-
}
41-
`}</style>
42-
</main>
43-
)
2+
return <main>{children}</main>
443
}

Diff for: ‎examples/with-graphql-hooks/components/post-list.js

+5-43
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import ErrorMessage from './error-message'
44
import PostUpvoter from './post-upvoter'
55
import Submit from './submit'
66

7-
export const allPostsQuery = `
7+
export const ALL_POSTS_QUERY = `
88
query allPosts($first: Int!, $skip: Int!) {
9-
allPosts(orderBy: createdAt_DESC, first: $first, skip: $skip) {
9+
allPosts(orderBy: { createdAt: desc }, first: $first, skip: $skip) {
1010
id
1111
title
1212
votes
@@ -32,16 +32,16 @@ export const allPostsQueryOptions = (skip = 0) => ({
3232
export default function PostList() {
3333
const [skip, setSkip] = useState(0)
3434
const { loading, error, data, refetch } = useQuery(
35-
allPostsQuery,
35+
ALL_POSTS_QUERY,
3636
allPostsQueryOptions(skip)
3737
)
3838

3939
if (error) return <ErrorMessage message="Error loading posts." />
4040
if (!data) return <div>Loading</div>
4141

4242
const { allPosts, _allPostsMeta } = data
43-
4443
const areMorePosts = allPosts.length < _allPostsMeta.count
44+
4545
return (
4646
<>
4747
<Submit
@@ -68,51 +68,13 @@ export default function PostList() {
6868
))}
6969
</ul>
7070
{areMorePosts ? (
71-
<button onClick={() => setSkip(skip + 10)}>
71+
<button className="more" onClick={() => setSkip(skip + 10)}>
7272
{' '}
7373
{loading && !data ? 'Loading...' : 'Show More'}{' '}
7474
</button>
7575
) : (
7676
''
7777
)}
78-
<style jsx>{`
79-
section {
80-
padding-bottom: 20px;
81-
}
82-
li {
83-
display: block;
84-
margin-bottom: 10px;
85-
}
86-
div {
87-
align-items: center;
88-
display: flex;
89-
}
90-
a {
91-
font-size: 14px;
92-
margin-right: 10px;
93-
text-decoration: none;
94-
padding-bottom: 0;
95-
border: 0;
96-
}
97-
span {
98-
font-size: 14px;
99-
margin-right: 5px;
100-
}
101-
ul {
102-
margin: 0;
103-
padding: 0;
104-
}
105-
button:before {
106-
align-self: center;
107-
border-style: solid;
108-
border-width: 6px 4px 0 4px;
109-
border-color: #ffffff transparent transparent transparent;
110-
content: '';
111-
height: 0;
112-
margin-right: 5px;
113-
width: 0;
114-
}
115-
`}</style>
11678
</section>
11779
</>
11880
)

Diff for: ‎examples/with-graphql-hooks/components/post-upvoter.js

+4-24
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import React from 'react'
22
import { useMutation } from 'graphql-hooks'
33

44
const UPDATE_POST = `
5-
mutation updatePost($id: ID!, $votes: Int) {
6-
updatePost(id: $id, votes: $votes) {
5+
mutation votePost($id: String!) {
6+
votePost(id: $id) {
77
id
8-
__typename
98
votes
9+
__typename
1010
}
1111
}
1212
`
@@ -16,12 +16,12 @@ export default function PostUpvoter({ votes, id, onUpdate }) {
1616

1717
return (
1818
<button
19+
className="upvote"
1920
onClick={async () => {
2021
try {
2122
const result = await updatePost({
2223
variables: {
2324
id,
24-
votes: votes + 1,
2525
},
2626
})
2727

@@ -32,26 +32,6 @@ export default function PostUpvoter({ votes, id, onUpdate }) {
3232
}}
3333
>
3434
{votes}
35-
<style jsx>{`
36-
button {
37-
background-color: transparent;
38-
border: 1px solid #e4e4e4;
39-
color: #000;
40-
}
41-
button:active {
42-
background-color: transparent;
43-
}
44-
button:before {
45-
align-self: center;
46-
border-color: transparent transparent #000000 transparent;
47-
border-style: solid;
48-
border-width: 0 4px 6px 4px;
49-
content: '';
50-
height: 0;
51-
margin-right: 5px;
52-
width: 0;
53-
}
54-
`}</style>
5535
</button>
5636
)
5737
}

Diff for: ‎examples/with-graphql-hooks/lib/graphql-client.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ let graphQLClient
77
function createClient(initialState) {
88
return new GraphQLClient({
99
ssrMode: typeof window === 'undefined',
10-
url: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
10+
url: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
1111
cache: memCache({ initialState }),
1212
})
1313
}

Diff for: ‎examples/with-graphql-hooks/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
},
99
"license": "MIT",
1010
"dependencies": {
11-
"graphql-hooks": "^4.5.0",
12-
"graphql-hooks-memcache": "^1.3.3",
11+
"graphql-hooks": "^5.1.0",
12+
"graphql-hooks-memcache": "^2.1.0",
1313
"next": "latest",
1414
"prop-types": "^15.7.2",
15-
"react": "^16.8.2",
16-
"react-dom": "^16.8.2"
15+
"react": "^17.0.1",
16+
"react-dom": "^17.0.1"
1717
}
1818
}

Diff for: ‎examples/with-graphql-hooks/pages/_app.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import '../styles.css'
12
import { ClientContext } from 'graphql-hooks'
23
import { useGraphQLClient } from '../lib/graphql-client'
34

Diff for: ‎examples/with-graphql-hooks/pages/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import graphQLRequest from '../lib/graphql-request'
33
import App from '../components/app'
44
import Header from '../components/header'
55
import PostList, {
6-
allPostsQuery,
6+
ALL_POSTS_QUERY,
77
allPostsQueryOptions,
88
} from '../components/post-list'
99

@@ -19,7 +19,7 @@ export default function Home() {
1919
export async function getStaticProps() {
2020
const client = initializeGraphQL()
2121

22-
await graphQLRequest(client, allPostsQuery, allPostsQueryOptions())
22+
await graphQLRequest(client, ALL_POSTS_QUERY, allPostsQueryOptions())
2323

2424
return {
2525
props: {

Diff for: ‎examples/with-graphql-hooks/styles.css

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
* {
2+
font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
3+
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace,
4+
serif;
5+
}
6+
body {
7+
margin: 0;
8+
padding: 25px 50px;
9+
}
10+
a {
11+
color: #22bad9;
12+
}
13+
p {
14+
font-size: 14px;
15+
line-height: 24px;
16+
}
17+
article {
18+
margin: 0 auto;
19+
max-width: 650px;
20+
}
21+
form {
22+
border-bottom: 1px solid #ececec;
23+
padding-bottom: 20px;
24+
margin-bottom: 20px;
25+
}
26+
h1 {
27+
font-size: 20px;
28+
}
29+
input {
30+
display: block;
31+
margin-bottom: 10px;
32+
}
33+
section {
34+
padding-bottom: 20px;
35+
}
36+
li {
37+
display: block;
38+
margin-bottom: 10px;
39+
}
40+
div {
41+
align-items: center;
42+
display: flex;
43+
}
44+
a {
45+
font-size: 14px;
46+
margin-right: 10px;
47+
text-decoration: none;
48+
padding-bottom: 0;
49+
border: 0;
50+
}
51+
span {
52+
font-size: 14px;
53+
margin-right: 5px;
54+
}
55+
ul {
56+
margin: 0;
57+
padding: 0;
58+
}
59+
60+
button:before {
61+
align-self: center;
62+
border-style: solid;
63+
content: '';
64+
height: 0;
65+
margin-right: 5px;
66+
width: 0;
67+
}
68+
69+
button {
70+
align-items: center;
71+
background-color: #22bad9;
72+
border: 0;
73+
color: white;
74+
display: flex;
75+
padding: 5px 7px;
76+
}
77+
button:active {
78+
background-color: #1b9db7;
79+
transition: background-color 0.3s;
80+
}
81+
82+
button:focus {
83+
outline: none;
84+
}
85+
86+
button:active {
87+
background-color: transparent;
88+
}
89+
90+
.upvote {
91+
background-color: transparent;
92+
border: 1px solid #e4e4e4;
93+
color: #000;
94+
}
95+
96+
.upvote:before {
97+
border-width: 0 4px 6px 4px;
98+
border-color: transparent transparent #000000 transparent;
99+
}
100+
101+
.more:before {
102+
border-width: 6px 4px 0 4px;
103+
border-color: #ffffff transparent transparent transparent;
104+
}

0 commit comments

Comments
 (0)