test: useSubscription

Author: Akryum

packages/test-e2e-composable-vue3/package.json

@@ -20,6 +20,7 @@
     "@vue/apollo-util": "workspace:*",
     "graphql": "^16.7.1",
     "graphql-tag": "^2.12.6",
+    "graphql-ws": "^5.15.0",
     "pinia": "^2.1.6",
     "test-server": "workspace:*",
     "vue": "^3.3.4",

packages/test-e2e-composable-vue3/src/apollo.ts

@@ -1,6 +1,9 @@
-import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'
+import { ApolloClient, InMemoryCache, createHttpLink, split } from '@apollo/client/core'
 import { onError } from '@apollo/client/link/error'
+import { getMainDefinition } from '@apollo/client/utilities'
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
 import { logErrorMessages } from '@vue/apollo-util'
+import { createClient } from 'graphql-ws'
 
 const cache = new InMemoryCache()
 
@@ -10,12 +13,32 @@ const httpLink = createHttpLink({
   uri: 'http://localhost:4042/graphql',
 })
 
+const wsLink = new GraphQLWsLink(createClient({
+  url: 'ws://localhost:4042/graphql',
+}))
+
+const splitLink = split(
+  ({ query }) => {
+    const definition = getMainDefinition(query)
+    if (definition.kind === 'OperationDefinition' &&
+    definition.operation === 'subscription') {
+      console.log(`Subscribing to ${definition.name?.value ?? 'anonymous'}`)
+    }
+    return (
+      definition.kind === 'OperationDefinition' &&
+      definition.operation === 'subscription'
+    )
+  },
+  wsLink,
+  httpLink,
+)
+
 // Handle errors
 const errorLink = onError(error => {
   logErrorMessages(error)
 })
 
 export const apolloClient = new ApolloClient({
   cache,
-  link: errorLink.concat(httpLink),
+  link: errorLink.concat(splitLink),
 })

packages/test-e2e-composable-vue3/src/components/Subscription.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { useSubscription } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { ref } from 'vue'
+
+const messages = ref<Array<{ id: string, text: string }>>([])
+
+const { onResult } = useSubscription(gql`subscription OnMessageAdded {
+  messageAdded(channelId: "general") {
+    id
+    text
+  }
+}`)
+
+onResult((result) => {
+  console.log(result.data?.messageAdded)
+  if (result.data?.messageAdded) {
+    messages.value.push(result.data.messageAdded)
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-2 p-2 border border-gray-200 rounded-xl">
+    <div
+      v-for="message in messages"
+      :key="message.id"
+      class="message px-4 py-2 bg-white rounded-lg"
+    >
+      {{ message.text }}
+    </div>
+
+    <div v-if="!messages.length">
+      No messages yet
+    </div>
+  </div>
+</template>

packages/test-e2e-composable-vue3/src/components/Subscriptions.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import MessageForm from './MessageForm.vue'
+import Subscription from './Subscription.vue'
+</script>
+
+<template>
+  <div class="m-12 space-y-4">
+    <h1 class="text-2xl">
+      Subscription
+    </h1>
+    <MessageForm channel-id="general" />
+    <div class="flex gap-4">
+      <Subscription
+        v-for="n in 3"
+        :key="n"
+        class="flex-1"
+      />
+    </div>
+  </div>
+</template>

packages/test-e2e-composable-vue3/src/router.ts

@@ -79,5 +79,12 @@ export const router = createRouter({
         layout: 'blank',
       },
     },
+    {
+      path: '/subscriptions',
+      component: () => import('./components/Subscriptions.vue'),
+      meta: {
+        layout: 'blank',
+      },
+    },
   ],
 })

packages/test-e2e-composable-vue3/tests/e2e/specs/subscription.cy.ts

@@ -0,0 +1,16 @@
+describe('Subscription', () => {
+  beforeEach(() => {
+    cy.task('db:reset')
+    cy.visit('/')
+  })
+
+  it('receive messages in real time', () => {
+    cy.visit('/subscriptions')
+    cy.get('input').type('Meow{enter}')
+    cy.get('.message').should('have.length', 3)
+    cy.get('.message').should('contain', 'Meow')
+    cy.get('input').type('Waf{enter}')
+    cy.get('.message').should('have.length', 6)
+    cy.get('.message').should('contain', 'Waf')
+  })
+})