Next.jsにてuseSWRを使った値の取得が出来ない

Question

前提・実現したいこと

フロントにNextjs,バックエンドにExpressという構成でwebアプリケーションを作成しています。
Nextjsのグローバルステート管理にはRecoilを使用しています。
jwtを使用したログイン判定をSWRを使って実装しようと思ったのですがどうにもうまくいきません
ここが原因ではないかと思いましたらコメントしていただけると嬉しいです。

発生している問題・エラーメッセージ

本来ならuserデータかisErrorデータのどちらかがすぐに返ってくるはずなのですが常にLoading状態になってしまいます。
コードはSWR公式ドキュメントから殆どコピペしてきたので原因箇所の見当がつきません

  const { user, isLoading, isError } = useCheckUserRole("admin");

  if (isError) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  if (user) return <div>get userdata</div>

該当のソースコード

Next.js

import useSWR from 'swr'
import useAxios from './useAxios'

const useCheckUserRole = (role: string) => {
  const axios = useAxios(); //カスタマイズした設定のaxiosインスタンスを取得

  const fetcher = (url: string) => {
    axios.get(url).then((res => {
      console.log(res.data) //画像のブラウザコンソールに出力されているものです。ここの出力からリクエストは成功していることが確認できます
      res.data
    }))
  }

  const { data, error } = useSWR(`auth/currentuser/${role}`, fetcher, { revalidateIfStale: true }) //テスト用にキャッシュをオフにしています
  return {
    user: data,
    isLoading: !error && !data,
    isError: error
  }
}

export default useCheckUserRole;

import Layout from '../../components/Layout';
import useAxios from '../../hooks/useAxios';
import useCheckUserRole from '../../hooks/useCheckUserRole'

const SignUpPage = () => {
  const axios = useAxios();
  const { user, isLoading, isError } = useCheckUserRole("admin");

  if (isError) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  if (user) return <div>get userdata</div>
  return (
    <Layout title="タイトル">
      <h1>サインアップ</h1>
    </Layout>
  )
}

export default SignUpPage

import { useRecoilState } from "recoil";
import { accessTokenState } from "../components/atoms";
import { useRouter } from 'next/router'
import Cookies from 'js-cookie'
import axios from 'axios'

//ここはあまり関係ないと思いますが一応載せておきます


const useAxios = () => {
  const router = useRouter();
  const [accessToken, setAccessToken] = useRecoilState(accessTokenState);
  const refreshToken = Cookies.get("refreshToken")

//リクエスト時にaccessTokenをAuthorizationヘッダーにセット
  const api = axios.create({
    baseURL: process.env.NEXT_PUBLIC_API_HOST,
    timeout: 1000,
    withCredentials: true
  });
  api.interceptors.request.use(
    (config: any) => {
      config.headers.common['Authorization'] = 'Bearer ' + accessToken;
      return config;
    }
  );

//レスポンス時にAccessTokenが期限切れになっていた場合自動でrefreshTokenを使用してAccessTokenを更新した後リクエストをリトライする
  api.interceptors.response.use((response) => {
    return response;
  }, async (error) => {
    if (error.config && error.response && error.response.data.message === "jwt expired") {
      try {
        const result: any = await axios.post(`${process.env.NEXT_PUBLIC_API_HOST}auth/refresh`, { refreshToken: refreshToken })
        setAccessToken(result.data.accessToken)
        const config = error.config;
        config.headers['Authorization'] = 'Bearer ' + result.data.accessToken;
        return axios.request(error.config);
      } catch (err) {
        router.push("/auth/login")
      }
    }
    return Promise.reject(error);
  })
  return api;
}

export default useAxios;

Express

import express from 'express';
import { currentUser } from '../../controllers/authController'
const router = express.Router();

router.get("/currentuser/:role", currentUser)

export default router;

import express from 'express';
import jwt from 'jsonwebtoken';
import HttpException from '../exceptions/HttpException';

//トークンを検証してログインしているかどうか、またURLのクエリで受け取ったroleと一致しているか判定するAPIです。
export const currentUser = (req: express.Request, res: express.Response, next: express.NextFunction) => {
  const accessTokenSecret: jwt.Secret = process.env.ACCESS_TOKEN_SECRET ?? "defaultaccesssecret"
  const authHeader = req.headers["authorization"];
  const accessToken = authHeader && authHeader.split(" ")[1];
  if (accessToken == null) return next(new HttpException(403, "AccessToken is null"))
  jwt.verify(accessToken, accessTokenSecret, (err: any, user: any) => {
    if (err) return next(err)
    if (req.params.role !== user.role) return next(new HttpException(402, "Permission error"))
    return res.json(user);
  });
}

###　コンソールの出力
ExpressAPIへのリクエスト自体は成功しており、200statusとjsonデータが返ってきています。
問題はReact側、useSWRの方にあると推測しております。

補足情報（FW/ツールのバージョンなど）

node --version
v16.9.1

npm list --depth 0
├── @material-ui/core@4.12.3
├── @material-ui/icons@4.11.2
├── @types/js-cookie@3.0.0
├── @types/node@12.20.33
├── @types/react-dom@17.0.9
├── @types/react@17.0.30
├── axios@0.23.0
├── js-cookie@3.0.1
├── next@11.1.2
├── node-fetch@3.0.0
├── react-dom@17.0.2
├── react-hook-form@7.17.4
├── react@17.0.2
├── recoil-persist@3.0.0
├── recoil@0.4.1
├── swr@1.0.1
└── typescript@4.0.8

Comments

[miyabi-sun]

問題を切り分けていきましょう。
誰(どのファイル)がやらかしているのかを突き止めないと問題は解決しません。

まずは「裏でAjax通信本当にちゃんとやってるのか？」を確認してみてください。
デベロッパーツールのコンソールタブからネットワークタブに切り替えてリロードしましょう。
例えばChromeならXHRタブで更に絞り込みが可能で
Ajax通信による裏でHTTPリクエスト飛ばして受け取った流れが閲覧できます。

もし正しくHTTP通信が行われているのであれば、
ステータスコードの200を返して黒字になっており、
中を開くと良い感じのJSON文字列を受け取った事を確認出来るはずです。
その場合Expressのバックエンド側の問題ではなく、Next.jsの使い方が悪いという問題になります。

このHTTP通信のステータスコードが200意外だったり、
結果を返してないとかであればExpress側が悪いんじゃないかという推測が出来ます。
Express側でconsole.log(xxx)をあちこちに仕込んで、
正常な流れで結果を作って返しているのかを確認してみてください。

[fresh_fish]

修正依頼ありがとうございます。
リクエスト自体は成功しているのでNextjs側、というかSWRライブラリの使い方に問題があると思っております。
質問をするにあたって必要な情報が足りていませんでした。
以後気を付けます。

[miyabi-sun]

早速の対応ありがとうございます。
これは私の考えですが「質問者さんに不備があるのは当然というか仕方ない」と考えています。

質問前から過不足ない全ての情報を出して
「はい、これで回答者さん答え出せるでしょ？」って言われても
「なんでそんなこと分かるの？過不足なく全て用意出来るならお前分かってて聞いてるだろ」ってなりますよ。

「頑張って揃える努力はしてくれてる」という前提の元なので
継続して頑張ってください。
バシッと出揃えられると自力でドンドン解決出来るようになると思いますしね。

Answer 1

useCheckUserRoleかuseAxiosの二択ですねぃ。
ソースコード見直したらuseCheckUserRoleにダメな箇所見つけました。

質問文のコード読む限りの懸念がこの2点

• Promiseとasync/awaitまで消化しきれてないのでは？
• fetcherの作り方分かってないのでは？

Promiseは単体では非常に読み辛いです。
async/awaitを駆使しながらPromiseを意識せず使えるようになるとめっちゃ便利！ってなる機能です。
もしasync/awaitの勉強がまだなのであれば優先して勉強してみてください。

次にfetcherの使い方を見ていきましょう。
SWRを使おうぜという話 - Zenn
この記事ではfetcherは下記のように定義しています。

    async function fetcher(url: string): Promise<boolean | null> {
        const response = await fetch(url);
        return response.json();
    }

つまりfetcherはPromiseを返す関数でなければならない。
(async関数を定義すると必ずPromiseのインスタンスを返り値として返す関数になる)
Promiseの返り値でresponse.json()を実行している。

import useSWR from 'swr'
import useAxios from './useAxios'

// 君たちリクエストが来てから泥縄のように関数作らなくていいよね？って事で外に移植
const axios = useAxios(); //カスタマイズした設定のaxiosインスタンスを取得
const fetcher = async (url: string) => {
  // async関数を使う事でawait構文が利用可能になる。
  // await構文の効果は、Promiseインスタンスの.then(val => {})を実行してvalを取り出す
  const res = await axios.get(url);

  console.log(res.data); // 受け取ったデータをconsole.logとして表示するコードはそのままにしておいた

  // Promiseインスタンスでres.dataを返すように変更
  return res.data;
}

const useCheckUserRole = (role: string) => {
  const { data, error } = useSWR(`auth/currentuser/${role}`, fetcher, { revalidateIfStale: true }) //テスト用にキャッシュをオフにしています
  return {
    user: data,
    isLoading: !error && !data,
    isError: error
  }
}

export default useCheckUserRole;

とりあえずこれで進むと思うので修正してみてください。

Comments

[fresh_fish]

丁寧に何度も答えていただきありがとうございます
fetcher関数をasyncでラップすることで動かすことができました。
回答を貰ってからPromise,async/awaitについて改めて調べて自分で書いてみたところ、then,catch構文ではPromiseオブジェクトを外に出せないことがわかりました。
fetcher関数がPromiseオブジェクトを返さなければならないとするとasync/awaitを使わなければならないのは今考えれば当然ですね。
ただまだ一つ疑問がありまして、公式ドキュメント https://swr.vercel.app/ja/docs/data-fetching がthen catch 構文を使用しているのは何故でしょうか。
私はここを参考にしてコードを書いていたのですが実際には動きませんでした。
公式ドキュメントが間違ったコードを載せていることはないと思うので、
promise.then.catch構文でも書き方によってpromiseオブジェクトを返すことが可能ということなのでしょうか。
コードは動いたのでベストアンサーにして質問を解決済みにしますが、もしまだお時間があれば教えていただけると嬉しいです。
解決していただきありがとうございました。

[miyabi-sun]

> const fetcher = url => axios.get(url).then(res => res.data)
公式サイトのアロー関数はこれですよね。
アロー関数を定義する時、1行で終わる時は{}を省略する事ができます。
その{}を省略した場合の挙動に関しては、1行目の結果をreturnするよう変化します。

つまり、このfetcher関数の返り値は`axios.get().then()`をまるっと包んだPromiseインスタンスです。
一目でわかりますし、あえてasync/awaitを使うまでもない。
ワンライナー(1行)でさくっと済ませちゃおうと上級JSerが書いた記事だからこういう表現になったのでしょう。

それに対して質問文のコードは{}を省略していませんね。
この場合、returnで何かを明示的に返すようにしなければundefinedを返す事になります。
知らないとハマる箇所なので要注意です。

> 公式ドキュメントがthen catch 構文を使用しているのは何故でしょうか。
URLこっちですよね？
https://swr.vercel.app/ja/docs/error-handling
内容を見る限りtry-catch構文を利用したいがためにasync/awaitを活用しています。

この辺はちゃんとした理解がないと混乱しがちになります。
アロー関数の{}省略版、async/awaitのあるなしに着目しながら見てください。

[fresh_fish]

またしても丁寧な回答ありがとうございます。
まさか{}の有無で挙動が変わるとは思ってもいませんでした。
ES6の文法については勉強していたつもりでしたがまだまだ理解が足りなかったようですね。精進します。
バグの解消だけでなく細かな質問にも答えていただいて本当にありがとうございました。