【後編】FastAPIとReactでダブルホットリロード

後編になります。

前編ではReactとFastAPIのセットアップを行い、FastAPIで生成されるOpenAPIから手動でReact側に取り込むまでを行いました。

後編ではFastAPIで更新されるOpenAPIのスキーマを自動的にReact側に反映させてみます。

FastAPI ホットリロードの修正

まず、FastAPI側のホットリロードの部分をいじります。厳密にはホットリロードのタイミングを取得する事自体はかなり難しそうな（ドキュメントに見当たらない）ので、サーバーの開始イベントを使用します。こちらもホットリロードの際に呼び出されるため問題なさそうです。

main.pyに以下のように記述します。

@app.on_event("startup")
def start_up():
    p = Process(target=on_restart)
    p.start()

上記はstartupというstartupというイベント（サーバーの起動時）にstart_up関数が呼び出され、on_restartという関数が別プロセスで呼び出されています。わざわざ別ブロセスにしている理由は後述。

次に、on_restartの関数の中身

gist.github.com

こちらでは前編で使ったOpenAPIの生成をシェルで呼び出しています。command_pathやoutput_pathなどは見ての通りコマンドやパスを指定しているだけなので適宜置き換えてください。前編でOpenAPI周りはやってしまったのでこちらもう完了です。

※先ほど別プロセスにしていた理由ですが、別プロセスにしないとシェルでhttp://localhost:8000/openapi.jsonを参照した時に処理が止まってしまうためです。

次に、画面で分かりやすく見るために適当なデータを一覧取得するAPIを書いてみます。

class User(BaseModel):
    id: int
    name: str
    created: datetime


@app.get("/api/users", response_model=List[User])
async def users():
    return [
        User(
            id=1,
            name='ユーザー1',
            created=datetime.now()
        ),
        User(
            id=2,
            name='ユーザー2',
            created=datetime.now()
        ),
        User(
            id=3,
            name='ユーザー3',
            created=datetime.now()
        ),
    ]