如何在React客户端使用TanStack Query改写缓存并添加数据？

你的代码无法更新客户端数据的核心原因是：添加产品成功后没有同步更新React Query的缓存，另外还有一处冗余代码需要清理。

问题点拆解 #

• 创建了QueryCache实例但完全没用到，属于无效代码
• onSuccess回调为空，没有在请求成功后更新本地缓存，导致客户端数据不会自动刷新

修复后的代码 #

export const usePostProduct = (): UseMutationResult<AxiosResponse<IProduct, any>, unknown, CreatingProduct, unknown> => {
    const queryClient = useQueryClient()
    
    return useMutation(['products'], (data: CreatingProduct) => {
        return Product.addOne(data)
    }, {
        onSuccess(response) {
            // 方式1：直接更新缓存，把新添加的产品插入到现有列表头部
            queryClient.setQueryData<IProduct[]>(['products'], (oldProducts) => {
                if (!oldProducts) return [response.data]
                return [response.data, ...oldProducts]
            })

            // 方式2：如果需要重新拉取最新数据，用 invalidateQueries 触发列表查询刷新
            // queryClient.invalidateQueries(['products'])
        }
    })
}

代码说明 #

• 删掉了无用的QueryCache实例，直接用useQueryClient提供的客户端操作缓存
• 在onSuccess里通过两种方式更新缓存：
  • setQueryData：直接修改本地缓存，无需重新请求，适合需要即时显示新增数据的场景
  • invalidateQueries：标记products查询为失效，触发重新请求，适合需要确保数据完全和服务端一致的场景

你可以根据业务需求选择其中一种方式，这样添加产品后客户端数据就能正常更新了。

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