React Query 不获取 API - 导致数据返回“undefined”

问：

我一直在尝试使用与另一个项目中对我有用的相同代码模式从 JSON 服务器获取数据。但是，这次该函数似乎由于某种原因没有被调用，导致数据返回“未定义”。我在这里错过了什么？GET@tanstack/react-query

以下是组件中的代码：task-list.tsx

import { fetchAllTasks } from "../../api/tasks-api"
import TaskItem from "./task-item/task-item"

import style from './task-list.module.scss'



const TaskList = () => {

    // This supposed to work, but isn't!
    const { data: tasks, isLoading } = fetchAllTasks()
    

    // This logs: undefined
    console.log('tasklists - fetchAllTasks:', tasks) 


    return (
        <div className={`${style['TaskList']}`}>
            <ul>
                {
                    !isLoading && tasks && tasks?.length < 1 ?
                        <p className={`${style['no-task']}`}>
                            +++ Task List is Empty +++
                        </p>
                        :
                        tasks?.map((task) =>
                            <TaskItem
                                key={task.toString()}
                                atom={task}
                            />
                        )
                }
            </ul>
        </div>
    )
}

export default TaskList

这是 ：fetchAllTasks()task-api.ts

import { useQuery } from "@tanstack/react-query"
import axios from "axios"
import { Task } from "../types"


export const fetchAllTasks = () => {

    return useQuery({
        queryKey: ['tasks'],
        queryFn: async () => {
            const response = await axios.get('http://localhost:3100/tasks')
            const data: unknown = await response.data()
            
            // This doesn't appear in the console log at all
            console.log('data: ', data)


            return data as Task[]
        }
    })
}

以下是浏览器中显示的内容：

以下是来自后端的响应：

以下是页面刷新后浏览器的网络选项卡的外观。

项目存储库的链接：https://github.com/iceyisaak/todoapp/tree/tanstack-query/src

非常感谢:)