ws subs debug

package.json

@@ -138,7 +138,6 @@
     "unique-names-generator": "^4.7.1",
     "uuid": "^9.0.0",
     "vite": "^3.2.4",
-    "vite-plugin-html-purgecss": "^0.1.1",
     "ws": "^8.11.0",
     "y-prosemirror": "^1.2.0",
     "y-protocols": "^1.0.5",

src/context/inbox.tsx

@@ -3,7 +3,7 @@ import { createContext, createSignal, useContext } from 'solid-js'
 import { createChatClient } from '../graphql/privateGraphQLClient'
 import type { Chat } from '../graphql/types.gen'
 import { apiClient } from '../utils/apiClient'
-import newMessages from '../graphql/subs/new-messages'
+import newMessage from '../graphql/subs/new-message'
 import type { Client } from '@urql/core'
 import { pipe, subscribe } from 'wonka'
 
@@ -12,7 +12,7 @@ type InboxContextType = {
   actions: {
     createChat: (members: number[], title: string) => Promise<{ chat: Chat }>
     loadChats: () => Promise<void>
-    setListener: (listener: (ev) => void) => void
+    unsubscribe: () => void
   }
 }
 
@@ -24,7 +24,6 @@ export function useInbox() {
 
 export const InboxProvider = (props: { children: JSX.Element }) => {
   const [chats, setChats] = createSignal<Chat[]>([])
-  const [listener, setListener] = createSignal(console.debug)
   const subclient = createMemo<Client>(() => createChatClient())
   const loadChats = async () => {
     try {
@@ -47,21 +46,19 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
     return chat
   }
 
+  const { unsubscribe } = pipe(
+    subclient().subscription(newMessage, {}),
+    subscribe((result) => {
+      console.debug('[subscription] ' + result)
+      // TODO: handle data result
+    })
+  )
   const actions = {
     createChat,
     loadChats,
-    setListener // setting listening handler
+    unsubscribe // TODO: call unsubscribe some time!
   }
 
-  onMount(async () => {
-    const { unsubscribe } = pipe(
-      subclient().subscription(newMessages, {}),
-      subscribe((result) => {
-        console.debug(result) // { data: ... }
-        // TODO: handle data result
-      })
-    )
-  })
   const value: InboxContextType = { chats, actions }
   return <InboxContext.Provider value={value}>{props.children}</InboxContext.Provider>
 }

src/graphql/privateGraphQLClient.ts

@@ -6,19 +6,20 @@ import {
   subscriptionExchange,
   createClient
 } from '@urql/core'
-import { createClient as createSSEClient } from 'graphql-sse'
-import { devtoolsExchange } from '@urql/devtools'
+// import { createClient as createSSEClient } from 'graphql-sse'
+import { createClient as createWSClient } from 'graphql-ws'
+// import { devtoolsExchange } from '@urql/devtools'
 import { isDev, apiBaseUrl } from '../utils/config'
 // import { cache } from './cache'
 
 const TOKEN_LOCAL_STORAGE_KEY = 'token'
 
 const exchanges: Exchange[] = [dedupExchange, fetchExchange]
-
-if (isDev) {
+/*
+ if (isDev) {
   exchanges.unshift(devtoolsExchange)
 }
-
+*/
 export const getToken = (): string => {
   return localStorage.getItem(TOKEN_LOCAL_STORAGE_KEY)
 }
@@ -50,11 +51,11 @@ const options: ClientOptions = {
 export const privateGraphQLClient = createClient(options)
 
 export const createChatClient = () => {
-  const sseClient = createSSEClient({
-    url: apiBaseUrl + '/messages'
+  const sseClient = createWSClient({
+    url: apiBaseUrl.replace('http', 'ws')
   })
 
-  const sseExchange = subscriptionExchange({
+  const subExchange = subscriptionExchange({
     forwardSubscription(operation) {
       return {
         subscribe: (sink) => {
@@ -67,6 +68,6 @@ export const createChatClient = () => {
     }
   })
 
-  options.exchanges.unshift(sseExchange)
+  options.exchanges.unshift(subExchange)
   return createClient(options)
 }

src/graphql/subs/new-message.ts

@@ -2,7 +2,7 @@ import { gql } from '@urql/core'
 
 export default gql`
   subscription {
-    newMessages {
+    newMessage {
       id
       chatId
       author

src/graphql/types.gen.ts

@@ -629,11 +629,8 @@ export type Stat = {
 }
 
 export type Subscription = {
-  newMessages: Message
-  onlineUpdated: Array<User>
-  reactionUpdated: ReactionUpdating
-  shoutUpdated: Shout
-  userUpdated: User
+  newMessage: Message
+  collabUpdate: Reaction
 }
 
 export type SubscriptionReactionUpdatedArgs = {