React Query useQuery钩子传入对象参数报错，求正确使用方式

核心问题：queryKey必须是数组类型 #

使用对象形式传参时，queryKey的要求和非对象形式完全一致——必须是数组类型，哪怕只需要一个标识值，也得用数组包裹。这是React Query缓存机制的硬性要求，数组结构能支持多维度的缓存键（比如结合用户ID、分页参数等）。

错误示例（常见引发报错的写法） #

// 错误：queryKey直接传入字符串，不符合数组要求
const { data } = useQuery({
  queryKey: 'userList',
  queryFn: () => fetch('/api/users').then(res => res.json())
});

正确写法 #

// 正确：queryKey为数组类型，哪怕只有一个元素
const { data, isLoading, error } = useQuery({
  queryKey: ['userList'],
  queryFn: async () => {
    const response = await fetch('/api/users');
    if (!response.ok) {
      throw new Error('Failed to fetch users');
    }
    return response.json();
  }
});

进阶场景：多参数queryKey #

如果需要结合动态参数（比如用户ID、分页条件），直接在数组中添加对应元素即可，React Query会根据整个数组的内容生成唯一缓存键：

const userId = 123;
const currentPage = 2;

const { data } = useQuery({
  queryKey: ['userDetail', userId, { page: currentPage }],
  queryFn: async () => {
    const response = await fetch(`/api/users/${userId}?page=${currentPage}`);
    return response.json();
  }
});

额外排查点 #

1. 如果你用的是TypeScript，报错可能是类型不匹配，确保queryKey的类型符合QueryKey（即unknown[]）
2. 检查@tanstack/react-query版本，旧版本可能对对象式传参的支持有缺陷，建议升级到最新稳定版

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