自定义React Query Hook重命名返回data属性为customUser的实现问题

最简实现代码 #

直接在自定义Hook内部解构useQuery返回值时完成重命名，不需要的属性直接不接收即可：

import { useQuery } from '@tanstack/react-query'
// 替换为你自己的用户请求方法
import { getUserInfo } from './api/user'

const useUserInfo = (userId: string | number) => {
  // 解构时用冒号语法完成重命名，仅接收data属性，其余冗余属性直接丢弃
  const { data: customUser } = useQuery({
    queryKey: ['userInfo', userId],
    queryFn: () => getUserInfo(userId)
  })
  // 仅返回重命名后的属性，无冗余字段
  return { customUser }
}

业务侧调用示例 #

同文件调用多个Hook不会出现变量重名冲突：

const UserPage = () => {
  // 调用第一个用户查询
  const { customUser: currentUser } = useUserInfo('1001')
  // 调用第二个用户查询
  const { customUser: adminUser } = useUserInfo('admin')

  return (
    <div>
      <p>当前用户：{currentUser?.nickname}</p>
      <p>管理员：{adminUser?.nickname}</p>
    </div>
  )
}

常见失效原因 #

之前重命名后功能无法正常运行，大概率是犯了以下错误：

• 把解构重命名的冒号语法写错成默认值等号语法：const { data = customUser }，该写法是给data设置默认值为customUser，完全不符合重命名需求
• 对data做了额外的响应式丢失操作：比如在Hook内写了const customUser = { ...data }这种浅拷贝操作，破坏了React Query的响应式更新逻辑
• TS场景下没有给useQuery设置正确的泛型，导致返回的customUser类型不符合预期，只需要给useQuery传入你的用户数据类型即可：useQuery<UserType>({...})

内容的提问来源于stack exchange，提问作者Jesper van den Munckhof