subs client

src/components/Views/Inbox.tsx

@@ -4,7 +4,6 @@ import { Icon } from '../_shared/Icon'
 import DialogCard from '../Inbox/DialogCard'
 import Search from '../Inbox/Search'
 import { useSession } from '../../context/session'
-import type { Client } from '@urql/core'
 import Message from '../Inbox/Message'
 import { loadRecipients, loadMessages } from '../../stores/inbox'
 import { t } from '../../utils/intl'
@@ -16,7 +15,6 @@ import '../../styles/Inbox.scss'
 import { useInbox } from '../../context/inbox'
 import DialogHeader from '../Inbox/DialogHeader'
 import { apiClient } from '../../utils/apiClient'
-import { createChatClient } from '../../graphql/privateGraphQLClient'
 import MessagesFallback from '../Inbox/MessagesFallback'
 
 const userSearch = (array: Author[], keyword: string) => {
@@ -29,7 +27,7 @@ const userSearch = (array: Author[], keyword: string) => {
 export const InboxView = () => {
   const {
     chats,
-    actions: { loadChats }
+    actions: { loadChats, setListener }
   } = useInbox()
   const [messages, setMessages] = createSignal<MessageType[]>([])
   const [recipients, setRecipients] = createSignal<Author[]>([])
@@ -39,7 +37,6 @@ export const InboxView = () => {
   const [currentDialog, setCurrentDialog] = createSignal<Chat>()
   const { session } = useSession()
   const currentUserId = createMemo(() => session()?.user.id)
-  const [subClient, setSubClient] = createSignal<Client>()
   // Поиск по диалогам
   const getQuery = (query) => {
     // if (query().length >= 2) {
@@ -59,7 +56,6 @@ export const InboxView = () => {
     try {
       const response = await loadMessages({ chat: chat.id })
       setMessages(response as unknown as MessageType[])
-      setSubClient((_) => createChatClient(onMessage))
       // TODO: one client recreating
     } catch (error) {
       console.error('[loadMessages]', error)
@@ -72,6 +68,7 @@ export const InboxView = () => {
     try {
       const response = await loadRecipients({ days: 365 })
       setRecipients(response as unknown as Author[])
+      setListener(onMessage)
     } catch (error) {
       console.log(error)
     }

src/context/inbox.tsx

@@ -1,13 +1,16 @@
-import type { Accessor, JSX } from 'solid-js'
+import { Accessor, createMemo, JSX, onMount } from 'solid-js'
 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'
 
 type InboxContextType = {
   chats: Accessor<Chat[]>
   actions: {
     createChat: (members: number[], title: string) => Promise<void>
     loadChats: () => Promise<void>
+    setListener: (listener: (ev) => void) => void
   }
 }
 
@@ -19,6 +22,8 @@ export function useInbox() {
 
 export const InboxProvider = (props: { children: JSX.Element }) => {
   const [chats, setChats] = createSignal<Chat[]>([])
+  const [listener, setListener] = createSignal(console.debug)
+  const subclient = createMemo(() => createChatClient(listener()))
   const loadChats = async () => {
     try {
       const newChats = await apiClient.getChats({ limit: 50, offset: 0 })
@@ -42,9 +47,13 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
 
   const actions = {
     createChat,
-    loadChats
+    loadChats,
+    setListener // setting listening handler
   }
-
+  onMount(() => {
+    const resp = subclient().subscription(newMessages, {})
+    console.debug(resp)
+  })
   const value: InboxContextType = { chats, actions }
   return <InboxContext.Provider value={value}>{props.children}</InboxContext.Provider>
 }

src/graphql/privateGraphQLClient.ts

@@ -67,6 +67,7 @@ export const createChatClient = (onMessage) => {
       }
     }
   })
+
   options.exchanges.unshift(sseExchange)
   return createClient(options)
 }

src/graphql/subs/new-messages.ts

@@ -0,0 +1,15 @@
+import { gql } from '@urql/core'
+
+export default gql`
+  subscription {
+    newMessages {
+      id
+      chatId
+      author
+      body
+      replyTo
+      createdAt
+      updatedAt
+    }
+  }
+`