vue-apolloでAPI取得結果が変数に代入されない？

vue-apolloを使っていてAPI取得結果を変数に値を入れようとした際、
なぜか入らない！っと半日以上詰まりました。

• APIの呼び出し方が悪いのか？
• リクエストのタイミングの問題か？
• データは本当にあるの？？
• webpackの設定なのか？

等々調べまくり本当に詰まったのですが、結果はものすごくシンプルなものでした。

対象のクエリ

詰まったのは、以下のようなpostの総レコード件数を取得するクエリを使用したときでした。

graphql.js

// postモデルのレコード数を取得
export const MAX_POST_COUNT = gql`
    query maxPostCount{
        postsConnection {
            aggregate {
                count
            }
        }
    }
`

query以下をAPIコンソール上でこれを実行すると以下レスポンスが返ります。

{
  "data": {
    "postsConnection": {
      "aggregate": {
        "count": 20
      }
    }
  }
}

これをApolloで呼び出し、結果を変数に格納します。

変数にデータが入らないパターン

最初に書いていたのがこれです。
何度リロードしても取得できません。。

<template>
  <div>
    <h1>投稿数は{{ maxPostCount.aggregate.count }}</h1>
  </div>
</template>

<script>
  import {MAX_POST_COUNT} from "./graphql";

  export default {
    name: "PostCount",
    data: () => ({
      maxPostCount: {},
    }),
    apollo: {
      maxPostCount: MAX_POST_COUNT
      }
    }
  }
</script>

変数にデータが入るパターン

以下書き方なら投稿数が変数に格納され、無事20という値が描画されます。

<template>
  <div>
    <h1>投稿数は{{ postsConnection.aggregate.count }}</h1>
  </div>
</template>

<script>
  import {MAX_POST_COUNT} from "./graphql";

  export default {
    name: "PostCount",
    data: () => ({
      postsConnection: {},
    }),
    apollo: {
      postsConnection: MAX_POST_COUNT
    }
  }
</script>

解説

違いはAPIからの取得データを格納する変数名です。

「クエリは別に設定するし、変数名は分かりやすいものでよいでしょ。」と思っていたら、vue-apolloではクエリの返すスキーマ名と変数名が同じ場合のみ暗黙的に値がセットされるとのことでした。

なので、目的のスキーマ名と変数名は合わせましょう。

補足

もし、スキーマと違う変数名を使いたい場合は、updateを使えば良いそうです。
先の例だと以下はOKです。

総数の取得などの際に、変数名をpostConectionとするとわかりにくいので、こちらのほうがよいですね。

<template>
  <div>
    <h1>投稿数は{{ maxPostCount.aggregate.count }}</h1>
  </div>
</template>

<script>
  import {MAX_POST_COUNT} from "./graphql";

  export default {
    name: "PostCount",
    data: () => ({
      maxPostCount: 0,
    }),
    apollo: {
      maxPostCount: {
        query: MAX_POST_COUNT,
        update (data) {
          return data.postsConnection.aggregate.count
        }
      }
    }
  }
</script>

以下参考にさせて頂きました。
https://www.google.co.jp/amp/s/marketing-web.hatenablog.com/entry/vue-apollo_github%3famp=1