Fixed router issue

Author: juicycleff

basic/src/components/CreatePage.vue

@@ -43,32 +43,53 @@
       }
     }
   `
+  const FEED_QUERY = gql `
+    query feed {
+      feed {
+        id
+        text
+        title
+        isPublished
+      }
+    }
+  `
+
   export default {
     data: () => ({
       title: '',
       text: ''
     }),
-  
+
     // Attribute
     methods: {
       create() {
         const title = this.title
         const text = this.text
-  
+
         this.title = ''
         this.text = ''
-  
+
         // Mutation
         this.$apollo.mutate({
           mutation: CREATE_POST,
           variables: {
             title,
             text,
           },
+          // Update the cache with the result
+          // and then with the real result of the mutation
+          update: (store, { data: { createDraft } }) => {
+            // Read the data from our cache for this query.
+            const data = store.readQuery({ query: FEED_QUERY })
+            // Add our post from the mutation to the end
+            data.tags.push(createDraft)
+            // Write our data back to the cache.
+            store.writeQuery({ query: FEED_QUERY, data })
+          }
         }).then((data) => {
           // Result
           console.log(data);
-          router.push({ path: 'Drafts' })
+          this.$router.push({ path: 'Drafts' })
         }).catch((error) => {
           // Error
           alert(`Error from ${error}`)
@@ -102,24 +123,24 @@
     margin-top: 35px;
     float: left;
   }
-  
+
   .createPost:hover {
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
   }
-  
+
   .newPost {
     border: none;
     color: gray;
     background-color: white;
   }
-  
+
   .plusImage {
     opacity: 0.4;
     margin-top: 25%;
     width: 25%;
     height: 25%;
   }
-  
+
   .modal-mask {
   position: fixed;
   z-index: 9998;
@@ -179,4 +200,4 @@
     justify-content: flex-start;
     flex-direction: column;
   }*/
-</style>
+</style>

basic/src/components/DetailPage.vue

@@ -60,7 +60,7 @@
       post: {},
       loading: 0,
     }),
-  
+
     // Apollo GraphQL
     apollo: {
       post: {
@@ -73,7 +73,7 @@
         }
       },
     },
-    
+
     // Attribute
     methods: {
       deletePost() {
@@ -86,15 +86,14 @@
         }).then((data) => {
           // Result
           console.log(data);
-          router.push({ path: 'Feed' })
+          this.$router.push({ path: 'Feed' })
         }).catch((error) => {
           // Error
           console.error(error)
         })
       },
       publishDraft() {
         const postId = this.$route.params.id
-  
         // Mutation
         this.$apollo.mutate({
           mutation: PUBLISH_MUTATION,
@@ -104,7 +103,7 @@
         }).then((data) => {
           // Result
           console.log(data);
-          router.push({ path: 'Drafts' })
+          this.$router.push({ path: 'Drafts' })
         }).catch((error) => {
           // Error
           console.error(error)
@@ -124,24 +123,24 @@
     margin-top: 35px;
     float: left;
   }
-  
+
   .createPost:hover {
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
   }
-  
+
   .newPost {
     border: none;
     color: gray;
     background-color: white;
   }
-  
+
   .plusImage {
     opacity: 0.4;
     margin-top: 25%;
     width: 25%;
     height: 25%;
   }
-  
+
   .modal-mask {
   position: fixed;
   z-index: 9998;

basic/src/main.js

@@ -4,7 +4,7 @@ import ApolloClient, { createNetworkInterface } from 'apollo-client'
 import VueApollo from 'vue-apollo'
 import router from './router'
 
-const networkInterface = createNetworkInterface({ uri: 'http://localhost:4000'});
+const networkInterface = createNetworkInterface({ uri: 'https://uniserver.now.sh/'});
 
 const apolloClient = new ApolloClient({
   networkInterface,