test(ssr): $apollo.queries.<query>.loading + interactive on client

packages/test-ssr/src/components/ApolloLoading.vue

@@ -0,0 +1,16 @@
+<template>
+  <div v-if="$apollo.queries.messages.loading">Loading...</div>
+  <div v-else class="messages">
+    {{ messages.length }} messages
+  </div>
+</template>
+
+<script>
+import MESSAGES from '../graphql/Messages.gql'
+
+export default {
+  apollo: {
+    messages: MESSAGES
+  }
+}
+</script>

packages/test-ssr/src/components/HelloWorld.vue

@@ -1,60 +1,29 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress" target="_blank" rel="noopener">e2e-cypress</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
+    <input v-model="name" class="input">
+    <div class="hello">{{ hello }}</div>
   </div>
 </template>
 
 <script>
+import HELLO_WORLD from '../graphql/HelloWorld.gql'
+
 export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
+  data () {
+    return {
+      name: ''
+    }
+  },
+
+  apollo: {
+    hello: {
+      query: HELLO_WORLD,
+      variables () {
+        return {
+          name: this.name
+        }
+      }
+    }
   }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

packages/test-ssr/src/router/index.js

@@ -16,6 +16,16 @@ export function createRouter () {
       name: 'apollo',
       component: () => import(/* webpackChunkName: "apollo" */ '../components/ApolloExample.vue')
     },
+    {
+      path: '/apollo-loading',
+      name: 'apollo-loading',
+      component: () => import(/* webpackChunkName: "apollo-loading" */ '../components/ApolloLoading.vue')
+    },
+    {
+      path: '/hello',
+      name: 'hello',
+      component: () => import(/* webpackChunkName: "hello" */ '../components/HelloWorld.vue')
+    },
     {
       path: '/about',
       name: 'about',

packages/test-ssr/src/views/Home.vue

@@ -1,18 +1,11 @@
 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
 export default {
-  name: 'home',
-  components: {
-    HelloWorld
-  }
+  name: 'home'
 }
 </script>

packages/test-ssr/tests/e2e/specs/apollo-ssr.js

@@ -9,4 +9,17 @@ describe('SSR Apollo', () => {
     cy.get('.apollo-state').should('contain', '"Message:b":{"id":"b","text":"Message 2","__typename":"Message"}')
     cy.get('.apollo-state').should('contain', '"Message:c":{"id":"c","text":"Message 3","__typename":"Message"}')
   })
+
+  it('should load page using `$apollo.queries.<query>.loading', () => {
+    cy.visit('/apollo-loading')
+    cy.get('.messages').should('contain', '3 messages')
+    cy.get('.apollo-state').should('contain', '"messages":[{"type":"id","generated":false,"id":"Message:a","typename":"Message"},{"type":"id","generated":false,"id":"Message:b","typename":"Message"},{"type":"id","generated":false,"id":"Message:c","typename":"Message"}]')
+  })
+
+  it('should still be interactive (not destroyed on client)', () => {
+    cy.visit('/hello')
+    cy.get('.hello').should('contain', 'Hello World!')
+    cy.get('.input').type('Anne')
+    cy.get('.hello').should('contain', 'Hello Anne!')
+  })
 })

packages/test-ssr/tests/e2e/specs/test.js

@@ -1,8 +0,0 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('h1', 'Welcome to Your Vue.js App')
-  })
-})