APIの動作確認をしたら、エラーが発生した。

エラーメッセージ `[Running] node "c:\repo\todo_app\api_test.js" APIテスト失敗: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11576:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async fetchData (c:\repo\todo_app\api_test.js:5:21) { cause: [Error: 64400000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:355: ] { library: 'SSL routines', reason: 'wrong version number', code: 'ERR_SSL_WRONG_VERSION_NUMBER' } }

[Done] exited with code=0 in 0.508 seconds`

実行したコード ` const listApiUrl = 'https://127.0.0.1:8000/api/v1/tasks/list';

async function fetchData() { try { const res = await fetch(listApiUrl, { method: 'GET' });

    if (!res.ok) {
        throw new Error('res was not ok');
    }

    const data = await res.json();
    console.log(data);

} catch (error) {
    console.error('APIテスト失敗:', error);
}

}

fetchData(); `

補足 FastAPIのコンソールを確認したところ WARNING: Invalid HTTP request received. と出力された。

調べたところSSLというものが必要らしいので、もう少し調べる。

ローカル開発の場合はSSLは使わないので無しでいいよ。

プルリクエストしたので確認後マージして。これでフロントエンドとバックエンドが一通り結合できている状態になった。

フロントエンド側にいろいろライブラリを追加したのでマージ後に npm installを実行してね。

https://github.com/AyatoYoshizawa/todo_app/pull/9/files

kiota はダメだった（よくみたら TypeScript対応はまだプレビュー版だった）ので、openapi-generator-cli を使うようにした。 https://github.com/OpenAPITools/openapi-generator

元ファイルは、src/api/openapi.json に配置してある。下記を実行すると、/src/api/axios 配下に Axios(HTTPライブラリ）を利用したAPIクライアントが生成される。

npm run gen

生成されたAxios の APIクライアントは、URLとかいろいろ設定を投入しないと、そのままでは動かないので、独自に APIという名のシングルトンなラッパークラスを作成した。シングルトンなので、いちいち new しなくても API.instance で、どこでも使える。

メソッド名が getTasksApiV1TasksListGet みたいに冗長なのは、自動生成なので大目に見る。基本的には FastAPI 側のパス定義に従って命名される。

React で useQuery と組み合わせは↓こんな感じ。

    const query = useQuery<Array<Task>>('tasks', () => {
        return API.instance.getTasksApiV1TasksListGet();
    }, {
        onSuccess(data) {
            console.info('SUCCESS', data);
        },
        onError(err) {
            console.error('ERROR', err);
            window.alert(err);
        }
    });

画面のUIは Material UI （通常 MUI）を導入した。これ使うとカッコよいUIがサックと作れるよ。 https://mui.com/

react の App.tsx にルーティングを追加した。どのURLのときに、どのコンポーネント（＝画面）を表示するのかを、ここに書く。

React Router Dom というやつ。 https://reactrouter.com/en/main

   <BrowserRouter>
              <Routes>
                <Route index element={<Tasks />} />
                <Route path="*" element={<h1>ページが存在しません</h1>} />
              </Routes>
            </BrowserRouter>

AyatoYoshizawa / todo_app

APIの動作確認をしたら、エラーが発生した。 #8