【React】@tanstack/react-queryライブラリのuseQuery関数について

Question

実現したいこと

以下のエラーを解決したいです。
現在エラー原因は、useQuery関数の戻り値である左辺のプロパティの型に問題があると推測しています。
サイトで調べましたが修正箇所が把握できておりません。
ご存知の方、問題のある箇所を御指摘して頂きたく思います。
宜しくお願いします。

発生している問題・分からないこと

●エラー内容
Bad argument type. Starting with v5, only the "Object" form is allowed when calling query related functions. Please use the error stack to find the culprit call. More info here: https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#supports-a-single-signature-one-object

該当のソースコード

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import QueryBasic from './practiceFiles/QueryBasic.js';
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const root = ReactDOM.createRoot(document.getElementById('root'));

const que = new QueryClient();
root.render(
  <QueryClientProvider client={que}>
    <QueryBasic />
  </QueryClientProvider>
)

import { useQuery } from "@tanstack/react-query";

// 2000ミリ秒、処理を停止させる関数
const sleep = delay => new Promise(resolve => setTimeout(resolve, delay));

// 天気情報を取得する関数
const fetchWeather = async () => {
  // 意図的に処理を停止させる関数
  await sleep(2000);
  const res = await fetch("https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=〇〇");

  // 非同期処理が成功
  if(res.ok) {
    return res.json();
  } else {
    throw new Error(res.statusText);
  }
}

// React-queryを用いた天気情報の取得
export default function QueryBasic() {
  const {data, isLoading, isError, error} = useQuery("weather", fetchWeather);

  // 非同期処理が途中の場合（ビュー）
  if(isLoading) {
    return (
      <p>Now Loading...</p>
    )
  }

  // 非同期処理がエラーの場合（ビュー）
  if(isError) {
    return (
      <p>Error: {error.message}</p>
    )
  }


  // 天気情報取得後のビュー
  return (
    <figure>
      <img src={`https://openweathermap.org/img/wn/${data?.weather?.[0]?.icon}.png`} />
      <figcaption>{data?.weather?.[0]?.description}</figcaption>
    </figure>
  )
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

【参照したサイト】
https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#supports-a-single-signature-one-object

https://zenn.dev/counterworks/articles/react-query-update-v4-to-v5

補足

特になし

Comments

[maisumakun]

エラーメッセージからリンクしているページに従った書き換えは行ないましたでしょうか。

[kosuke05]

maisumakun様
返信が遅くなりすみません。

エラー文のリンクを参考に以下に修正しました。
下記の内容でエラーは消え、想定通りに表示できましたが、記述に不備はありますでしょうか？
ご多忙の中すみませんが、ご確認をして頂きたく思います。

useQuery({queryKey: ["weather"], queryFn: fetchWeather})

queryKeyプロパティの値に関しては、当初配列にはしていませんでしたが、
配列にするよう警告が表示されたため修正しました。

[maisumakun]

それで特に問題ないかと思います。

[kosuke05]

maisumakun様
こちらの事象については解決することが出来ました。
ご返信と助言を頂き有難うございます。

Answer 1

コードを以下に修正することで解決ができました。
原因はreact-queryライブラリの現在のバージョンに適用できていなかったため、旧式の書き方をしてしまっていました。
（useQuery関数の引数は現在はオブジェクトで記述すること、keyの値は配列で記述すること）

修正箇所については、エラー内に記載されていたURLに遷移することで確認ができます。

●修正前
useQuery("weather", fetchWeather)

●修正後
useQuery({queryKey: ["weather"], queryFn: fetchWeather})

●エラー内のURL
https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#supports-a-single-signature-one-object