Drizzle ORM中useLiveQuery未检测参数变化致查询异常

问题分析 #

核心问题是useLiveQuery无法感知动态生成的ids数组变化：每次组件渲染时，habits.map(...)都会生成新的数组引用，而useLiveQuery默认仅对比引用是否相同，不会深度校验数组内容。传入固定数组[1,2]时引用稳定且内容有效，所以能正常返回结果；但动态生成的ids每次引用不同却未被识别为有效变化，导致第二个查询始终用初始空数组执行，返回0条结果。

解决方案 #

用useMemo缓存ids数组，确保仅当habits实际变化时才生成新的数组引用；同时将缓存后的ids作为第二个useLiveQuery的显式依赖项传入，让查询能感知参数变化并重新执行。

修改后的代码 #

import { useMemo } from 'react';
// 导入你的schema、db、eq、inArray等依赖

const { data: habits } = useLiveQuery(
  db.query.habits.findMany({
    where: eq(schema.habits.userId, parseInt(userId as string)),
  })
);

// 用useMemo缓存ids，仅在habits变化时更新
const ids = useMemo(() => {
  return habits ? habits.map((h) => h.habitId) : [];
}, [habits]);

// 显式传入ids作为查询依赖，触发参数变化后的重新查询
const { data: tasks } = useLiveQuery(
  db.query.tasks.findMany({
    where: inArray(schema.tasks.habitId, ids),
  }),
  [ids]
);

补充说明 #

• useMemo避免了每次渲染都生成新数组，既减少不必要的性能消耗，也保证了数组引用的稳定性。
• 显式声明依赖数组[ids]是关键，能让useLiveQuery明确感知查询条件的变化，确保查询逻辑实时响应数据更新。

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