🪧 アーキテクチャ

mobile アーキテクチャ

View 配下を全体として３つのディレクトリに分ける

views
├── common # ビジネス的には意味のないWidget
├── features # ビジネス的に意味のあるWidget
└── pages

Common

Button や Card の枠などの全ページで使えるもの（Entity を引数に要求しないもの） Figma の Components となるだけ一致させる。

Features

共通するパーツを入れるディレクトリ（Entity を要求する共通パーツ）

Pages

{page_name}_screen.dart

Query を発行し、Loading・Error の状態を管理する Query 周りと状態管理をここに集中させ、UI ロジックは ScreenContainer に移譲する

Loading 状態

_Loading Widget を同じファイルに作成し、shimmer をうまく使ってローディングの UI を作成する

Error 状態

FetchErrorWidget を呼び出す

Fetch 完了

{page_name}_screen_container.dart を呼びだす。

{page_name}_screen_container.dart

Scaffold の枠を用意するページまとめられるところは presentations にわけて可視性を高めたい

/presentations

ここに各 UI パーツを入れていく、粒度は個人の感覚で良いと思う。 ここから共通化させた方が良いものを lib/views/features ディレクトリに移行していくイメージ

/{query/mutation/fragment}.gql

各ページに該当する GraphQL の Query/Mutation を格納する。

/generated

graphql から自動生成された dart ファイルが格納される。

Pages の例

pages/authors  # 作家詳細ページ
├── author_screen.dart # Queryの発行, Loading状態管理
├── author_screen_container.dart # Scaffoldなどの全体の枠を定義
├── generated # graphql_codegen による自動生成
│   ├── mutation.gql.dart
│   └── query.gql.dart
├── presentations # 各パーツを挿入
├── mutation.gql
└── query.gql # 取得に利用する GraphQLを格納

GraphQL の Isolate 分離について

graphql パッケージでは キャッシュの確認等で大きなjsonを扱うことが多い。これを main isolate 上でやると処理落ちする。

参考) https://medium.com/flutter-jp/isolate-a3f6eab488b5

そのため、GraphQLのFetch周りとCache周りをIsolate上に分離して main isolate からはメッセージポートを通じてやり取りする

Miro Board