From 3e817a771e7282a90df1bcf6ceaa74bbbfa8ec7c Mon Sep 17 00:00:00 2001
From: Ben Ramey <ben.ramey@gmail.com>
Date: Sat, 26 May 2018 18:27:46 -0500
Subject: [PATCH] Working connection to app sync

---
 frontend/config/AppSync.js        |  6 ++++++
 frontend/package.json             |  8 ++++++++
 frontend/src/App.vue              |  9 +++++++--
 frontend/src/components/Start.vue | 15 ++++++++++++++-
 frontend/src/main.js              | 25 +++++++++++++++++++++++++
 5 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 frontend/config/AppSync.js

diff --git a/frontend/config/AppSync.js b/frontend/config/AppSync.js
new file mode 100644
index 0000000..bebdf22
--- /dev/null
+++ b/frontend/config/AppSync.js
@@ -0,0 +1,6 @@
+export default {
+    "graphqlEndpoint": "https://wggm57lvdfd5jne623gpegt53e.appsync-api.us-east-2.amazonaws.com/graphql",
+    "region": "us-east-2",
+    "authenticationType": "API_KEY",
+    "apiKey": "da2-pkudpp62hrdbjntqgr4nmioafm"
+}
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index b9d069e..8dac26b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,7 +15,15 @@
     "deploy": "aws s3 sync .\\dist\\ s3://lunchrun-public --delete"
   },
   "dependencies": {
+    "apollo-cache-inmemory": "^1.2.1",
+    "apollo-client": "^2.3.1",
+    "apollo-link": "^1.2.2",
+    "apollo-link-http": "^1.5.4",
+    "aws-appsync": "^1.0.22",
+    "graphql": "^0.13.2",
+    "graphql-tag": "^2.9.2",
     "vue": "^2.5.2",
+    "vue-apollo": "^3.0.0-beta.14",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e17cc36..2f963f8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,12 +1,17 @@
 <template>
-  <div id="app">
+  <div id="app" v-if="hydrated">
     <router-view/>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  data: () => ({ hydrated: false }),
+  async mounted () {
+    await this.$apollo.provider.defaultClient.hydrated()
+    this.hydrated = true
+  }
 }
 </script>
 
diff --git a/frontend/src/components/Start.vue b/frontend/src/components/Start.vue
index 9054158..d3d83cd 100644
--- a/frontend/src/components/Start.vue
+++ b/frontend/src/components/Start.vue
@@ -1,12 +1,25 @@
 <template>
   <div id="start">
     <a href="#">start a lunch run</a>
+
+    <ul>
+      <li v-for="run in runs" :key="run.id">
+        {{ run.name }}
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
+import gql from 'graphql-tag'
 export default {
-  name: 'Start'
+  name: 'Start',
+  apollo: {
+    runs: {
+      query: gql`query { listRuns(first:10,after:"") { items { id,name }, nextToken } }`,
+      update: data => data.listRuns.items
+    }
+  }
 }
 </script>
 
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 417390e..65045f6 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,13 +3,38 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import VueApollo from 'vue-apollo'
+import AWSAppSyncClient from 'aws-appsync'
+import appSyncConfig from '../config/AppSync.js'
 
+const appSyncClient = new AWSAppSyncClient({
+  url: appSyncConfig.graphqlEndpoint,
+  region: appSyncConfig.region,
+  auth: {
+    type: appSyncConfig.authenticationType,
+    apiKey: appSyncConfig.apiKey
+  }
+},
+{
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'cache-and-network'
+    }
+  }
+})
+
+const apolloProvider = new VueApollo({
+  defaultClient: appSyncClient
+})
+
+Vue.use(VueApollo)
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
+  provide: apolloProvider.provide(),
   components: { App },
   template: '<App/>'
 })