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

投稿日: 2025年03月24日

Tips

学習振り返り

要約

オリジナルアプリ第二弾の開発が進行中で、認証とデータ取得を混同していたことに気づいた。
認証はuseSupabaseSessionを使い、データ取得は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でのやりとり（一部）↓

認証とデータ取得は、別モノだよって話。 - SWRを使いたい！｜ShiftBブログ

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

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

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

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

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

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

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

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