headersに認証情報を入れつつ、useSWRを使ってデータfetchをするメモ(axiosを使う)

背景

headersにRailsのdevise token auth のtoken情報を入れて認証させつつ、useSWRでデータをfetchするやり方が分からなかったのでメモした

環境

Next.js、Rails APIモード、devise token auth、を使用。

コード

結論としては、axiosを併用し、その.get()の引数にheaders:{入れたい認証情報}とする。

import useSWR from "swr";
import axios from "axios";


const fetcher = (url) =>
    axios
      .get(url, {
        headers: {
          "access-token": "トークン情報",
          client: "client情報",
          uid: "uid情報",
        },
      })
      .then((res) => res.data);

  const BaseURL = "環境変数で切り替えるAPIのURL"
  const url = `${BaseURL}${currentUser.u_id}/projects`;
  const { data, error } = useSWR(
    currentUser.u_id ? url : null,
    currentUser.u_id ? fetcher : null
  );

  const projects = data ? data.projects : [{}];
  
  return(
    {!data　
    ? <>読み込み中</>
    : <>projects."取得したデータを色々展開していく"</>
    }
  )

本来であればコンポーネントに切り出して、URLを引数に入れてreturnでデータを返す関数などを作るべきだが、今回の目的はuseSWRと認証情報の共存なのでこれで終了にする。