diff --git a/examples/with-graphql-react/README.md b/examples/with-graphql-react/README.md
new file mode 100644
index 00000000..9f632472
--- /dev/null
+++ b/examples/with-graphql-react/README.md
@@ -0,0 +1,38 @@
+# Next.js example with [`graphql-react`](https://github.com/jaydenseric/graphql-react)
+
+[`graphql-react`](https://github.com/jaydenseric/graphql-react) is a lightweight but powerful [GraphQL](https://graphql.org) client for React; the first [Relay](https://facebook.github.io/relay) and [Apollo](https://apollographql.com/docs/react) alternative with server side rendering.
+
+See how it can be used in a Next.js app for GraphQL queries with server side rendering and client side data hydration:
+
+- In `pages/_app.js` a [custom `App` component](https://github.com/zeit/next.js#custom-app) is decorated with the [`withGraphQL`](https://github.com/jaydenseric/next-graphql-react/#function-withgraphql) [higher-order component](https://reactjs.org/docs/higher-order-components) from [`next-graphql-react`](https://github.com/jaydenseric/next-graphql-react), generating a `graphql` prop that populates the [`Provider`](https://github.com/jaydenseric/graphql-react#function-provider) component from [`graphql-react`](https://github.com/jaydenseric/graphql-react).
+- In `pages/index.js` the [`Query`](https://github.com/jaydenseric/graphql-react#function-query) component from [`graphql-react`](https://github.com/jaydenseric/graphql-react) is used to query the [GraphQL Pokémon API](https://github.com/lucasbento/graphql-pokemon) and show a picture of Pikachu.
+
+## Setup
+
+1. Download the example:
+
+ ```sh
+ curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-graphql-react
+ ```
+
+2. Change directory to it:
+
+ ```sh
+ cd with-graphql-react
+ ```
+
+3. Install it:
+
+ ```sh
+ npm install
+ ```
+
+4. Run it:
+
+ ```sh
+ npm run dev
+ ```
+
+## Deploy
+
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-graphl-react)
diff --git a/examples/with-graphql-react/package.json b/examples/with-graphql-react/package.json
new file mode 100644
index 00000000..3653444d
--- /dev/null
+++ b/examples/with-graphql-react/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "next-graphql-react-example",
+ "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"
+ },
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ }
+}
diff --git a/examples/with-graphql-react/pages/_app.js b/examples/with-graphql-react/pages/_app.js
new file mode 100644
index 00000000..d56bb204
--- /dev/null
+++ b/examples/with-graphql-react/pages/_app.js
@@ -0,0 +1,19 @@
+import 'cross-fetch/polyfill'
+import { Provider } from 'graphql-react'
+import { withGraphQL } from 'next-graphql-react'
+import App, { Container } from 'next/app'
+
+class CustomApp extends App {
+ render () {
+ const { Component, pageProps, graphql } = this.props
+ return (
+
+
+
+
+
+ )
+ }
+}
+
+export default withGraphQL(CustomApp)
diff --git a/examples/with-graphql-react/pages/index.js b/examples/with-graphql-react/pages/index.js
new file mode 100644
index 00000000..d0a78cac
--- /dev/null
+++ b/examples/with-graphql-react/pages/index.js
@@ -0,0 +1,31 @@
+import { Query } from 'graphql-react'
+
+export default () => (
+ {
+ options.url = 'https://graphql-pokemon.now.sh'
+ }}
+ operation={{
+ query: /* GraphQL */ `
+ {
+ pokemon(name: "Pikachu") {
+ name
+ image
+ }
+ }
+ `
+ }}
+ >
+ {({ data, loading }) =>
+ data ? (
+
+ ) : loading ? (
+ Loading…
+ ) : (
+ Error!
+ )
+ }
+
+)