Next.js 14中如何在TRPC+React Query中跨组件触发通知计数重取？

要实现标记通知已读后自动更新BadgedUserAvatar组件中的通知计数，核心是利用TRPC（基于React Query）的缓存失效机制，让计数查询自动重新获取最新数据。以下是两种简洁的实现方式：

方法一：在Mutation的onSuccess中手动失效计数查询 #

直接在标记已读的mutation成功回调里，调用TRPC提供的invalidate方法触发计数查询的重取：

export default function Inbox(): JSX.Element {
  // ... 其他代码
  const { data, isLoading, refetch } = trpc.inbox.search.useQuery({
    query: { offset: 0, limit: 5, status: InboxMessageStatus.UNREAD },
  });

  const { mutate: readNotification } = trpc.inbox.read.useMutation({
    onSuccess: async () => {
      // 先重取通知列表
      await refetch();
      // 失效计数查询，触发BadgedUserAvatar组件重新获取最新计数
      await trpc.inbox.count.invalidate();
    },
  });
  // ... 其他代码
}

方法二：用TRPC的invalidates配置自动失效查询 #

更简洁的方式是在mutation配置中直接指定要失效的查询，无需手动在onSuccess里调用：

export default function Inbox(): JSX.Element {
  // ... 其他代码
  const { data, isLoading, refetch } = trpc.inbox.search.useQuery({
    query: { offset: 0, limit: 5, status: InboxMessageStatus.UNREAD },
  });

  const { mutate: readNotification } = trpc.inbox.read.useMutation({
    onSuccess: () => refetch(),
    // 自动失效计数查询
    invalidates: [{ type: 'query', procedure: trpc.inbox.count }],
  });
  // ... 其他代码
}

原理说明 #

TRPC基于React Query实现数据缓存，当你调用invalidate或者配置invalidates时，对应的查询缓存会被标记为"失效"。BadgedUserAvatar组件中的trpc.inbox.count.useQuery()会自动检测到缓存失效，重新发起请求获取最新的通知计数，无需手动传递状态或触发重取。

内容的提问来源于stack exchange，提问作者Ignacio García