diff --git a/examples/with-graphql-react/package.json b/examples/with-graphql-react/package.json
index 3653444d3938f829dcae6ff04c838ed769d9f47b..fbf60e1eecc024a931b4996a4d340c96dd167828 100644
--- a/examples/with-graphql-react/package.json
+++ b/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",
diff --git a/examples/with-graphql-react/pages/_app.js b/examples/with-graphql-react/pages/_app.js
index d56bb2048f48d122fd63d1934a57bd7de372ea25..2f9d8f1df6129cd552a59c5792f4be09933797e0 100644
--- a/examples/with-graphql-react/pages/_app.js
+++ b/examples/with-graphql-react/pages/_app.js
@@ -1,6 +1,6 @@
 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)
diff --git a/examples/with-graphql-react/pages/index.js b/examples/with-graphql-react/pages/index.js
index d0a78cac0733359c745b032e3df27f25d24f424a..01b93f6be9e505bf9c60beff612c12b1572dbb31 100644
--- a/examples/with-graphql-react/pages/index.js
+++ b/examples/with-graphql-react/pages/index.js
@@ -1,31 +1,26 @@
-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>
+  )
+}