React Hooks结合Supabase如何实现成员表与频道表关联查询？

解决方案 #

你可以直接使用Supabase原生的in查询算子批量匹配所有从members表拿到的channelId，无需遍历单条查询，同时增加依赖处理和数据合并逻辑即可：

修改后的完整代码 #

import { useMemo, useEffect, useState } from 'react'
import { useClient, useFilter, useRealtime } from 'react-supabase'

const useChats = (userId = '94a9aa95-c794-404a-9a37-7f424b215ebb') => {
  // 定义chats类型为成员+频道字段的合并类型
  const [chats, setChats] = useState<(DB.Member & Partial<DB.Channel>)[]>([])
  const client = useClient()

  // 成员表查询过滤器，userId改为可传入参数，可根据需求调整
  const memberFilter = useFilter<DB.Member>((query) =>
    query.eq('userId', userId).limit(10),
    [userId]
  )
  const [{ 
    data: memberData, 
    loading: memberLoading, 
    error: memberError 
  }] = useRealtime<DB.Member>('members', {
    select: {
      columns: 'id, channelId, name, image, read',
      filter: memberFilter,
    },
  })

  // 提取所有需要查询的channelId，自动去重避免重复查询
  const channelIds = useMemo(() => {
    if (!memberData) return []
    return [...new Set(memberData.map(member => member.channelId))]
  }, [memberData])

  // 频道表过滤器，使用in批量匹配所有channelId
  const channelFilter = useFilter<DB.Channel>((query) => {
    // 没有channelId时返回空查询避免报错
    if (channelIds.length === 0) return query.eq('id', '').limit(0)
    return query.in('id', channelIds).limit(10)
  }, [channelIds])

  const [{ 
    data: channelData, 
    loading: channelLoading, 
    error: channelError 
  }] = useRealtime<DB.Channel>('channels', {
    select: {
      columns: 'id, lastActive, lastMessage',
      filter: channelFilter,
    },
    // 没有有效channelId时不发起查询，避免无效请求
    enabled: channelIds.length > 0
  })

  // 合并成员和频道数据得到最终chats列表
  useEffect(() => {
    if (!memberData || !channelData) {
      setChats([])
      return
    }
    const mergedChats = memberData.map(member => {
      const matchedChannel = channelData.find(channel => channel.id === member.channelId)
      return {
        ...member,
        ...(matchedChannel || {})
      }
    })
    setChats(mergedChats)
  }, [memberData, channelData])

  // 可按需返回加载、错误状态供上层组件做交互处理
  return {
    chats,
    loading: memberLoading || channelLoading,
    error: memberError || channelError
  }
}

export { useChats }

关键修改说明 #

• 用in算子替代eq，一次性批量查询所有关联的频道，避免多次请求的性能损耗
• 增加useMemo提取去重后的channelId，减少不必要的查询触发
• 给useFilter添加对应依赖，保证数据更新后过滤器自动同步
• 增加enabled配置，无有效channelId时不发起频道查询，避免无效请求
• 新增useEffect合并成员和频道数据，得到同时包含两边字段的chats数组
• 增加了加载、错误状态返回，方便上层组件做加载态、错误提示等交互处理

内容的提问来源于stack exchange，提问作者Herbie Vine