From ef5ebd04174870d9271e3da5dcd557c4ac3c6821 Mon Sep 17 00:00:00 2001
From: Charlie Hield <charles.hield@gmail.com>
Date: Tue, 11 Apr 2017 13:15:31 -0500
Subject: [PATCH 1/2] Add Nuxt + Apollo example

---
 examples/with-apollo/README.md           | 29 ++++++++++++
 examples/with-apollo/layouts/default.vue | 19 ++++++++
 examples/with-apollo/package.json        | 24 ++++++++++
 examples/with-apollo/pages/car/_id.vue   | 53 +++++++++++++++++++++
 examples/with-apollo/pages/index.vue     | 59 ++++++++++++++++++++++++
 examples/with-apollo/plugins/apollo.js   | 15 ++++++
 6 files changed, 199 insertions(+)
 create mode 100644 examples/with-apollo/README.md
 create mode 100644 examples/with-apollo/layouts/default.vue
 create mode 100644 examples/with-apollo/package.json
 create mode 100644 examples/with-apollo/pages/car/_id.vue
 create mode 100644 examples/with-apollo/pages/index.vue
 create mode 100644 examples/with-apollo/plugins/apollo.js

diff --git a/examples/with-apollo/README.md b/examples/with-apollo/README.md
new file mode 100644
index 0000000000..d4600552fb
--- /dev/null
+++ b/examples/with-apollo/README.md
@@ -0,0 +1,29 @@
+# nuxt-with-apollo
+
+> Nuxt.js with Apollo (GraphQL client)
+
+[DEMO](https://nuxt-apollo.now.sh/)
+
+## About
+
+This project uses [Apollo](http://www.apollodata.com/) as a GraphQL client and [Graphcool](https://www.graph.cool/) as a hosted GraphQL backend.
+
+## Getting Started
+
+Download this example [or clone the repo](https://github.com/nuxt/nuxt.js):
+
+```bash
+curl https://codeload.github.com/nuxt/nuxt.js/tar.gz/master | tar -xz --strip=2 nuxt.js-master/examples/with-apollo
+cd with-apollo
+```
+
+Install and run:
+
+```bash
+npm install
+npm run dev
+
+# or with Yarn
+yarn
+yarn dev
+```
diff --git a/examples/with-apollo/layouts/default.vue b/examples/with-apollo/layouts/default.vue
new file mode 100644
index 0000000000..62147ffc78
--- /dev/null
+++ b/examples/with-apollo/layouts/default.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h1 @click="$router.push('/')">Nuxt.js + Apollo</h1>
+    <nuxt/>
+  </div>
+</template>
+
+<style>
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  padding: 30px;
+}
+
+h1 {
+  cursor: pointer;
+}
+
+</style>
diff --git a/examples/with-apollo/package.json b/examples/with-apollo/package.json
new file mode 100644
index 0000000000..c3bb76f0f4
--- /dev/null
+++ b/examples/with-apollo/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "nuxt-apollo",
+  "version": "1.0.0",
+  "description": "Nuxt.js with Apollo",
+  "author": "Charlie Hield",
+  "license": "MIT",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  },
+  "keywords": [
+    "nuxt",
+    "vue",
+    "apollo",
+    "graphql"
+  ],
+  "dependencies": {
+    "apollo-client": "^1.0.2",
+    "graphql-tag": "^2.0.0",
+    "isomorphic-fetch": "^2.2.1",
+    "nuxt": "^0.10.5"
+  }
+}
diff --git a/examples/with-apollo/pages/car/_id.vue b/examples/with-apollo/pages/car/_id.vue
new file mode 100644
index 0000000000..4c6728feb6
--- /dev/null
+++ b/examples/with-apollo/pages/car/_id.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h3>{{ car.make }} {{ car.model }}</h3>
+    <p>{{ formatCurrency(car.price) }}</p>
+    <img :src="car.photoURL" :alt="`${car.model} photo`">
+  </div>
+</template>
+
+<script>
+import client from '~plugins/apollo'
+import gql from 'graphql-tag'
+
+export default {
+
+  async asyncData({ params }) {
+    let { data } = await client.query({
+      query: gql`
+        query {
+          Car(id: "${params.id}") {
+            make
+            model
+            photoURL
+            price
+          }
+        }
+      `
+    })
+    return {
+      car: data.Car
+    }
+  },
+
+  methods: {
+    formatCurrency(num) {
+      const formatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 2
+      })
+      return formatter.format(num)
+    }
+  }
+
+}
+</script>
+
+<style>
+
+img {
+  max-width: 600px;
+}
+
+</style>
diff --git a/examples/with-apollo/pages/index.vue b/examples/with-apollo/pages/index.vue
new file mode 100644
index 0000000000..b8c6a7d7df
--- /dev/null
+++ b/examples/with-apollo/pages/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <h3>Cars</h3>
+    <ul>
+      <li v-for="car in cars">
+        <nuxt-link :to="`car/${car.id}`">
+          {{ car.year }} {{ car.make }} {{ car.model }}
+        </nuxt-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import client from '~plugins/apollo'
+import gql from 'graphql-tag'
+
+export default {
+
+  async asyncData() {
+    let { data } = await client.query({
+      query: gql`
+        query {
+          allCars {
+            id
+            make
+            model
+            year
+          }
+        }
+      `
+    })
+    return {
+      cars: data.allCars
+    }
+  }
+
+}
+</script>
+
+<style>
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  line-height: 1.6;
+}
+
+a {
+  text-decoration: none;
+  color: #3498DB;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+}
+
+</style>
diff --git a/examples/with-apollo/plugins/apollo.js b/examples/with-apollo/plugins/apollo.js
new file mode 100644
index 0000000000..f328ff1fc7
--- /dev/null
+++ b/examples/with-apollo/plugins/apollo.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import { ApolloClient, createNetworkInterface } from 'apollo-client'
+import 'isomorphic-fetch'
+
+// Created with Graphcool - https://www.graph.cool/
+const API_ENDPOINT = 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu'
+
+const apolloClient = new ApolloClient({
+  networkInterface: createNetworkInterface({
+    uri: API_ENDPOINT,
+    transportBatching: true
+  })
+})
+
+export default apolloClient

From 1e56eae2cf4cbcb7dcaa8721aa13618df9358a37 Mon Sep 17 00:00:00 2001
From: Charlie Hield <charles.hield@gmail.com>
Date: Tue, 11 Apr 2017 13:36:20 -0500
Subject: [PATCH 2/2] Fix CI 404 should display error

---
 examples/with-apollo/layouts/error.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 examples/with-apollo/layouts/error.vue

diff --git a/examples/with-apollo/layouts/error.vue b/examples/with-apollo/layouts/error.vue
new file mode 100644
index 0000000000..192163dd31
--- /dev/null
+++ b/examples/with-apollo/layouts/error.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="container">
+    <h3 v-if="error.statusCode === 404">Page not found</h3>
+    <h3 v-else>An error occured</h3>
+    <nuxt-link to="/">&larr; Home page</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['error']
+}
+</script>