Amplify 自動生成したクエリをカスタマイズしたい。

こんにちは。Amplify 歴が2年近くになってきた coa00 です。プロダクトで使っているのでどんどんノウハウがたまっているのですが、発表する時間がないです（スタートアップつらい）

お手軽なTipsを一つ紹介します。

リレーショナルについて

graphql は model と model 同士を関連させることができます。

例えばユーザをチームに所属したい場合だと下記のように many to many で結合することができます。

type User
  {
  id: ID!
  firstName: String
  lastName: String
  teams: [UserTeam] @connection(keyName: "byUser", fields: ["id"])
}


type UserTeam
  @model(subscriptions: null)
  @key(name: "byUser", fields: ["userID", "teamID"])
  @key(name: "byTeam", fields: ["teamID", "userID"])
  {
  id: ID!
  teamID: ID!
  userID: ID!
  team: Team! @connection(fields: ["teamID"])
  user: User! @connection(fields: ["userID"])
}

詳しくは下記をよんでいただければと思います

リレーショナルの課題

便利なのですが、一つ問題があります。
生成される list などのレスポンスが大きくなっていきます。

上記の例で話すと

User.teams の下に UserTeam　の配列がかえってきます。
さらに UserTeam は、UserとTeam　がはいっていいます。

（無限ループ的につながっていくのではないか、と思ったかたご安心ください。maxDepth というものがあります）

解決策

解決策はたくさんあると思います。
リレーショナルをやめるのもよいと思いますし、
自動生成を使わないのも手ですね。

ケースバイケースですね。

自動生成されたクエリをオーバライドする。

Amplify の素晴らしさはスピードだと思っているので、
自動生成もリレーショナルも使い、かつ3分ぐらいでできる解決策を考えてみました。

やり方

シンプルです笑

src したに cgraphql というディレクトリを作成し、mutation, queries を作成する

先頭で対応する　qraphqql　を　import export する。

その下にオーバライドしたいクエリをコピーします。

コピーしたクエリから不要なレスポンスを削除します。

使う時は、src/graphql/queries ではなく src/cgraphql/queries を import して使います。

まとめ

• リレーショナルを使う時は、レスポンスサイズをコントロールしましょう
• 自動生成したものはオーバライドすることで小さくしましょう。