Tanstack React Query：分离API服务与Hook时数据返回Undefined问题

我正在搭建一个基于NX的React应用，使用Tanstack React Query管理API调用与状态。尝试将API逻辑拆分到服务文件中，再通过自定义Hook结合React Query处理数据请求，但遇到问题：尽管API调用看似成功，Hook返回的数据却为undefined。

服务层代码 #

export const getUser = async (): Promise<IUser> => {
  const { getAccessTokenSilently } = useAuth0()

  const token = await getAccessTokenSilently({
    authorizationParams: {
      audience: 'secret audience here',
      scope: 'read:posts',
    },
  })

  const http = useAxios(config.server.apiEndUserUrl, token)
  const { data: user } = await http.get<{ data: IUser }>(GET_ACCOUNT)

  return user.data // 返回用户数据
}

Hook代码 #

import { getUser } from '@react-webapp/services'
import { useQuery } from '@tanstack/react-query'

export const useEndUser = () => {
  return useQuery({
    queryKey: ['getEndUser'],
    queryFn: getUser,
  })
}

使用方式 #

const [user, setUser] = useState<IUser>(INITIAL_USER)
const { data: fetchedUser, isLoading, error } = useEndUser()

useEffect(() => {
  console.log('fetchedUser', fetchedUser)

  if (fetchedUser) setUser(fetchedUser)
}, [fetchedUser, isLoading])

输出结果：fetchedUser undefined

可行的代码写法（逻辑直接写在Hook内） #

export const useEndUser = () => {
  const { getAccessTokenSilently } = useAuth0()

  return useQuery({
    queryKey: ['endUser'],
    queryFn: async () => {
      const token = await getAccessTokenSilently({
        authorizationParams: {
          audience: 'audience here',
          scope: 'read:posts',
        },
      })

      const http = useAxios(config.server.apiEndUserUrl, token)

      const { data: user } = await http.get<{ data: IUser }>(GET_ACCOUNT)
      return user.data
    },
  })
}

我希望实现API服务层与Query Hook的分离，想了解问题原因是什么？

技术环境：React + NX，Node版本v20.14.0，@tanstack/react-query版本^5.59.0

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