使用React Query (TRPC)进行乐观更新

Question

我不知道如何使用trpc进行乐观的更新？这是“内置”还是必须使用的useQuery钩子？

到目前为止，我正在尝试这样做，但它不起作用：

 const queryClient = useQueryClient();

    const updateWord = trpc.word.update.useMutation({
        onMutate: async newTodo => {
            // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
            await queryClient.cancelQueries({ queryKey: ['text', 'getOne'] })

            // Snapshot the previous value
            const previousText = queryClient.getQueryData(['text', 'getOne'])

            // Optimistically update to the new value
            queryClient.setQueryData(['text', 'getOne'], old => old ? {...old, { title: "Hello" }} : undefined)

            // Return a context object with the snapshotted value
            return { previousText }
        },
//...

这看上去应该有意义吗？它正在更新值，但不是乐观的。

Answer 1

trpc v10通过自己的useContext钩子提供了来自queryClient的大多数函数的类型安全变体：

const utils = trpc.useContext()

那么，你应该能够做到：

utils.text.getOne.cancel()
utils.text.getOne.getData()
utils.text.getOne.setData()

请参阅：https://trpc.io/docs/useContext