Update example to use nuxt module for apollo

examples/vue-apollo/README.md

@@ -1,7 +1,5 @@
-# WIP
-
 # Vue-Apollo with Nuxt.js
 
-https://nuxtjs.org/examples/vue-apollo
+https://github.com/nuxt-community/apollo-module
 
 https://github.com/Akryum/vue-apollo

examples/vue-apollo/middleware/apollo.js

@@ -1,7 +0,0 @@
-export default async function ({ isServer, apolloProvider }) {
-  if (isServer) {
-    const ensureReady = apolloProvider.collect()
-    console.log('Call ensureReady!', ensureReady())
-    await ensureReady()
-  }
-}

examples/vue-apollo/nuxt.config.js

@@ -1,12 +1,8 @@
 module.exports = {
-  build: {
-    vendor: ['vue-apollo', 'apollo-client']
-  },
-  router: {
-    middleware: 'apollo'
-  },
-  plugins: [
-    // Will inject the plugin in the $root app and also in the context as `apolloProvider`
-    { src: '~plugins/apollo.js', injectAs: 'apolloProvider' }
-  ]
+  modules: ['@nuxtjs/apollo'],
+  apollo: {
+    clients: {
+      default: 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu'
+    }
+  }
 }

examples/vue-apollo/package.json

@@ -1,13 +1,13 @@
 {
-  "name": "nuxt-i18n",
+  "name": "nuxt-vue-apollo",
   "dependencies": {
-    "apollo-client": "^1.0.3",
+    "apollo-client": "^1.9.0-1",
     "nuxt": "latest",
-    "vue-apollo": "^2.1.0-beta.2"
+    "vue-apollo": "^2.1.0-beta.19"
   },
   "scripts": {
-    "dev": "node server.js",
+    "dev": "nuxt",
     "build": "nuxt build",
-    "start": "cross-env NODE_ENV=production node server.js"
+    "start": "nuxt start"
   }
 }

examples/vue-apollo/pages/car/_id.vue

@@ -0,0 +1,41 @@
+<template>
+  <div v-if="Car">
+    <h3>{{ Car.make }} {{ Car.model }}</h3>
+    <p>{{ formatCurrency(Car.price) }}</p>
+    <img :src="Car.photoURL" :alt="`${Car.model} photo`">
+    <p><nuxt-link to="/">Home page</nuxt-link></p>
+  </div>
+</template>
+
+<script>
+import car from '~/queries/car'
+
+export default {
+  apollo: {
+    Car: {
+      query: car,
+      prefetch: ({ route }) => ({ id: route.params.id }),
+      variables() {
+        return { id: this.$route.params.id }
+      }
+    }
+  },
+  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>

examples/vue-apollo/pages/index.vue

@@ -12,21 +12,14 @@
 </template>
 
 <script>
-import client from '~plugins/apollo'
-import gql from 'graphql-tag'
+import allCars from '~/queries/allCars'
 
 export default {
   apollo: {
-    allCars: gql`
-      query {
-        allCars {
-          id
-          make
-          model
-          year
-        }
-      }
-    `
+    allCars: {
+      prefetch: true,
+      query: allCars
+    }
   }
 }
 </script>

examples/vue-apollo/plugins/apollo.js

@@ -1,21 +0,0 @@
-import 'babel-polyfill'
-import Vue from 'vue'
-import VueApollo from 'vue-apollo'
-import { ApolloClient, createNetworkInterface } from 'apollo-client'
-
-Vue.use(VueApollo)
-
-const API_ENDPOINT = 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu'
-
-const apolloClient = new ApolloClient({
-  networkInterface: createNetworkInterface({
-    uri: API_ENDPOINT,
-    transportBatching: true
-  })
-})
-
-const apolloProvider = new VueApollo({
-  defaultClient: apolloClient
-})
-
-export default apolloProvider

examples/vue-apollo/queries/allCars.gql

@@ -0,0 +1,8 @@
+{
+  allCars {
+    id
+    make
+    model
+    year
+  }
+}

examples/vue-apollo/queries/car.gql

@@ -0,0 +1,8 @@
+query Car($id: ID!) {
+  Car(id: $id) {
+    make
+    model
+    photoURL
+    price
+  }
+}

examples/vue-apollo/server.js

@@ -1,27 +0,0 @@
-const Nuxt = require('../../')
-const app = require('express')()
-const host = process.env.HOST || '127.0.0.1'
-const port = process.env.PORT || 3000
-
-global.fetch = require('node-fetch')
-
-// Import and Set Nuxt.js options
-let config = require('./nuxt.config.js')
-config.dev = !(process.env.NODE_ENV === 'production')
-
-// Init Nuxt.js
-const nuxt = new Nuxt(config)
-app.use(nuxt.render)
-
-// Build only in dev mode
-if (config.dev) {
-  nuxt.build()
-  .catch((error) => {
-    console.error(error) // eslint-disable-line no-console
-    process.exit(1)
-  })
-}
-
-// Listen the server
-app.listen(port, host)
-console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console