@linktr.ee/messaging-react 1.22.2 → 1.23.0-rc-1772427007

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.22.2",
+  "version": "1.23.0-rc-1772427007",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/MessagingShell/index.tsx

@@ -11,6 +11,7 @@ import { ParticipantPicker } from '../ParticipantPicker'
 import { EmptyState } from './EmptyState'
 import { ErrorState } from './ErrorState'
 import { LoadingState } from './LoadingState'
+import { createQueryChannelsManager } from './queryChannelsManager'
 
 /**
  * Main messaging interface component that combines channel list and channel view
@@ -94,64 +95,96 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
   // Track if we've already synced channels to prevent repeated API calls
   const syncedRef = useRef<string | null>(null)
+  const syncRequestNonceRef = useRef(0)
+  const onChannelSelectRef = useRef(onChannelSelect)
+  const debugEnabledRef = useRef(debug)
+
+  useEffect(() => {
+    onChannelSelectRef.current = onChannelSelect
+  }, [onChannelSelect])
+
+  const queryChannelsManager = React.useMemo(() => {
+    if (!client) return null
+
+    return createQueryChannelsManager({
+      client,
+      onRetry: ({ requestKey, attempt, delayMs, error }) => {
+        if (!debugEnabledRef.current) return
+
+        console.warn('[MessagingShell] queryChannels rate limited; retrying', {
+          requestKey,
+          attempt,
+          delayMs,
+          error,
+        })
+      },
+    })
+  }, [client])
 
   // Function to sync channels (extracted for reuse)
-  const syncChannels = useCallback(async () => {
-    if (!client || !isConnected) return
+  const syncChannels = useCallback(
+    async ({ forceFresh = false }: { forceFresh?: boolean } = {}) => {
+      if (!client || !isConnected || !queryChannelsManager) return
 
-    const userId = client.userID
-    if (!userId) return
+      const userId = client.userID
+      if (!userId) return
 
-    try {
-      if (debug) {
-        console.log('[MessagingShell] Syncing channels for user:', userId)
-      }
+      try {
+        if (debug) {
+          console.log('[MessagingShell] Syncing channels for user:', userId)
+        }
 
-      const channels = await client.queryChannels(
-        {
-          type: 'messaging',
-          members: { $in: [userId] },
-        },
-        {},
-        { limit: 100 }
-      )
-
-      const memberIds = new Set<string>()
-      channels.forEach((channel: Channel) => {
-        const members = channel.state.members
-        Object.values(members).forEach((member) => {
-          const memberId = member.user?.id
-          if (memberId && memberId !== userId) {
-            memberIds.add(memberId)
-          }
+        const requestKey = forceFresh
+          ? `sync:${userId}:refresh:${syncRequestNonceRef.current++}`
+          : `sync:${userId}`
+
+        const channels = await queryChannelsManager.query({
+          requestKey,
+          filters: {
+            type: 'messaging',
+            members: { $in: [userId] },
+          },
+          options: { limit: 100 },
         })
-      })
-
-      // Only update if the set contents have changed to prevent re-renders
-      setExistingParticipantIds((prev) => {
-        if (
-          prev.size === memberIds.size &&
-          [...prev].every((id) => memberIds.has(id))
-        ) {
-          return prev
-        }
-        return memberIds
-      })
-      setHasChannels(channels.length > 0)
-      setChannelsLoaded(true)
-      syncedRef.current = userId // Mark as synced for this user
 
-      if (debug) {
-        console.log('[MessagingShell] Channels synced successfully:', {
-          channelCount: channels.length,
-          memberCount: memberIds.size,
+        const memberIds = new Set<string>()
+        channels.forEach((channel: Channel) => {
+          const members = channel.state.members
+          Object.values(members).forEach((member) => {
+            const memberId = member.user?.id
+            if (memberId && memberId !== userId) {
+              memberIds.add(memberId)
+            }
+          })
+        })
+
+        // Only update if the set contents have changed to prevent re-renders
+        setExistingParticipantIds((prev) => {
+          if (
+            prev.size === memberIds.size &&
+            [...prev].every((id) => memberIds.has(id))
+          ) {
+            return prev
+          }
+          return memberIds
         })
+        setHasChannels(channels.length > 0)
+        setChannelsLoaded(true)
+        syncedRef.current = userId // Mark as synced for this user
+
+        if (debug) {
+          console.log('[MessagingShell] Channels synced successfully:', {
+            channelCount: channels.length,
+            memberCount: memberIds.size,
+          })
+        }
+      } catch (error) {
+        console.error('[MessagingShell] Failed to sync channels:', error)
+        // Don't mark as synced on error, allow retry
       }
-    } catch (error) {
-      console.error('[MessagingShell] Failed to sync channels:', error)
-      // Don't mark as synced on error, allow retry
-    }
-  }, [client, isConnected, debug])
+    },
+    [client, isConnected, debug, queryChannelsManager]
+  )
 
   // Sync existing channels to track which participants we can already message
   useEffect(() => {
@@ -163,12 +196,19 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     // Prevent repeated sync for the same user
     if (syncedRef.current === userId) return
 
-    syncChannels()
+    void syncChannels()
   }, [client, isConnected, syncChannels])
 
   // Load initial channel for direct conversation mode
   useEffect(() => {
-    if (!initialParticipantFilter || !client || !isConnected) return
+    if (
+      !initialParticipantFilter ||
+      !client ||
+      !isConnected ||
+      !queryChannelsManager
+    ) {
+      return
+    }
 
     const loadInitialChannel = async () => {
       const userId = client.userID
@@ -182,14 +222,14 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           )
         }
 
-        const channels = await client.queryChannels(
-          {
+        const channels = await queryChannelsManager.query({
+          requestKey: `direct:${userId}:${initialParticipantFilter}`,
+          filters: {
             type: 'messaging',
             members: { $eq: [userId, initialParticipantFilter] },
           },
-          {},
-          { limit: 1 }
-        )
+          options: { limit: 1 },
+        })
 
         if (channels.length > 0) {
           setSelectedChannel(channels[0])
@@ -197,9 +237,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           setDirectConversationError(null)
 
           // Notify parent component of channel selection
-          if (onChannelSelect) {
-            onChannelSelect(channels[0])
-          }
+          onChannelSelectRef.current?.(channels[0])
 
           if (debug) {
             console.log(
@@ -231,9 +269,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
               setDirectConversationError(null)
 
               // Notify parent component of channel selection
-              if (onChannelSelect) {
-                onChannelSelect(channel)
-              }
+              onChannelSelectRef.current?.(channel)
 
               if (debug) {
                 console.log(
@@ -271,7 +307,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
       }
     }
 
-    loadInitialChannel()
+    void loadInitialChannel()
   }, [
     initialParticipantFilter,
     initialParticipantData,
@@ -279,7 +315,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     isConnected,
     service,
     debug,
-    onChannelSelect,
+    queryChannelsManager,
   ])
 
   const handleChannelSelect = useCallback(
@@ -360,7 +396,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
       // Force re-sync to update the existing participants list
       syncedRef.current = null
-      await syncChannels()
+      await syncChannels({ forceFresh: true })
     },
     [syncChannels, debug]
   )
@@ -375,7 +411,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
       // Force re-sync to update the existing participants list
       syncedRef.current = null
-      await syncChannels()
+      await syncChannels({ forceFresh: true })
     },
     [syncChannels, debug]
   )

package/src/components/MessagingShell/queryChannelsManager.test.ts

@@ -0,0 +1,244 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  createQueryChannelsManager,
+  getRetryDelayMsFromRateLimitError,
+  isRateLimitError,
+} from './queryChannelsManager'
+
+type MockChannel = { id: string }
+
+describe('queryChannelsManager', () => {
+  it('dedupes in-flight requests for the same request key', async () => {
+    const resolverRef: { current: ((value: MockChannel[]) => void) | null } = {
+      current: null,
+    }
+
+    const queryChannels = vi.fn(
+      () =>
+        new Promise<MockChannel[]>((resolve) => {
+          resolverRef.current = resolve
+        })
+    )
+
+    const manager = createQueryChannelsManager({
+      client: { queryChannels } as never,
+      wait: async () => {},
+    })
+
+    const firstPromise = manager.query({
+      requestKey: 'direct:viewer:participant',
+      filters: {
+        type: 'messaging',
+      },
+      options: { limit: 1 },
+    })
+    const secondPromise = manager.query({
+      requestKey: 'direct:viewer:participant',
+      filters: {
+        type: 'messaging',
+      },
+      options: { limit: 1 },
+    })
+
+    expect(queryChannels).toHaveBeenCalledTimes(1)
+
+    const resolveQuery = resolverRef.current
+    expect(resolveQuery).toBeTypeOf('function')
+    if (!resolveQuery) {
+      throw new Error('Expected in-flight query resolver to be set')
+    }
+    resolveQuery([{ id: 'channel-1' }])
+
+    await expect(firstPromise).resolves.toEqual([{ id: 'channel-1' }])
+    await expect(secondPromise).resolves.toEqual([{ id: 'channel-1' }])
+  })
+
+  it('does not dedupe requests that use different request keys', async () => {
+    const queryChannels = vi.fn().mockResolvedValue([{ id: 'channel-1' }])
+
+    const manager = createQueryChannelsManager({
+      client: { queryChannels } as never,
+      wait: async () => {},
+    })
+
+    await manager.query({
+      requestKey: 'sync:user',
+      filters: {
+        type: 'messaging',
+      },
+      options: { limit: 1 },
+    })
+
+    await manager.query({
+      requestKey: 'sync:user:refresh:1',
+      filters: {
+        type: 'messaging',
+      },
+      options: { limit: 1 },
+    })
+
+    expect(queryChannels).toHaveBeenCalledTimes(2)
+  })
+
+  it('retries with retry-after header when queryChannels returns a 429 response', async () => {
+    const wait = vi.fn(async () => {})
+    const queryChannels = vi
+      .fn()
+      .mockRejectedValueOnce({
+        response: {
+          status: 429,
+          headers: {
+            'retry-after': '2',
+          },
+        },
+      })
+      .mockResolvedValueOnce([{ id: 'channel-1' }])
+
+    const manager = createQueryChannelsManager({
+      client: { queryChannels } as never,
+      wait,
+      maxRetries: 2,
+    })
+
+    const channels = await manager.query({
+      requestKey: 'direct:viewer:participant',
+      filters: {
+        type: 'messaging',
+      },
+      options: { limit: 1 },
+    })
+
+    expect(wait).toHaveBeenCalledWith(2000)
+    expect(queryChannels).toHaveBeenCalledTimes(2)
+    expect(channels).toEqual([{ id: 'channel-1' }])
+  })
+
+  it('falls back to x-ratelimit-reset header when retry-after is absent', () => {
+    const delay = getRetryDelayMsFromRateLimitError(
+      {
+        response: {
+          status: 429,
+          headers: {
+            'x-ratelimit-reset': '12',
+          },
+        },
+      },
+      0,
+      10_000
+    )
+
+    expect(delay).toBe(2_000)
+  })
+
+  it('retries for stream error code 9 even if status is unavailable', async () => {
+    const wait = vi.fn(async () => {})
+    const queryChannels = vi
+      .fn()
+      .mockRejectedValueOnce({
+        code: 9,
+        message:
+          'StreamChat error code 9: QueryChannels failed with error: "Too many requests"',
+      })
+      .mockResolvedValueOnce([{ id: 'channel-1' }])
+
+    const manager = createQueryChannelsManager({
+      client: { queryChannels } as never,
+      wait,
+      maxRetries: 2,
+    })
+
+    const channels = await manager.query({
+      requestKey: 'direct:viewer:participant',
+      filters: {
+        type: 'messaging',
+      },
+      options: { limit: 1 },
+    })
+
+    expect(wait).toHaveBeenCalledTimes(1)
+    expect(queryChannels).toHaveBeenCalledTimes(2)
+    expect(channels).toEqual([{ id: 'channel-1' }])
+  })
+
+  it('does not retry non-rate-limit errors', async () => {
+    const wait = vi.fn(async () => {})
+    const queryChannels = vi
+      .fn()
+      .mockRejectedValueOnce(new Error('network down'))
+
+    const manager = createQueryChannelsManager({
+      client: { queryChannels } as never,
+      wait,
+      maxRetries: 2,
+    })
+
+    await expect(
+      manager.query({
+        requestKey: 'direct:viewer:participant',
+        filters: {
+          type: 'messaging',
+        },
+        options: { limit: 1 },
+      })
+    ).rejects.toThrow('network down')
+
+    expect(wait).not.toHaveBeenCalled()
+    expect(queryChannels).toHaveBeenCalledTimes(1)
+  })
+
+  it('throws after max retries are exhausted', async () => {
+    const wait = vi.fn(async () => {})
+    const rateLimitError = {
+      response: {
+        status: 429,
+        headers: {},
+      },
+    }
+
+    const queryChannels = vi.fn().mockRejectedValue(rateLimitError)
+
+    const manager = createQueryChannelsManager({
+      client: { queryChannels } as never,
+      wait,
+      maxRetries: 1,
+    })
+
+    await expect(
+      manager.query({
+        requestKey: 'direct:viewer:participant',
+        filters: {
+          type: 'messaging',
+        },
+        options: { limit: 1 },
+      })
+    ).rejects.toBe(rateLimitError)
+
+    expect(wait).toHaveBeenCalledTimes(1)
+    expect(queryChannels).toHaveBeenCalledTimes(2)
+  })
+})
+
+describe('isRateLimitError', () => {
+  it('returns true for response status 429', () => {
+    expect(
+      isRateLimitError({
+        response: {
+          status: 429,
+        },
+      })
+    ).toBe(true)
+  })
+
+  it('returns true for stream code 9', () => {
+    expect(
+      isRateLimitError({
+        code: 9,
+      })
+    ).toBe(true)
+  })
+
+  it('returns false for non-rate-limit errors', () => {
+    expect(isRateLimitError(new Error('oops'))).toBe(false)
+  })
+})

package/src/components/MessagingShell/queryChannelsManager.ts

@@ -0,0 +1,174 @@
+import type { StreamChat } from 'stream-chat'
+
+type QueryChannelsFilters = Parameters<StreamChat['queryChannels']>[0]
+type QueryChannelsSort = Parameters<StreamChat['queryChannels']>[1]
+type QueryChannelsOptions = Parameters<StreamChat['queryChannels']>[2]
+type QueryChannelsResult = Awaited<ReturnType<StreamChat['queryChannels']>>
+
+const DEFAULT_MAX_RETRIES = 2
+const DEFAULT_BASE_DELAY_MS = 300
+const MAX_DELAY_MS = 10_000
+
+const sleep = async (ms: number): Promise<void> =>
+  await new Promise((resolve) => setTimeout(resolve, ms))
+
+type HeaderValue = string | number | string[] | undefined
+
+const getHeaderValue = (
+  headers: Record<string, unknown> | undefined,
+  headerName: string
+): HeaderValue => {
+  if (!headers) return undefined
+
+  const match = Object.entries(headers).find(
+    ([key]) => key.toLowerCase() === headerName.toLowerCase()
+  )
+  return match ? (match[1] as HeaderValue) : undefined
+}
+
+const toNumber = (value: unknown): number | null => {
+  const parsed = Number(value)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+const getErrorResponse = (
+  error: unknown
+): { status?: number; headers?: Record<string, unknown> } | null => {
+  if (!error || typeof error !== 'object') return null
+
+  const maybeResponse = (error as { response?: unknown }).response
+  if (!maybeResponse || typeof maybeResponse !== 'object') return null
+
+  return maybeResponse as { status?: number; headers?: Record<string, unknown> }
+}
+
+export const isRateLimitError = (error: unknown): boolean => {
+  const response = getErrorResponse(error)
+  if (response?.status === 429) return true
+
+  if (error && typeof error === 'object') {
+    const code = toNumber((error as { code?: unknown }).code)
+    if (code === 9) return true
+
+    const status = toNumber((error as { status?: unknown }).status)
+    if (status === 429) return true
+
+    const message = (error as { message?: unknown }).message
+    if (typeof message === 'string') {
+      const normalizedMessage = message.toLowerCase()
+      if (
+        normalizedMessage.includes('too many requests') ||
+        normalizedMessage.includes('rate limit')
+      ) {
+        return true
+      }
+    }
+  }
+
+  return false
+}
+
+export const getRetryDelayMsFromRateLimitError = (
+  error: unknown,
+  attempt: number,
+  nowMs = Date.now()
+): number => {
+  const headers = getErrorResponse(error)?.headers
+
+  const retryAfterHeader = getHeaderValue(headers, 'retry-after')
+  const retryAfterSeconds = toNumber(
+    Array.isArray(retryAfterHeader) ? retryAfterHeader[0] : retryAfterHeader
+  )
+  if (retryAfterSeconds !== null && retryAfterSeconds >= 0) {
+    return Math.min(Math.round(retryAfterSeconds * 1000), MAX_DELAY_MS)
+  }
+
+  const resetHeader = getHeaderValue(headers, 'x-ratelimit-reset')
+  const resetEpochSeconds = toNumber(
+    Array.isArray(resetHeader) ? resetHeader[0] : resetHeader
+  )
+  if (resetEpochSeconds !== null && resetEpochSeconds > 0) {
+    const delayMs = Math.round(resetEpochSeconds * 1000 - nowMs)
+    return Math.min(Math.max(delayMs, 0), MAX_DELAY_MS)
+  }
+
+  const exponentialBackoffMs = DEFAULT_BASE_DELAY_MS * 2 ** attempt
+  return Math.min(exponentialBackoffMs, MAX_DELAY_MS)
+}
+
+interface QueryRequest {
+  requestKey: string
+  filters: QueryChannelsFilters
+  sort?: QueryChannelsSort
+  options?: QueryChannelsOptions
+}
+
+interface QueryChannelsManagerConfig {
+  client: Pick<StreamChat, 'queryChannels'>
+  maxRetries?: number
+  wait?: (ms: number) => Promise<void>
+  now?: () => number
+  onRetry?: (details: {
+    requestKey: string
+    attempt: number
+    delayMs: number
+    error: unknown
+  }) => void
+}
+
+export const createQueryChannelsManager = ({
+  client,
+  maxRetries = DEFAULT_MAX_RETRIES,
+  wait = sleep,
+  now = Date.now,
+  onRetry,
+}: QueryChannelsManagerConfig) => {
+  const inFlightByRequestKey = new Map<string, Promise<QueryChannelsResult>>()
+
+  const query = async ({
+    requestKey,
+    filters,
+    sort = {} as QueryChannelsSort,
+    options = {} as QueryChannelsOptions,
+  }: QueryRequest): Promise<QueryChannelsResult> => {
+    const inFlightRequest = inFlightByRequestKey.get(requestKey)
+    if (inFlightRequest) {
+      return await inFlightRequest
+    }
+
+    const requestPromise = (async () => {
+      for (let attempt = 0; ; attempt += 1) {
+        try {
+          return await client.queryChannels(filters, sort, options)
+        } catch (error) {
+          if (!isRateLimitError(error) || attempt >= maxRetries) {
+            throw error
+          }
+
+          const delayMs = getRetryDelayMsFromRateLimitError(
+            error,
+            attempt,
+            now()
+          )
+          onRetry?.({
+            requestKey,
+            attempt: attempt + 1,
+            delayMs,
+            error,
+          })
+          await wait(delayMs)
+        }
+      }
+    })()
+
+    inFlightByRequestKey.set(requestKey, requestPromise)
+
+    try {
+      return await requestPromise
+    } finally {
+      inFlightByRequestKey.delete(requestKey)
+    }
+  }
+
+  return { query }
+}