From eb24e6ffc61d53e3ad98134d8b1d45e2f8700acc Mon Sep 17 00:00:00 2001
From: Jayden Seric <me@jaydenseric.com>
Date: Wed, 9 Jan 2019 20:24:38 +1100
Subject: [PATCH] Add an example with graphql-react (#5984)

Adds an example with [`graphql-react`](https://github.com/jaydenseric/graphql-react), using [`next-graphql-react`](https://github.com/jaydenseric/next-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.
---
 examples/with-graphql-react/README.md      | 38 ++++++++++++++++++++++
 examples/with-graphql-react/package.json   | 18 ++++++++++
 examples/with-graphql-react/pages/_app.js  | 19 +++++++++++
 examples/with-graphql-react/pages/index.js | 31 ++++++++++++++++++
 4 files changed, 106 insertions(+)
 create mode 100644 examples/with-graphql-react/README.md
 create mode 100644 examples/with-graphql-react/package.json
 create mode 100644 examples/with-graphql-react/pages/_app.js
 create mode 100644 examples/with-graphql-react/pages/index.js

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 (
+      <Container>
+        <Provider value={graphql}>
+          <Component {...pageProps} />
+        </Provider>
+      </Container>
+    )
+  }
+}
+
+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 () => (
+  <Query
+    loadOnMount
+    loadOnReset
+    fetchOptionsOverride={options => {
+      options.url = 'https://graphql-pokemon.now.sh'
+    }}
+    operation={{
+      query: /* GraphQL */ `
+        {
+          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>
+)