Update to Next v8.0 example on with-graphql-react (#6454)

I'm working on examples/with-graphql-react changes to:
- Next v7 to v8.0 and update dependencies
- fix some errors for the change of graphql-react API

examples/with-graphql-react/package.json

@@ -3,12 +3,12 @@
   "private": true,
   "license": "ISC",
   "dependencies": {
-    "cross-fetch": "^3.0.0",
-    "graphql-react": "^6.0.0",
-    "next": "^7.0.0",
-    "next-graphql-react": "^1.0.1",
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0"
+    "cross-fetch": "^3.0.1",
+    "graphql-react": "^8.0.2",
+    "next": "^8.0.3",
+    "next-graphql-react": "^3.0.0",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3"
   },
   "scripts": {
     "dev": "next",

examples/with-graphql-react/pages/_app.js

 import 'cross-fetch/polyfill'
-import { Provider } from 'graphql-react'
-import { withGraphQL } from 'next-graphql-react'
+import { GraphQLContext } from 'graphql-react'
+import { withGraphQLApp } from 'next-graphql-react'
 import App, { Container } from 'next/app'
 
 class CustomApp extends App {
@@ -8,12 +8,12 @@ class CustomApp extends App {
     const { Component, pageProps, graphql } = this.props
     return (
       <Container>
-        <Provider value={graphql}>
+        <GraphQLContext.Provider value={graphql}>
           <Component {...pageProps} />
-        </Provider>
+        </GraphQLContext.Provider>
       </Container>
     )
   }
 }
 
-export default withGraphQL(CustomApp)
+export default withGraphQLApp(CustomApp)

examples/with-graphql-react/pages/index.js

-import { Query } from 'graphql-react'
+import { useGraphQL } from 'graphql-react'
 
-export default () => (
-  <Query
-    loadOnMount
-    loadOnReset
-    fetchOptionsOverride={options => {
+export default () => {
+  const { loading, cacheValue = {} } = useGraphQL({
+    fetchOptionsOverride (options) {
       options.url = 'https://graphql-pokemon.now.sh'
-    }}
-    operation={{
-      query: /* GraphQL */ `
+    },
+    operation: { query: `
         {
           pokemon(name: "Pikachu") {
             name
             image
           }
         }
-      `
-    }}
-  >
-    {({ data, loading }) =>
-      data ? (
-        <img src={data.pokemon.image} alt={data.pokemon.name} />
-      ) : loading ? (
-        <p>Loading…</p>
-      ) : (
-        <p>Error!</p>
-      )
-    }
-  </Query>
-)
+     ` }
+  })
+
+  const { data } = cacheValue
+  return data ? (
+    <img src={data.pokemon.image} alt={data.pokemon.name} />
+  ) : loading ? (
+    <p>Loading…</p>
+  ) : (
+    <p>Error!</p>
+  )
+}