使用React-Query v4调用useQuery时报错Missing queryFn的原因是什么？

你在使用React Query时遇到了如下错误：

error = Missing queryFn

相关代码如下：

组件中的React Query调用 #

const blogQuery = useQuery(['blog'], getBlog(id));

api.js中的API请求函数 #

export const getBlog = async (id) => {
  try {
    const res = await axios.get(`${API_URL}/blogs/${id}`);
    return res.data;
  } catch (err) {
    throw new Error('An error occurred while fetching Blogs');
  }
};

组件内的错误检查逻辑 #

blogQuery.error.message
  ? 'error.message = ' + blogQuery.error.message
  : 'error = ' + blogQuery.error

错误原因 #

React Query的useQuery钩子第二个参数要求传入一个函数（也就是查询函数queryFn），但你现在直接执行了getBlog(id)，这会立刻触发异步请求并返回一个Promise对象，而不是传递给React Query一个可执行的函数。

因为React Query没有拿到预期的查询函数，所以抛出了"Missing queryFn"这个错误。

修正方案 #

把第二个参数改成匿名函数，让React Query在合适的时机自行调用查询逻辑：

// 正确写法：传递函数而非直接执行结果
const blogQuery = useQuery(['blog', id], () => getBlog(id));

另外建议把id加入查询键数组['blog', id]，这样当id值变化时，React Query会自动识别并重新发起新的查询，避免缓存数据混乱。

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