tRPC升级至v10正式版后useContext中setData报错的问题咨询

问题背景 #

将tRPC从v10-rc版本升级至v10.4.3正式版后，使用trpc.useContext的setData方法时出现类型错误，升级前后依赖版本如下：

升级前 #

├── @tanstack/react-query@4.14.6
├── @trpc/client@10.0.0-rc.4
├── @trpc/next@10.0.0-rc.4
├── @trpc/react-query@10.0.0-rc.4
├── @trpc/server@10.0.0-rc.4

升级后 #

├── @tanstack/react-query@4.14.6
├── @trpc/client@10.4.3
├── @trpc/next@10.4.3
├── @trpc/react-query@10.4.3
├── @trpc/server@10.4.3

报错代码与提示 #

报错代码片段 #

import { useStore } from 'src/store/store'
import { trpc } from 'src/utils/trpc'

export const useMutateItem = () => {
  const utils = trpc.useContext()
  const reset = useStore((state) => state.resetEditedItem)

  const createItemMutation = trpc.item.createItem.useMutation({
    onSuccess(input) {
      const previousItems = utils.item.getAllItems.getData()
      if (previousItems) {
        utils.item.getAllItems.setData([...previousItems, input]) // 此处报错
      }
      reset()
    }
  })
  // ...
  return { createItemMutation, ... }
}

错误提示 #

(method) setData(input: void | undefined, updater: Updater<(Item & {
    tags: Tag[];
})[] | undefined, (Item & {
    tags: Tag[];
})[] | undefined>, options?: SetDataOptions | undefined): void

Expected 2-3 arguments, but got 1.ts(2554)
utilsProxy.d.ts(46, 45): An argument for 'updater' was not provided.

解决方案 #

因为getAllItems是无参数的查询，在tRPC v10正式版中，调用setData时必须传入第一个参数（对应查询的输入），即使没有参数也要传undefined或者void 0，修正后的代码如下：

// 直接传入新数据的写法
utils.item.getAllItems.setData(undefined, [...previousItems, input])

// 更稳妥的函数式更新写法（推荐，避免竞态问题）
utils.item.getAllItems.setData(undefined, (prev) => prev ? [...prev, input] : [input])

关于tRPC input与TanStack Query queryKey的区别 #

1. tRPC的input：是你定义的查询/突变函数接收的参数，比如getItem接收{id: string}，这个{id: string}就是input。对于无参数的查询，input就是undefined/void。
2. TanStack Query的queryKey：是用来唯一标识查询的数组，tRPC会自动帮你生成这个数组——它由tRPC的路由路径（比如item.getAllItems）加上你的input组成。比如：
   • 无参数的getAllItems，对应的queryKey是['item', 'getAllItems']
   • 带参数{id: 1}的getItem，对应的queryKey是['item', 'getItem', {id: 1}]

tRPC的setData方法是对TanStack QuerysetQueryData的封装，第一个参数需要传入该查询的input，tRPC会用它来拼接出对应的queryKey，从而定位到要更新的查询缓存。

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