如何在tRPC v10的useQuery中正确使用onSuccess？

问题场景 #

使用T3栈体验tRPC时，尝试在useQuery请求成功后更新前端状态，出现以下TypeScript错误：

Argument of type '{ onSuccess: (shoppingList: ShoppingItem[]) => void; }' is not assignable to parameter of type 'void'.

前端代码 #

const [items, setItems] = useState<ShoppingItem[]>([]);
const { data: itemsData, isLoading } = trpc.item.getItem.useQuery({
  onSuccess: (shoppingList) => {
    setItems(shoppingList);
  },
});

后端路由代码 #

getItem: publicProcedure.query(async ({ ctx }) => {
  const items = await ctx.prisma.shoppingItem.findMany();
  return items;
})

解决方案 #

错误核心是useQuery的参数传递顺序错误：
tRPC的useQuery第一个参数是查询的输入参数（你的后端getItem是无参数的query，因此该位置需传入undefined），onSuccess这类配置选项属于第二个参数位置。

修正后的前端代码：

const [items, setItems] = useState<ShoppingItem[]>([]);
const { data: itemsData, isLoading } = trpc.item.getItem.useQuery(
  undefined, // 无查询参数时传入undefined
  {
    onSuccess: (shoppingList) => {
      setItems(shoppingList);
    },
  }
);

额外优化 #

无需额外维护items状态，直接使用useQuery返回的data即可减少冗余：

const { data: items, isLoading } = trpc.item.getItem.useQuery(undefined);
// 直接用items渲染，无需手动调用setItems

内容的提问来源于stack exchange，提问作者117_darshan suthar