sse and fixes

package.json

@@ -81,6 +81,7 @@
     "eslint-plugin-sonarjs": "^0.16.0",
     "eslint-plugin-unicorn": "^45.0.0",
     "graphql": "^16.6.0",
+    "graphql-sse": "^1.3.1",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.11.2",
     "hast-util-select": "^5.0.2",

src/components/Inbox/DialogCard.tsx

@@ -35,11 +35,7 @@ const DialogCard = (props: DialogProps) => {
           </Switch>
         </div>
         <div class={styles.row}>
-          <Switch fallback={<div class={styles.name}>{companions()[0].name}</div>}>
-            <Match when={companions().length > 2}>
           <div class={styles.name}>{props.title}</div>
-            </Match>
-          </Switch>
           <div class={styles.message}>
             <Switch fallback={'Chat last message'}>
               <Match when={props.isChatHeader && companions().length > 1}>{names}</Match>

src/components/Views/Inbox.tsx

@@ -4,7 +4,7 @@ import { Icon } from '../_shared/Icon'
 import DialogCard from '../Inbox/DialogCard'
 import Search from '../Inbox/Search'
 import { useSession } from '../../context/session'
-import { createClient } from '@urql/core'
+import type { Client } from '@urql/core'
 import Message from '../Inbox/Message'
 import { loadRecipients, loadMessages } from '../../stores/inbox'
 import { t } from '../../utils/intl'
@@ -16,6 +16,7 @@ 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) => {
@@ -38,7 +39,7 @@ 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) {
@@ -50,11 +51,16 @@ export const InboxView = () => {
   }
 
   let chatWindow
-  const handleOpenChat = async (chat) => {
+
+  const onMessage = (payload) => console.log(payload)
+
+  const handleOpenChat = async (chat: Chat) => {
     setCurrentDialog(chat)
     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)
     } finally {
@@ -164,7 +170,7 @@ export const InboxView = () => {
                 {(chat) => (
                   <DialogCard
                     onClick={() => handleOpenChat(chat)}
-                    title={chat.title}
+                    title={chat.title || chat.members[0].name}
                     members={chat.members}
                     ownId={currentUserId()}
                   />

src/graphql/privateGraphQLClient.ts

@@ -1,4 +1,12 @@
-import { ClientOptions, dedupExchange, fetchExchange, Exchange, createClient } from '@urql/core'
+import {
+  ClientOptions,
+  dedupExchange,
+  fetchExchange,
+  Exchange,
+  subscriptionExchange,
+  createClient
+} from '@urql/core'
+import { createClient as createSSEClient } from 'graphql-sse'
 import { devtoolsExchange } from '@urql/devtools'
 import { isDev, apiBaseUrl } from '../utils/config'
 // import { cache } from './cache'
@@ -40,3 +48,25 @@ const options: ClientOptions = {
 }
 
 export const privateGraphQLClient = createClient(options)
+
+export const createChatClient = (onMessage) => {
+  const sseClient = createSSEClient({
+    url: apiBaseUrl + '/messages',
+    onMessage
+  })
+
+  const sseExchange = subscriptionExchange({
+    forwardSubscription(operation) {
+      return {
+        subscribe: (sink) => {
+          const dispose = sseClient.subscribe(operation, sink)
+          return {
+            unsubscribe: dispose
+          }
+        }
+      }
+    }
+  })
+  options.exchanges.unshift(sseExchange)
+  return createClient(options)
+}

yarn.lock

@@ -5974,6 +5974,11 @@ graphql-request@^5.0.0:
     extract-files "^9.0.0"
     form-data "^3.0.0"
 
+graphql-sse@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/graphql-sse/-/graphql-sse-1.3.1.tgz#74304c6754702431a62f576a67969bc2ca5c7d7f"
+  integrity sha512-JIeBJsk1kGQQjfrDu0KWy5UBMvDHwcHYBmKb+4ZPZHaws/j00H7fw5CH5Vb077D7LCta+KNQA0xcGGPmIHzu4A==
+
 graphql-tag@^2.11.0, graphql-tag@^2.12.6:
   version "2.12.6"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"