Move out of frontend folder

src/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="app" v-if="hydrated">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  data: () => ({ hydrated: false }),
+  async mounted () {
+    await this.$apollo.provider.defaultClient.hydrated()
+    this.hydrated = true
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Helvetica, Arial, sans-serif;
+}
+</style>

src/components/Start.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="start">
+    <a href="#">start a lunch run</a>
+
+    <div v-if="$apollo.queries.runs.loading">Loading...</div>
+    <ul>
+      <li v-for="run in runs" :key="run.id">
+        {{ run.name }}
+      </li>
+    </ul>
+
+    <form v-on:submit.prevent='addRun'>
+      <label for='name'>Name</label>
+      <input type='text' name='name' id='name' v-model='name'/>
+      <input type='submit' value='Add Run'/>
+    </form>
+
+  </div>
+</template>
+
+<script>
+import listRuns from '../queries/listRuns'
+import createRun from '../mutations/createRun'
+export default {
+  name: 'Start',
+  data () {
+    return {
+      name: '',
+      runs: []
+    }
+  },
+  methods: {
+    addRun () {
+      const name = this.name
+      this.$apollo.mutate({
+        mutation: createRun,
+        variables: {
+          name: name
+        },
+        update: (store, { data: { createRun } }) => {
+          const data = store.readQuery({ query: listRuns })
+          data.listRuns.items.push(createRun)
+          store.writeQuery({ query: listRuns, data })
+        },
+        optimisticResponse: {
+          __typename: 'Mutation',
+          createRun: {
+            __typename: 'Run',
+            id: -1,
+            name: name
+          }
+        }
+      }).then((data) => {
+        console.log(data)
+      }).catch((error) => {
+        console.log(error)
+      })
+    }
+  },
+  apollo: {
+    runs: {
+      query: () => listRuns,
+      update: data => data.listRuns.items
+    }
+  }
+}
+</script>
+
+<style scoped>
+#start {
+}
+
+#start a {
+  display: block;
+  width: 200px;
+  margin: 60px auto;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  box-shadow: 2px 2px 5px #eee;
+  text-align: center;
+  text-decoration: none;
+  color: #333;
+}
+</style>

src/main.js

@@ -0,0 +1,40 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+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/>'
+})

src/mutations/createRun.js

@@ -0,0 +1,6 @@
+import gql from 'graphql-tag'
+export default gql`mutation ($name: String!) {
+    createRun(input: { name: $name }) {
+      id, name
+    }
+  }`

src/queries/listRuns.js

@@ -0,0 +1,11 @@
+import gql from 'graphql-tag'
+export default gql`
+    query {
+        listRuns(first:10,after:"") {
+            items {
+                id,
+                name
+            },
+            nextToken
+        }
+    }`

src/router/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Start from '@/components/Start'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'Start',
+      component: Start
+    }
+  ]
+})