使用 useQuery 时缺少 queryFn 错误

Question

正如标题所示，我是使用 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} />
    )
}

Answer 1

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

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

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

附带说明一下，查询函数的依赖关系应该转到查询键：

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

Answer 2

对于那些寻找 2022 年答案的人，您只需将第一个参数作为数组传递给 useQuery ，如下所示：

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

并且您的请求有效。