Tanstack Queryを使ってつまづいたところを書くスクラップ

このスクラップはhaiku1135がフェッチ関連をTanstack Queryで統一する際につまづいたところを初歩の初歩である点から多すぎるuseQueryやuseMutationの多すぎて時には何に使うかすら分からないようoptionまで全て記載していくスクラップです。

認証系をuseContextでまとめたAuthProviderの外側でQueryClientProviderを呼び出していた。

その際に出ていたエラー

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["hoge"]

このエラーの根本的原因はクエリ関数がundefinedを返しているために発生しています。
また、上記副題のようにtokenを持っていない状態でfetchしてもcatchされてしまうのでundefinedが返されてしまっていました。

対策

もちろんAuthProviderの中でQueryClientProviderを呼び出し認証系をクリアした状態にすること。
その上でcatchされた場合にもcatch内でオブジェクトを返すようにすること。（return {hoge: ''}）

const getHoge = async () => {
    try {
      const token = cookies.token;
        // URLは.envファイルで管理
      const res = await axios.get(`${url}/hoge`, {
        headers: {
        // AuthProvderでグローバルに管理しているtokenを認証で使用
          'Authorization': `Bearer ${token}`
        }
      });
      setHoge(res.data.hoge);
    } catch (error) {
      console.error('hogeの取得に失敗しました：', error);
      return { data: { hoge: '' } };
    }
  };