NextJS勉強用(API呼び出し編)

目的

NextJSからFastAPIのAPIを呼び出す

作業ディレクトリ:
/www/js/next_api

参考にさせていただいたサイトでfetchとaxiosの両方のサンプルを見せていただいたが、axiosの方が取り扱いやすそうだったので、axiosを使用する。
SWRの勉強も兼ねて、axiosとSWRをインストールする

# npm install axios swr

GETリクエストの試験

ColorApiGetButton.tsxでもよい

index.tsx

+import ColorApiButton from '../src/components/ColorApiButton'
+      <ColorApiButton title="0" data-color="0"/>

ApiGetButton.tsx

    async function event_btn_click(e){
        e.preventDefault();
        const res = await axios.get('https://192.168.1.106/api/user/');
console.log(res);
    }

POSTリクエスト

ApiPostButton.tsx

    async function event_btn_click(e){
        e.preventDefault();
        const res = await axios.post('https://192.168.1.106/api/color/', {"color_code": color_code});
console.log(res);
    }

useSWRを使用する方法

以下のサイトによるとuseSWRを使用してPOSTは推奨されないとのこと。
そのため、GETで取得する。
https://omkz.net/nextjs-swr-post/

get() post() と異なり、useSWR()は関数の外で宣言しないとエラーになる。
当初、axios.post()と同じようにevent_btn_click()の中でuseSWR()を宣言してエラーになっていたが、
「useSWRは関数の外で宣言せよ」とStackOverflowに同様の回答があったので、関数外に宣言して無事動作確認

https://stackoverflow.com/questions/68126375/invalid-hook-call-with-swr-library

ApiSWRButton.tsx

import useSWR from 'swr'
import axios from "axios";
const fetcher = url => axios.get(url).then(res => res.data);
const ColorApiButton=(props)=>{
    const { data, error } = useSWR("https://192.168.1.106/api/user/", axios);
    async function event_btn_click(e){
        e.preventDefault();
        let color_code=e.currentTarget.dataset.color;
console.log(data)
    }

axiosのパラメタURLとレスポンスを省力化する。

レスポンスのデータはres.dataに設定されている。
また、URLもフルパスで記述しているが、以下のようにfetcherを宣言して、省力化する。

const axiosBase = require('axios');
const axios = axiosBase.create({
  baseURL: 'https://192.168.1.106/api/',
  headers: {
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  responseType: 'json'
});
const fetcher = url => axios.get(url).then(res => res.data);

上記のfetcherをuseSWR()の第二引数にすることで、URLは相対パス、dataはres.dataのみで扱える.

tsx

-    const { data, error } = useSWR("https://192.168.1.106/api/user/", axios);
+    const { data, error } = useSWR("/user/", fetcher);

参考