diff --git a/package.json b/package.json
index d19ae638..b77cc936 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx
index 41394545..f5f54b0f 100644
--- a/src/components/Inbox/DialogCard.tsx
+++ b/src/components/Inbox/DialogCard.tsx
@@ -35,11 +35,7 @@ const DialogCard = (props: DialogProps) => {
- {companions()[0].name}
}>
- 2}>
- {props.title}
-
-
+ {props.title}
1}>{names}
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index ff975949..69f188b4 100644
--- a/src/components/Views/Inbox.tsx
+++ b/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()
const { session } = useSession()
const currentUserId = createMemo(() => session()?.user.id)
-
+ const [subClient, setSubClient] = createSignal()
// Поиск по диалогам
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) => (
handleOpenChat(chat)}
- title={chat.title}
+ title={chat.title || chat.members[0].name}
members={chat.members}
ownId={currentUserId()}
/>
diff --git a/src/graphql/privateGraphQLClient.ts b/src/graphql/privateGraphQLClient.ts
index 1c4761ca..28eaad53 100644
--- a/src/graphql/privateGraphQLClient.ts
+++ b/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)
+}
diff --git a/yarn.lock b/yarn.lock
index 518bd29f..64a501db 100644
--- a/yarn.lock
+++ b/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"