はじめに

この記事では、最近 FastAPI と Strawberry(GraphQL) に入門した私が、FastAPI と Strawberry(GraphQL) が動作する諸々整ったデモアプリを使用する（作る）方法をメモとして残します。
Strawberry に関する記事（特にサンプルコード付き）は未だあまり少ない印象を受けましたので、Strawberry について入門する方の参考になればと思います。
- FastAPI と Strawberry(GraphQL) に入門してから数週間なので、アンチパターンを踏んでいるかもしれませんが、サンプルコードの一つとしていただければと思います。 mm

デモアプリの GitHub

https://github.com/0machi/FastAPI_Strawberry_strawberry-sqlalchemy_DemoApp
- 良ければご参照ください。

使用技術

せっかくなので色々な技術に触れてみようと思い、下記を使用しました。
- FastAPI
- Strawberry, strawberry-sqlalchemy
- SQLAlchemy 2.0
- PostgreSQL, Supabase
- Docker
- Render

システム構成

開発環境

Docker で動くようにしています。

本番環境

無料であることから、バックエンドは Render にデプロイしています。また、DB には Supabase を使用しています。

デモアプリの使用方法

本番環境

JWTの取得

id と password を指定して、JWT を取得します。

$ curl -Ss \
-X POST \
-H "Content-Type: application/json" \
--data '{ "query": "mutation { login(input: { id: \"fceef692-010b-480f-899c-5a6e8bab23a7\", password: \"admin\" }) { tokenType accessToken severErrors { msg } } }" }' \
https://fastapi-strawberry-strawberry-sqlalchemy.onrender.com/graphql | jq .

JWT の取得結果の例

{
  "data": {
    "login": {
      "tokenType": "bearer",
      "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJmY2VlZjY5Mi0wMTBiLTQ4MGYtODk5Yy01YTZlOGJhYjIzYTciLCJleHAiOjE2OTU1NDg0MTh9.YFvZL07ZTFDURfdzaU_Xk096iz2nLdeJ2gBcgmL6xSA",
      "severErrors": []
    }
  }
}

JWTを付与して GraphQL を実行

"Authorization: Bearer XXX" の XXX の部分に JWT を付与します。

curl -Ss \
-X POST \
-H "Content-Type: application/json" \
-H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJmY2VlZjY5Mi0wMTBiLTQ4MGYtODk5Yy01YTZlOGJhYjIzYTciLCJleHAiOjE2OTU1NDg0MTh9.YFvZL07ZTFDURfdzaU_Xk096iz2nLdeJ2gBcgmL6xSA" \
--data '{ "query": "query { cities { cities { cityId cityName population } } }" }' \
https://fastapi-strawberry-strawberry-sqlalchemy.onrender.com/graphql | jq .

取得結果

{
  "data": {
    "cities": {
      "cities": [
        {
          "cityId": 1,
          "cityName": "Los Angeles",
          "population": 3849000
        },
        {
          "cityId": 2,
          "cityName": "Santa Monica",
          "population": 91000
        },
        {
          "cityId": 3,
          "cityName": "Cebu",
          "population": 3000000
        }
      ]
    }
  }
}

開発環境

環境変数の準備

以下のような内容を記載した dev.env をルートディレクトリに用意します。

ENV="dev"
POSTGRES_DB="fast_api"
POSTGRES_USER="fast_api"
POSTGRES_PASSWORD="fast_api"
POSTGRES_HOST="postgresql"
JWT_SECRET_KEY="m8ik2ZWT/W42g5osrCndxqTGBnDNzbmRvHUc6q0O++dxX406LCr50xKOUitXqMNE285vz7L+5KheK/sya3HelpY/Ky7rIoyZ4GuX92c/zvLAbyM19A4Y0BhBTtQlhu21zugINAAQuKlX7Wo2sYiuWpvwiSCOf9sqwTQ7SoQjdKzIzF271i/AqyPuqAQtYfpgyDOOQH8anJL3kuTWvbodeklZy7zl6cHhV8O68dltRSe056VLxgGGA8wD1zUEdpfsvP4GU9U8U1sO3ZXau18rUxbrpzmltazY/SBVdGdLDWAniAgbjRcBjVUHkhuSuvwlY36571f5BM2+7oDqkfWpLw=="
ACCESS_TOKEN_EXPIRE_MINUTES="30"

Docker を起動　

$ docker compose build --no-cache
$ docker compose up

GraghiQL へのアクセス

http://localhost:8000/graphql
Strawberry では、GraghiQL と呼ばれる Playground を使用できます。
- GUI から簡単に GrapqhQL を実行できます。
- スキーマが見れたり、補完が効いたり、実行ログが残ったりと諸々便利です。

テスト

$ task test
- taskipy を使用しています。
- テスト前に、autoflake, black, isort, pyupgrade によるフォーマット、mypy による型チェックを実施します。

GrapqhQL を実行

本番環境と同様に以下のように JWT を取得します。
画面下部の Headers に JWT を付与して GraphQL を実行します。
テストコードに Query と Mutation のサンプルコードを記載してありますので、良ければご参照ください。
- https://github.com/0machi/FastAPI_Strawberry_strawberry-sqlalchemy_DemoApp/tree/main/tests/api/schema

おわりに

この記事では、最近 FastAPI と Strawberry(GraphQL) に入門した私が、FastAPI と Strawberry(GraphQL) が動作する諸々整ったデモアプリを使用する（作る）方法をメモとして残しました。
とりあえず FastAPI と Strawberry(GraphQL) を動かしてみたい方の参考になればと思います。