diff --git a/tests/demo/_vscode/settings.json b/.vscode/settings.json
similarity index 76%
rename from tests/demo/_vscode/settings.json
rename to .vscode/settings.json
index 572bef3..6c85e0b 100644
--- a/tests/demo/_vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,5 +4,6 @@
     "javascriptreact",
     "vue",
     "graphql"
-  ]
+  ],
+  "eslint.enable": true
 }
diff --git a/tests/demo/.eslintignore b/tests/demo/.eslintignore
index 4a96576..f3e5bf9 100644
--- a/tests/demo/.eslintignore
+++ b/tests/demo/.eslintignore
@@ -1,2 +1 @@
-
 schema.graphql
diff --git a/tests/demo/.eslintrc.js b/tests/demo/.eslintrc.js
index 7479385..5530770 100644
--- a/tests/demo/.eslintrc.js
+++ b/tests/demo/.eslintrc.js
@@ -16,7 +16,8 @@ module.exports = {
       {
         env: 'literal'
       }
-    ]
+    ],
+    'comma-dangle': ['error', 'always-multiline'],
   },
 
   parserOptions: {
@@ -26,4 +27,4 @@ module.exports = {
   plugins: [
     'graphql'
   ]
-}
\ No newline at end of file
+}
diff --git a/tests/demo/babel.config.js b/tests/demo/babel.config.js
index ba17966..d39e57b 100644
--- a/tests/demo/babel.config.js
+++ b/tests/demo/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
-  ]
+    '@vue/app',
+  ],
 }
diff --git a/tests/demo/package.json b/tests/demo/package.json
index b230cb2..043b3e6 100644
--- a/tests/demo/package.json
+++ b/tests/demo/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "graphql-type-json": "^0.2.1",
+    "shortid": "^2.2.8",
     "vue": "^2.5.16",
     "vue-apollo": "^3.0.0-beta.10",
     "vue-router": "^3.0.1",
diff --git a/tests/demo/src/App.vue b/tests/demo/src/App.vue
index 807c399..714e4a0 100644
--- a/tests/demo/src/App.vue
+++ b/tests/demo/src/App.vue
@@ -1,13 +1,22 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <ChannelList/>
+    <div class="content">
+      <router-view/>
     </div>
-    <router-view/>
   </div>
 </template>
 
+<script>
+import ChannelList from '@/components/ChannelList.vue'
+
+export default {
+  components: {
+    ChannelList,
+  },
+}
+</script>
+
 <style lang="stylus">
 #app
   font-family 'Avenir', Helvetica, Arial, sans-serif
diff --git a/tests/demo/src/assets/logo.png b/tests/demo/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/tests/demo/src/assets/logo.png and /dev/null differ
diff --git a/tests/demo/src/components/ChannelList.vue b/tests/demo/src/components/ChannelList.vue
new file mode 100644
index 0000000..707732e
--- /dev/null
+++ b/tests/demo/src/components/ChannelList.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="hello">
+    <ApolloQuery :query="require('../graphql/channels.gql')">
+      <template slot-scope="{ result: { data, loading } }">
+        <div v-if="loading">Loading...</div>
+        <div v-else-if="data" class="channels">
+          <router-link
+            v-for="channel of data.channels"
+            :key="channel.id"
+            :to="{ name: 'channel', params: { id: channel.id } }"
+            class="channel"
+          >
+            <div class="name">{{ channel.name }}</div>
+            <div class="id">{{ channel.id }}</div>
+          </router-link>
+        </div>
+      </template>
+    </ApolloQuery>
+  </div>
+</template>
+
+<style lang="stylus" scoped>
+.channel
+  display block
+
+.id
+  font-family monospace
+  font-size 10px
+</style>
diff --git a/tests/demo/src/components/ChannelView.vue b/tests/demo/src/components/ChannelView.vue
new file mode 100644
index 0000000..6192dcb
--- /dev/null
+++ b/tests/demo/src/components/ChannelView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="channel-view">
+
+  </div>
+</template>
diff --git a/tests/demo/src/components/HelloWorld.vue b/tests/demo/src/components/HelloWorld.vue
deleted file mode 100644
index 03273f7..0000000
--- a/tests/demo/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="hello">
-    <ApolloQuery :query="require('../graphql/hello.gql')">
-      <template slot-scope="{ result: { data, loading } }">
-        <div v-if="loading">Loading...</div>
-        <div v-else-if="data">{{ data.hello }}</div>
-      </template>
-    </ApolloQuery>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="stylus">
-h3
-  margin 40px 0 0
-
-ul
-  list-style-type none
-  padding 0
-
-li
-  display inline-block
-  margin 0 10px
-
-a
-  color #42b983
-</style>
diff --git a/tests/demo/src/components/WelcomeView.vue b/tests/demo/src/components/WelcomeView.vue
new file mode 100644
index 0000000..4c82713
--- /dev/null
+++ b/tests/demo/src/components/WelcomeView.vue
@@ -0,0 +1,6 @@
+<template>
+  <div class="welcome-view">
+    <h1>Welcome!</h1>
+    <p>Select a channel to start messaging</p>
+  </div>
+</template>
diff --git a/tests/demo/src/graphql-api/connectors/channels.js b/tests/demo/src/graphql-api/connectors/channels.js
new file mode 100644
index 0000000..0d744d4
--- /dev/null
+++ b/tests/demo/src/graphql-api/connectors/channels.js
@@ -0,0 +1,13 @@
+const channels = [
+  { id: 'general', name: 'General' },
+  { id: 'random', name: 'Random' },
+  { id: 'help', name: 'Help' },
+]
+
+exports.getAll = (context) => {
+  return channels
+}
+
+exports.getOne = (id, context) => {
+  return channels.find(c => c.id === id)
+}
diff --git a/tests/demo/src/graphql-api/connectors/messages.js b/tests/demo/src/graphql-api/connectors/messages.js
new file mode 100644
index 0000000..53d8c5d
--- /dev/null
+++ b/tests/demo/src/graphql-api/connectors/messages.js
@@ -0,0 +1,26 @@
+const shortid = require('shortid')
+const triggers = require('../triggers')
+
+const messages = []
+
+exports.getAll = (channelId, context) => {
+  return messages.filter(m => m.channelId === channelId)
+}
+
+exports.add = ({ channelId, content }, context) => {
+  const message = {
+    id: shortid(),
+    userId: context.userId,
+    channelId: channelId,
+    content: content,
+    dateAdded: Date.now(),
+  }
+  messages.push(message)
+  context.pubsub.publish(triggers.MESSAGE_CHANGED, {
+    messageChanged: {
+      type: 'added',
+      message,
+    },
+  })
+  return message
+}
diff --git a/tests/demo/src/graphql-api/resolvers.js b/tests/demo/src/graphql-api/resolvers.js
index 2535768..d16087b 100644
--- a/tests/demo/src/graphql-api/resolvers.js
+++ b/tests/demo/src/graphql-api/resolvers.js
@@ -1,26 +1,26 @@
 const GraphQLJSON = require('graphql-type-json')
+const { withFilter } = require('graphql-subscriptions')
+// Subs
+const triggers = require('./triggers')
+// Connectors
+const channels = require('./connectors/channels')
 
 module.exports = {
   JSON: GraphQLJSON,
 
   Query: {
-    hello: (root, { name }) => `Hello ${name || 'World'}!`
-
+    channels: (root, args, context) => channels.getAll(context),
+    channel: (root, { id }, context) => channels.getOne(id, context),
   },
 
   Mutation: {
-    myMutation: (root, args, context) => {
-      const message = 'My mutation completed!'
-      context.pubsub.publish('hey', { mySub: message })
-      return message
-    }
 
   },
 
   Subscription: {
-    mySub: {
-      subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator('hey')
-    }
-
-  }
+    messageChanged: withFilter(
+      (parent, args, { pubsub }) => pubsub.asyncIterator(triggers.MESSAGE_CHANGED),
+      (payload, vars) => payload.messageChanged.channelId === vars.channelId
+    ),
+  },
 }
diff --git a/tests/demo/src/graphql-api/schema.graphql b/tests/demo/src/graphql-api/schema.graphql
index afdbfba..a153ffa 100644
--- a/tests/demo/src/graphql-api/schema.graphql
+++ b/tests/demo/src/graphql-api/schema.graphql
@@ -1,21 +1,63 @@
 scalar JSON
 
+type User {
+  id: ID!
+  nickname: String!
+  email: String
+}
 
+# Channel of messages
+type Channel {
+  id: ID!
+  name: String!
+  messages: [Message]
+}
 
+# User messages
+type Message {
+  id: ID!
+  content: String!
+  # Author of the message
+  user: User
+  dateAdded: JSON
+  dateUpdated: JSON
+}
 
+input MessageAdd {
+  channelId: ID!
+  content: String!
+}
+
+input MessageUpdate {
+  id: ID!
+  content: String!
+}
+
+type MessageChanged {
+  type: MessageChangedType!
+  message: Message!
+}
+
+enum MessageChangedType {
+  added
+  updated
+  removed
+}
 
 type Query {
-  # Test query with a parameter
-  hello(name: String): String!
-
+  userCurrent: User
+  channels: [Channel]
+  channel (id: ID!): Channel
 }
 
 type Mutation {
-  myMutation: String!
-
+  userLogin (email: String!, password: String!): User
+  userLogout: Boolean
+  messageAdd (input: MessageAdd!): Message!
+  messageUpdate (input: MessageUpdate!): Message!
+  messageRemove (id: ID!): Message!
 }
 
 type Subscription {
-  mySub: String!
-
+  messageChanged (channelId: ID!): MessageChanged!
 }
diff --git a/tests/demo/src/graphql-api/triggers.js b/tests/demo/src/graphql-api/triggers.js
new file mode 100644
index 0000000..32796a2
--- /dev/null
+++ b/tests/demo/src/graphql-api/triggers.js
@@ -0,0 +1,3 @@
+module.exports = {
+  MESSAGE_CHANGED: 'message_changed',
+}
diff --git a/tests/demo/src/graphql/channel.gql b/tests/demo/src/graphql/channel.gql
new file mode 100644
index 0000000..4f87e4c
--- /dev/null
+++ b/tests/demo/src/graphql/channel.gql
@@ -0,0 +1,11 @@
+#import "./channelFragment.gql"
+#import "./messageFragment.gql"
+
+query channel ($id: ID!) {
+  channel (id: $id) {
+    ...channel
+    messages {
+      ...message
+    }
+  }
+}
diff --git a/tests/demo/src/graphql/channelFragment.gql b/tests/demo/src/graphql/channelFragment.gql
new file mode 100644
index 0000000..dc71fdd
--- /dev/null
+++ b/tests/demo/src/graphql/channelFragment.gql
@@ -0,0 +1,4 @@
+fragment channel on Channel {
+  id
+  name
+}
diff --git a/tests/demo/src/graphql/channels.gql b/tests/demo/src/graphql/channels.gql
new file mode 100644
index 0000000..14d4dad
--- /dev/null
+++ b/tests/demo/src/graphql/channels.gql
@@ -0,0 +1,7 @@
+#import "./channelFragment.gql"
+
+query channels {
+  channels {
+    ...channel
+  }
+}
diff --git a/tests/demo/src/graphql/hello.gql b/tests/demo/src/graphql/hello.gql
deleted file mode 100644
index 90a2ee2..0000000
--- a/tests/demo/src/graphql/hello.gql
+++ /dev/null
@@ -1,3 +0,0 @@
-query hello {
-  hello
-}
diff --git a/tests/demo/src/graphql/messageAdd.gql b/tests/demo/src/graphql/messageAdd.gql
new file mode 100644
index 0000000..b01fb12
--- /dev/null
+++ b/tests/demo/src/graphql/messageAdd.gql
@@ -0,0 +1,7 @@
+#import "./messageFragment.gql"
+
+mutation messageAdd ($input: MessageAdd!) {
+  messageAdd (input: $input) {
+    ...message
+  }
+}
diff --git a/tests/demo/src/graphql/messageChanged.gql b/tests/demo/src/graphql/messageChanged.gql
new file mode 100644
index 0000000..d1c216c
--- /dev/null
+++ b/tests/demo/src/graphql/messageChanged.gql
@@ -0,0 +1,10 @@
+#import "./messageFragment.gql"
+
+subscription messageChanged ($channelId: ID!) {
+  messageChanged (channelId: $channelId) {
+    type
+    message {
+      ...message
+    }
+  }
+}
diff --git a/tests/demo/src/graphql/messageFragment.gql b/tests/demo/src/graphql/messageFragment.gql
new file mode 100644
index 0000000..eb95485
--- /dev/null
+++ b/tests/demo/src/graphql/messageFragment.gql
@@ -0,0 +1,11 @@
+#import "./userFragment.gql"
+
+fragment message on Message {
+  id
+  content
+  user {
+    ...user
+  }
+  dateAdded
+  dateUpdated
+}
diff --git a/tests/demo/src/graphql/messageRemove.gql b/tests/demo/src/graphql/messageRemove.gql
new file mode 100644
index 0000000..7e0e16a
--- /dev/null
+++ b/tests/demo/src/graphql/messageRemove.gql
@@ -0,0 +1,7 @@
+#import "./messageFragment.gql"
+
+mutation messageRemove ($id: ID!) {
+  messageRemove (id: $id) {
+    ...message
+  }
+}
diff --git a/tests/demo/src/graphql/messageUpdate.gql b/tests/demo/src/graphql/messageUpdate.gql
new file mode 100644
index 0000000..ad68f36
--- /dev/null
+++ b/tests/demo/src/graphql/messageUpdate.gql
@@ -0,0 +1,7 @@
+#import "./messageFragment.gql"
+
+mutation messageUpdate ($input: MessageUpdate!) {
+  messageUpdate (input: $input) {
+    ...message
+  }
+}
diff --git a/tests/demo/src/graphql/userFragment.gql b/tests/demo/src/graphql/userFragment.gql
new file mode 100644
index 0000000..649582d
--- /dev/null
+++ b/tests/demo/src/graphql/userFragment.gql
@@ -0,0 +1,4 @@
+fragment user on User {
+  id
+  nickname
+}
diff --git a/tests/demo/src/graphql/userLogin.gql b/tests/demo/src/graphql/userLogin.gql
new file mode 100644
index 0000000..d930cf9
--- /dev/null
+++ b/tests/demo/src/graphql/userLogin.gql
@@ -0,0 +1,8 @@
+#import "./userFragment.gql"
+
+mutation userLogin ($email: String!, $password: String!) {
+  userLogin (email: $email, password: $password) {
+    ...user
+    email
+  }
+}
diff --git a/tests/demo/src/graphql/userLogout.gql b/tests/demo/src/graphql/userLogout.gql
new file mode 100644
index 0000000..42d8236
--- /dev/null
+++ b/tests/demo/src/graphql/userLogout.gql
@@ -0,0 +1,3 @@
+mutation userLogout {
+  userLogout
+}
diff --git a/tests/demo/src/main.js b/tests/demo/src/main.js
index 87c4451..af1bfbe 100644
--- a/tests/demo/src/main.js
+++ b/tests/demo/src/main.js
@@ -10,5 +10,5 @@ new Vue({
   router,
   store,
   provide: createProvider().provide(),
-  render: h => h(App)
+  render: h => h(App),
 }).$mount('#app')
diff --git a/tests/demo/src/router.js b/tests/demo/src/router.js
index 9e03a62..2cb3e3e 100644
--- a/tests/demo/src/router.js
+++ b/tests/demo/src/router.js
@@ -1,21 +1,23 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
-import About from './views/About.vue'
+import WelcomeView from './components/WelcomeView.vue'
+import ChannelView from './components/ChannelView.vue'
 
 Vue.use(Router)
 
 export default new Router({
+  mode: 'history',
   routes: [
     {
       path: '/',
       name: 'home',
-      component: Home
+      component: WelcomeView,
     },
     {
-      path: '/about',
-      name: 'about',
-      component: About
-    }
-  ]
+      path: '/:id',
+      name: 'channel',
+      component: ChannelView,
+      props: true,
+    },
+  ],
 })
diff --git a/tests/demo/src/store.js b/tests/demo/src/store.js
index 3c7424e..3159703 100644
--- a/tests/demo/src/store.js
+++ b/tests/demo/src/store.js
@@ -12,5 +12,5 @@ export default new Vuex.Store({
   },
   actions: {
 
-  }
+  },
 })
diff --git a/tests/demo/src/views/About.vue b/tests/demo/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/tests/demo/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/tests/demo/src/views/Home.vue b/tests/demo/src/views/Home.vue
deleted file mode 100644
index a808fac..0000000
--- a/tests/demo/src/views/Home.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img 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
-  }
-}
-</script>
diff --git a/tests/demo/src/vue-apollo.js b/tests/demo/src/vue-apollo.js
index 51593e5..93a0dd5 100644
--- a/tests/demo/src/vue-apollo.js
+++ b/tests/demo/src/vue-apollo.js
@@ -23,7 +23,7 @@ const defaultOptions = {
   // You need to pass a `wsEndpoint` for this to work
   websocketsOnly: false,
   // Is being rendered on the server?
-  ssr: false
+  ssr: false,
   // Override default http link
   // link: myLink,
   // Override default cache
@@ -37,13 +37,18 @@ export function createProvider (options = {}) {
   // Create apollo client
   const { apolloClient, wsClient } = createApolloClient({
     ...defaultOptions,
-    ...options
+    ...options,
   })
   apolloClient.wsClient = wsClient
 
   // Create vue apollo provider
   const apolloProvider = new VueApollo({
-    defaultClient: apolloClient
+    defaultClient: apolloClient,
+    defaultOptions: {
+      $query: {
+        fetchPolicy: 'cache-and-network',
+      },
+    },
   })
 
   return apolloProvider
diff --git a/tests/demo/tests/e2e/plugins/index.js b/tests/demo/tests/e2e/plugins/index.js
index 71f26cd..da93448 100644
--- a/tests/demo/tests/e2e/plugins/index.js
+++ b/tests/demo/tests/e2e/plugins/index.js
@@ -6,6 +6,6 @@ module.exports = (on, config) => {
     integrationFolder: 'tests/e2e/specs',
     screenshotsFolder: 'tests/e2e/screenshots',
     videosFolder: 'tests/e2e/videos',
-    supportFile: 'tests/e2e/support/index.js'
+    supportFile: 'tests/e2e/support/index.js',
   })
 }
diff --git a/tests/demo/vue.config.js b/tests/demo/vue.config.js
index 61ed129..7b9386e 100644
--- a/tests/demo/vue.config.js
+++ b/tests/demo/vue.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   pluginOptions: {
     graphqlMock: true,
-    apolloEngine: false
-  }
+    apolloEngine: false,
+  },
 }
diff --git a/tests/demo/yarn.lock b/tests/demo/yarn.lock
index fa1c052..de5b065 100644
--- a/tests/demo/yarn.lock
+++ b/tests/demo/yarn.lock
@@ -6935,6 +6935,10 @@ shell-quote@^1.6.1:
     array-reduce "~0.0.0"
     jsonify "~0.0.0"
 
+shortid@^2.2.8:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.8.tgz#033b117d6a2e975804f6f0969dbe7d3d0b355131"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"