Working connection to app sync

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"
+}

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": {

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>
 

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>
 

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/>'
 })