如何在TRPC中失效查询并获取最新数据？mutation后刷新失败

问题出在你调用utils.invalidateQueries()时没有指定具体的查询键，TRPC无法确定要刷新哪些查询缓存，所以不会触发数据更新。

解决步骤： #

• 明确指定要失效的查询键
  你需要传入与前端查询对应的键数组（就是你用trpc.useQuery时的第一个参数）。比如：

  • 如果你的频道详情查询是trpc.useQuery(['get-channel', channelId])，就传入['get-channel', parseInt(channel.id)]
  • 如果是获取所有频道的查询trpc.useQuery(['get-channels'])，就传入['get-channels']

• 确保查询键完全匹配
  TRPC的缓存失效是精确匹配键的，带参数的查询必须传入完整的键数组，只传前缀不会匹配到带参数的查询。

修改后的代码示例： #

const utils = trpc.useContext()
const markAsUnreadMutation = trpc.useMutation(['update-mark-as-unread'], {
  onSuccess() {
    // 替换成你实际使用的查询键，这里以单频道查询为例
    utils.invalidateQueries(['get-channel', parseInt(channel.id)])
  },
  onError(data) {
    toast({
      type: 'error',
      message: data.message,
    })
  },
})

function markAsUnread(isUnread: boolean) {
  markAsUnreadMutation.mutate({
    id: parseInt(channel.id),
    markAsUnread: isUnread,
  })
}

可选：模糊匹配查询前缀 #

如果需要失效一批同前缀的查询，可以用对象参数指定前缀：

utils.invalidateQueries({ queryKey: ['get-channel'] })

这会失效所有以['get-channel']为前缀的查询（比如['get-channel', 1]、['get-channel', 2]等）。

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