[gridsome] Graph QLで複数の問い合わせをページで行うには

Gridsomeではページのコンテンツを取得するために内部でGraph QLを使用しています。複数のCollectionからコンテンツ情報を取得する方法について調査しました。

issue

gridsomeが提供するページデータの取得処理は以下のようなGraphQLで抽出を行いページのレンダリングに使用しますが、ここで複数のコレクションからデータを抽出したい場合にどう書くのが良いのかよくわからないので調査しました。

サンプルではWordPressPostという単一のコレクションを使用していますが、仮にこれにTaskというコレクションがありこれも同時に使用したい場合にどういう記述を行えば良いかがよくわからず悩みました。

まぁ、実際には Graph QLの仕様が分かっていれば悩むことはあまりないのでしょうが。

<page-query>
query Blog {
  posts: allWordPressPost {
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>

solution

結果からすると、queryの子供要素である変数名属性(例では’posts:‘)を複数にすることで実現できます。この例では、$page変数の下にpostsとtasksという形で情報が追加されることになります。

<page-query>
query Blog {
  posts: allWordPressPost {
    edges {
      node {
        id
        title
      }
    }
  },
  tasks: allTask {
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>