React Queryで取り出したデータが表示できない(Next.js)

Question

下記のコードでデータを表示しようとしたのですが、dataのところがundefinedになってしまい、fetchはできてもデータが表示できません。

//novelByUser.tsx
import {useGetNovelByUser} from "./api/novelByUser.hooks"
import Link from "next/link"

// @ts-ignore to ignore the type checking errors on the next line in a TypeScript
export const NovelByUser = (user_id) => {
// @ts-ignore to ignore the type checking errors on the next line in a TypeScript
 const {data, isLoading, status} = useGetNovelByUser(user_id.user_id)
 return(
 <div className="grid grid-cols-5 gap-4">
          <div></div>
          <div className="col-span-3">
          {!isLoading ? 
          (
          <ul>
            {
              console.log(data)//テストのためにここでコンソールに表示してみたが、undefinedと出る。
            }
　　　　
            {  // @ts-ignore to ignore the type checking errors on the next line in a TypeScript
            data?.data.map(x => 
              <>
              <li key={x.title} className = "bg-gray-100 hover:bg-gray-200">
                <div className = "flow-root">
                  <p className = "float-left">
                  <Link href= {`/NovelDetails/${encodeURIComponent(x.id)}`}>
                    <a className = "hover:text-green-500"> {x.title} </a>
                  </Link>
                  </p>
                </div>
                <p>{x.published_date}</p>  
              </li>
              </>
            )
            }
          </ul>) : 'Loading...'}
          </div>
          <div></div>
      </div>
 )

//novelByUser.hooks.ts
import { useQuery } from "react-query";
export enum ServerStateKeysEnum {
    NovelsByUser = 'NovelsByUser'
}
  // @ts-ignore to ignore the type checking errors on the next line in a TypeScript
  export const useGetNovelByUser = async (user_id) => {
    const id   = encodeURIComponent(user_id);
    const query = await useQuery(
    ServerStateKeysEnum.NovelsByUser,
    () => fetch(`https://myapi-on-heroku.com/novelsByUserId/${id}`)
    .then(res=>
      {
        const result = res.json();
        return result
      })
      .then(res=>
        {
        return res})
      .catch((error) => {
        console.error('Error:', error);
      })
  );
   console.log(query)//ここはこんな感じObject { status: "success", isLoading: false, isSuccess: true, isError: false, isIdle: false, data: {…}, dataUpdatedAt: 1650076340286, error: null, errorUpdatedAt: 0, failureCount: 0, … }
   return query
  }

コンソールの状況をもう少し詳しく書くと、

undefined
Object { status: "loading", isLoading: true, isSuccess: false, isError: false, isIdle: false, data: undefined, dataUpdatedAt: 0, error: null, errorUpdatedAt: 0, failureCount: 0, … }
undefined
Object { status: "success", isLoading: false, isSuccess: true, isError: false, isIdle: false, data: {…}, dataUpdatedAt: 1650076340286, error: null, errorUpdatedAt: 0, failureCount: 0, … }

のような感じになっており、恐らくnovelByUser.hooks.tsでローディングが終わった後にnovelByUser.tsxが何もしていないために const {data, isLoading, status} = useGetNovelByUser(user_id.user_id)が正しく動作しないのだろうと推測されますが、どうしたらいいかわかりません。
_app.tsxにあるReactQueryのキャッシュの設定はこんな感じです。

//tailwind style is imported
import '../styles/main.css'
import {AppProps} from 'next/app'
import { SessionProvider } from "next-auth/react";
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
const queryCache = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,//trueにしてみたけど結果は変わらず
      retry: false,//trueにしてみたけど結果は変わらず
      staleTime: 30000,
    },
  },
});
function MyApp({ Component, pageProps: {session, ...pageProps} }: AppProps) {
  return (
  <SessionProvider session={session}>
    <QueryClientProvider client={queryCache}>
    <Component {...pageProps} />
    </QueryClientProvider>
  </SessionProvider>
  )
}

export default MyApp

Answer 1

自己解決しました。async awaitをReact queru hooksに採用していたのがまずかったみたいです。下記のコードで問題なく動作します。

//novelByUser.hooks.ts
import { useQuery } from "react-query";
export enum ServerStateKeysEnum {
    NovelsByUser = 'NovelsByUser'
}
  // @ts-ignore to ignore the type checking errors on the next line in a TypeScript
  export const useGetNovelByUser = (user_id) => {
    const id   = encodeURIComponent(user_id);
    const query = useQuery(
    ServerStateKeysEnum.NovelsByUser,
    () => fetch(`https://myapi-on-heroku.com/novelsByUserId/${id}`)
    .then(res=>
      {
        const result = res.json();
        return result
      })
      .then(res=>
        {
        return res})
      .catch((error) => {
        console.error('Error:', error);
      })
  );
   console.log(query)//ここはこんな感じObject { status: "success", isLoading: false, isSuccess: true, isError: false, isIdle: false, data: {…}, dataUpdatedAt: 1650076340286, error: null, errorUpdatedAt: 0, failureCount: 0, … }
   return query
  }