Softwaredevelopment.

1import { useEffect } from 'react';
2import { useQueryClient } from '@tanstack/react-query';
3import { subscribe, type Message } from '@/lib/realtime';
4
5export function useMessages(channelId: string) {
6  const cache = useQueryClient();
7
8  useEffect(() => {
9    const unsubscribe = subscribe<Message>({
10      channel: `messages:${channelId}`,
11      onMessage: (message) => {
12        cache.setQueryData<Message[]>(
13          ['messages', channelId],
14          (messages = []) => {
15            const exists = messages.some(m => m.id === message.id);
16            return exists ? messages : [...messages, message];
17          },
18        );
19      },
20    });
21    return unsubscribe;
22  }, [channelId, cache]);
23}

import { useEffect } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { subscribe, type Message } from '@/lib/realtime';

export function useMessages(channelId: string) {
  const cache = useQueryClient();

  useEffect(() => {
    const unsubscribe = subscribe<Message>({
      channel: `messages:${channelId}`,
      onMessage: (message) => {
        cache.setQueryData<Message[]>(
          ['messages', channelId],
          (messages = []) => {
            const exists = messages.some(m => m.id === message.id);
            return exists ? messages : [...messages, message];
          },
        );
      },
    });
    return unsubscribe;
  }, [channelId, cache]);
}