fix(examples): make with-graphql-hooks run correctly again

Fixes #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.
vercel · Jan 10, 2021 · c12e466 · c12e466
1 parent 90ad2cb
commit c12e466
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 116 deletions.
diff --git a/examples/with-graphql-hooks/components/#app.js# b/examples/with-graphql-hooks/components/#app.js#
@@ -0,0 +1,44 @@
+export default function App({ children }) {
+  return (
+    <main>
+      {children}
+      <style jsx global>{`
+        * {
+          font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
+            'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
+            monospace, serif;
+        }
+        body {
+          margin: 0;
+          padding: 25px 50px;
+        }
+        a {
+          color: #22bad9;
+        }
+        p {
+          font-size: 14px;
+          line-height: 24px;
+        }
+        article {
+          margin: 0 auto;
+          max-width: 650px;
+        }
+        button {
+          align-items: center;
+          background-color: #22bad9;
+          border: 0;
+          color: white;
+          display: flex;
+          padding: 5px 7px;
+        }
+        button:active {
+          background-color: #1b9db7;
+          transition: background-color 0.3s;
+        }
+        button:focus {
+          outline: none;
+        }
+      `}</style>
+    </main>
+  )
+}
diff --git a/examples/with-graphql-hooks/components/app.js b/examples/with-graphql-hooks/components/app.js
@@ -1,44 +1,3 @@
 export default function App({ children }) {
-  return (
-    <main>
-      {children}
-      <style jsx global>{`
-        * {
-          font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
-            'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
-            monospace, serif;
-        }
-        body {
-          margin: 0;
-          padding: 25px 50px;
-        }
-        a {
-          color: #22bad9;
-        }
-        p {
-          font-size: 14px;
-          line-height: 24px;
-        }
-        article {
-          margin: 0 auto;
-          max-width: 650px;
-        }
-        button {
-          align-items: center;
-          background-color: #22bad9;
-          border: 0;
-          color: white;
-          display: flex;
-          padding: 5px 7px;
-        }
-        button:active {
-          background-color: #1b9db7;
-          transition: background-color 0.3s;
-        }
-        button:focus {
-          outline: none;
-        }
-      `}</style>
-    </main>
-  )
+  return <main>{children}</main>
 }
diff --git a/examples/with-graphql-hooks/components/post-list.js b/examples/with-graphql-hooks/components/post-list.js
@@ -4,9 +4,9 @@ import ErrorMessage from './error-message'
 import PostUpvoter from './post-upvoter'
 import Submit from './submit'
 
-export const allPostsQuery = `
+export const ALL_POSTS_QUERY = `
   query allPosts($first: Int!, $skip: Int!) {
-    allPosts(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+    allPosts(orderBy: { createdAt: desc }, first: $first, skip: $skip) {
       id
       title
       votes
@@ -32,16 +32,16 @@ export const allPostsQueryOptions = (skip = 0) => ({
 export default function PostList() {
   const [skip, setSkip] = useState(0)
   const { loading, error, data, refetch } = useQuery(
-    allPostsQuery,
+    ALL_POSTS_QUERY,
     allPostsQueryOptions(skip)
   )
 
   if (error) return <ErrorMessage message="Error loading posts." />
   if (!data) return <div>Loading</div>
 
   const { allPosts, _allPostsMeta } = data
-
   const areMorePosts = allPosts.length < _allPostsMeta.count
+
   return (
     <>
       <Submit
@@ -68,51 +68,13 @@ export default function PostList() {
           ))}
         </ul>
         {areMorePosts ? (
-          <button onClick={() => setSkip(skip + 10)}>
+          <button className="more" onClick={() => setSkip(skip + 10)}>
             {' '}
             {loading && !data ? 'Loading...' : 'Show More'}{' '}
           </button>
         ) : (
           ''
         )}
-        <style jsx>{`
-          section {
-            padding-bottom: 20px;
-          }
-          li {
-            display: block;
-            margin-bottom: 10px;
-          }
-          div {
-            align-items: center;
-            display: flex;
-          }
-          a {
-            font-size: 14px;
-            margin-right: 10px;
-            text-decoration: none;
-            padding-bottom: 0;
-            border: 0;
-          }
-          span {
-            font-size: 14px;
-            margin-right: 5px;
-          }
-          ul {
-            margin: 0;
-            padding: 0;
-          }
-          button:before {
-            align-self: center;
-            border-style: solid;
-            border-width: 6px 4px 0 4px;
-            border-color: #ffffff transparent transparent transparent;
-            content: '';
-            height: 0;
-            margin-right: 5px;
-            width: 0;
-          }
-        `}</style>
       </section>
     </>
   )

diff --git a/examples/with-graphql-hooks/components/post-upvoter.js b/examples/with-graphql-hooks/components/post-upvoter.js
@@ -2,11 +2,11 @@ import React from 'react'
 import { useMutation } from 'graphql-hooks'
 
 const UPDATE_POST = `
-  mutation updatePost($id: ID!, $votes: Int) {
-    updatePost(id: $id, votes: $votes) {
+  mutation votePost($id: String!) {
+    votePost(id: $id) {
       id
-      __typename
       votes
+      __typename
     }
   }
 `
@@ -16,12 +16,12 @@ export default function PostUpvoter({ votes, id, onUpdate }) {
 
   return (
     <button
+      className="upvote"
       onClick={async () => {
         try {
           const result = await updatePost({
             variables: {
               id,
-              votes: votes + 1,
             },
           })
 
@@ -32,26 +32,6 @@ export default function PostUpvoter({ votes, id, onUpdate }) {
       }}
     >
       {votes}
-      <style jsx>{`
-        button {
-          background-color: transparent;
-          border: 1px solid #e4e4e4;
-          color: #000;
-        }
-        button:active {
-          background-color: transparent;
-        }
-        button:before {
-          align-self: center;
-          border-color: transparent transparent #000000 transparent;
-          border-style: solid;
-          border-width: 0 4px 6px 4px;
-          content: '';
-          height: 0;
-          margin-right: 5px;
-          width: 0;
-        }
-      `}</style>
     </button>
   )
 }
diff --git a/examples/with-graphql-hooks/lib/graphql-client.js b/examples/with-graphql-hooks/lib/graphql-client.js
@@ -7,7 +7,7 @@ let graphQLClient
 function createClient(initialState) {
   return new GraphQLClient({
     ssrMode: typeof window === 'undefined',
-    url: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
+    url: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
     cache: memCache({ initialState }),
   })
 }

diff --git a/examples/with-graphql-hooks/package.json b/examples/with-graphql-hooks/package.json
@@ -8,11 +8,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "graphql-hooks": "^4.5.0",
-    "graphql-hooks-memcache": "^1.3.3",
+    "graphql-hooks": "^5.1.0",
+    "graphql-hooks-memcache": "^2.1.0",
     "next": "latest",
     "prop-types": "^15.7.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }
diff --git a/examples/with-graphql-hooks/pages/_app.js b/examples/with-graphql-hooks/pages/_app.js
@@ -1,3 +1,4 @@
+import '../styles.css'
 import { ClientContext } from 'graphql-hooks'
 import { useGraphQLClient } from '../lib/graphql-client'
 

diff --git a/examples/with-graphql-hooks/pages/index.js b/examples/with-graphql-hooks/pages/index.js
@@ -3,7 +3,7 @@ import graphQLRequest from '../lib/graphql-request'
 import App from '../components/app'
 import Header from '../components/header'
 import PostList, {
-  allPostsQuery,
+  ALL_POSTS_QUERY,
   allPostsQueryOptions,
 } from '../components/post-list'
 
@@ -19,7 +19,7 @@ export default function Home() {
 export async function getStaticProps() {
   const client = initializeGraphQL()
 
-  await graphQLRequest(client, allPostsQuery, allPostsQueryOptions())
+  await graphQLRequest(client, ALL_POSTS_QUERY, allPostsQueryOptions())
 
   return {
     props: {

diff --git a/examples/with-graphql-hooks/styles.css b/examples/with-graphql-hooks/styles.css
@@ -0,0 +1,104 @@
+* {
+  font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
+    'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace,
+    serif;
+}
+body {
+  margin: 0;
+  padding: 25px 50px;
+}
+a {
+  color: #22bad9;
+}
+p {
+  font-size: 14px;
+  line-height: 24px;
+}
+article {
+  margin: 0 auto;
+  max-width: 650px;
+}
+form {
+  border-bottom: 1px solid #ececec;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+h1 {
+  font-size: 20px;
+}
+input {
+  display: block;
+  margin-bottom: 10px;
+}
+section {
+  padding-bottom: 20px;
+}
+li {
+  display: block;
+  margin-bottom: 10px;
+}
+div {
+  align-items: center;
+  display: flex;
+}
+a {
+  font-size: 14px;
+  margin-right: 10px;
+  text-decoration: none;
+  padding-bottom: 0;
+  border: 0;
+}
+span {
+  font-size: 14px;
+  margin-right: 5px;
+}
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+button:before {
+  align-self: center;
+  border-style: solid;
+  content: '';
+  height: 0;
+  margin-right: 5px;
+  width: 0;
+}
+
+button {
+  align-items: center;
+  background-color: #22bad9;
+  border: 0;
+  color: white;
+  display: flex;
+  padding: 5px 7px;
+}
+button:active {
+  background-color: #1b9db7;
+  transition: background-color 0.3s;
+}
+
+button:focus {
+  outline: none;
+}
+
+button:active {
+  background-color: transparent;
+}
+
+.upvote {
+  background-color: transparent;
+  border: 1px solid #e4e4e4;
+  color: #000;
+}
+
+.upvote:before {
+  border-width: 0 4px 6px 4px;
+  border-color: transparent transparent #000000 transparent;
+}
+
+.more:before {
+  border-width: 6px 4px 0 4px;
+  border-color: #ffffff transparent transparent transparent;
+}