認証とデータ取得は、別ものだよって話。 - SWRを使いたい！

はじめに

13章まで終わりましたが、まだまだ自信のない私です。
「これからの自分、どうしていこうかなぁ…」と悩みつつ、オリジナルアプリ第二弾をマイペースに作っています。

先日、はしご酒の場で茜さんにアプリの内容をざっくり話したら、
「第一弾より超簡単じゃん！」と言われました（笑）
それでもなかなか進まず、時間がかかっています😭
事実なので悔しくはないです、これが今の自分だと思っています😶‍🌫️
内容もざっくりしか話してないし～😗。
静かに、地道に挑戦中です。早く完成させたい〜！

本題：茜さんにサクッと切られて納得した話

今回は、「認証とデータ取得をごちゃ混ぜにしていたこと」に気づけた話。
当たり前やん！って人もいらっしゃると思いますが、きっと同じように悩んでいる方もいらっしゃるはず！そんな方のヒントになれば嬉しいです。

SWRでデータ取得のカスタムフックを作っていた

オリアプ第二弾では、SWRを使ってデータをキャッシュ管理しよう！と意気込んで、
茜さんのブログを見返しながら、useFetch.tsというGET専用のカスタムフックを作っていました。

↓こんなの

import useSWR from "swr";
import type { SWRConfiguration } from "swr";// SWRの設定オプション

// 以下カスタムフック、APIからデータを取得してくれる汎用的な関数
export const useFetch = <T>(path: string, config?: SWRConfiguration<T>) => {
  const baseUrl = process.env.NEXT_PUBLIC_API_URL;//ベースURLを読み込み

  // useSWR第二引数に入る関数
  const fetcher = async (): Promise<T> => {
    try {
      const res = await fetch(${baseUrl}${path}, {
        method: "GET", 
        headers: {
          "Content-Type": "application/json", 
        },
      });

      if (!res.ok) {
        throw new Error(Fetch failed: ${res.status} ${res.statusText});
      }
      const json = await res.json();

      // デバッグ用に取得したJSONデータ
      console.log("Fetched data:", json);

      // APIのレスポンスが { data: T } の形式で返ってくると仮定して、その中の data を返す
      return json.data as T;
    } catch (error) {
      console.error("API fetch error:", error);
      throw error;
    }
  };

  // useSWRを使ってデータを取得
　// 第一引数：「キー」、第二引数：fetcher関数、第三引数：設定オプション（任意）
  return useSWR<T>(path, fetcher, config);
 
};

書いてるとき、ふと、思いました。
ん？
ログイン認証もユーザー情報を取得するんだから、SWRで管理できるんじゃない？
でも、茜さんのブログには認証については特に触れられていない…。
「そういえば認証って、どこで管理してたんだっけ？」と混乱💦
SWRの公式みても、それっぽいところ見つけられず、AIに聞いても、SWRで書けるよ！って回答返ってくるけど、なんか信じられない、、

そこで茜さんに思い切って質問してみました。

Slackでのやりとり（一部）↓

認証情報はuseSupabaseSessionに書いてた！

認証情報って、useSupabaseSession.tsに書いてない？って言われて、？！ほんまやん！書いてる私！しかもこれ、11章でも書いてるんですよね、、本当に自分が嫌になります。
でもさでもさ、「情報を取得する」っていう概念は同じなのに、認証とデータ取得は分けるの？なんの違い？ってなったんです。

茜先生の答え
　—sessionある(認証)
　　→ トークンある（認証）
　　→ トークンもってGETリクエスト（データ取得）

ほほう！そういうことか！めちゃわかりやすい！！

それじゃあさ、useSupabaseSession.tsは、SWRで管理しなくていいの？（まだ聞くｗ）
ここからはAI先生にもう一度聞いてみました。
—認証情報はAPIから取得するわけではなく、クライアントSDKから状態を参照しているだけ。だからSWRでキャッシュ管理する意味はあまりないよ

意味ないんかい！さっき「書けるよ！」ってあなた言ったじゃない。（プロンプト難しい）

つまり、認証はAPI リクエストではなく、クライアント側の状態取得なので、SWRが得意とするキャッシュは使わなくていい。

例外はありそうな回答でしたが、フロントだけの問題ってことでしょうか✨

結果：

—認証はuseSupabaseSession.tsにて　useEffectやuseStateで作成
—データfetch（GET）はSWRにてキャッシュ管理が良い！

めちゃくちゃ納得したので、前に進みます！

おわりに

頭の中が疑問だらけになると、前に理解していたはずのことまで抜け落ちてしまうことがあります…💦悔しいことの方が多いし、できる人と比べてしまうこともあるけど、毎日書いてたら「理解できた！」が増えていくのが嬉しいし、楽しいです。いろいろ悩みながらも、しょうもないところで立ち止まっても、変わらず書くぞ🔥

レビューをもらえないのだけ残念ですが、自分が作りたくて作っているのでとても楽しいです。（ちなみに、オリアプ第二弾はちょっとふざけた内容です。✌️）
みなさんにお披露目できるように、引き続きがんばります🐢