使用 useQuery 时缺少 queryFn 错误答案

【问题标题】：Missing queryFn error when using useQuery使用 useQuery 时缺少 queryFn 错误
【发布时间】：2022-01-16 01:12:06
【问题描述】：

正如标题所示，我是使用 useQuery 和相关库的新手，我正在尝试使用它来获取数据，然后填充我创建的字段列表但是，当我运行它时，它发出两个请求后出现此错误

Missing queryFn index.js:1
    e index.js:1
    onError query.js:356
    reject retryer.js:67
    run retryer.js:132
    (Async: promise callback)
    run retryer.js:116
    Retryer retryer.js:156
    fetch query.js:330
    executeFetch queryObserver.js:199
    onSubscribe queryObserver.js:40
    subscribe subscribable.js:16
    useBaseQuery useBaseQuery.js:60
    React 5
    unstable_runWithPriority scheduler.development.js:468
    React 3
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    (Async: EventHandlerNonNull)
    js scheduler.development.js:180
    js scheduler.development.js:645
    Webpack 21

据我所知，我已经传递了一个查询函数，所以我很困惑为什么会显示这个错误我可以看到服务器正在接收请求并看似发送它，我已经在其他地方进行了测试并且服务器确实发送它所以它必须与我的代码有关吗？

const URL = 'http://localhost:3500/monster';
const fetchMonster = async (id) => {
    console.log(id);
    let res = await fetch(`${URL}/${id}`);
    if (!res.ok) {
        throw new Error('Network response was not ok');
    }
    return res.json;
};
const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            retry: process.env.NODE_ENV === 'production',
            refetchOnWindowFocus: false,
        },
    },
})

function EditMonster(props) {
    let { slug } = useParams();
    return (
        <QueryClientProvider client={queryClient}>
            <Query
                slug={slug} />
        </QueryClientProvider>
    )
}

function Query(props) {
    const { isLoading, error, data } = useQuery('monster', fetchMonster(props.slug))

    if (isLoading) return 'Loading...';
    if (error) return 'An error has occured: ' + error.message;

    return (
        <AttributeFields name='Edit Monster' method='PATCH' monster={data} />
    )
}

【问题讨论】：

标签： reactjs react-hooks fetch react-query

【解决方案1】：

useQuery('monster', fetchMonster(props.slug))

此代码不会将函数传递给 useQuery - 它会立即调用该函数。你想要的是：

useQuery('monster', () => fetchMonster(props.slug))

附带说明，查询函数的依赖项应该转到查询键：

useQuery(['monster', props.slug], () => fetchMonster(props.slug))

【讨论】：