GridsomeのblongsToでクエリ操作をする方法

Gridsomeのクエリ操作

Gridsomeでは、データソースとして入れたGraphQLデータを抽出する際に、取得する項目だけでなく、オーダーやフィルターなどでクエリを操作できます。

query {
  allPost(sortBy: "title", order: DESC) {
    edges {
      node {
        title
      }
    }
  }
}

こういうやつですね。

これをrefsがついている子ノードを取得するblongsToで使う際は、やや作法が違います。

blongsToでクエリ操作

正しい例

まずは正しい例をみてみましょう。

query {
  Post {
    title
    date
    content
    tags{
      title
      path
      belongsTo(sortBy: "date", order: DESC){
        edges {
          node {
            ... on Post {
              title
              path              
            }
          }
        }        
      }        
    }
  }
}

先ほどはコレクション名(typeName)の後ろに条件式を書きましたが、belongsToでクエリ操作をする場合は「belongsTo」の後に条件式を書きます。

ここが意外とハマりポイントです。

動かない例

では、ダメな例もみておきます。

query {
  Post {
    title
    date
    content
    tags{
      title
      path
      belongsTo{
        edges {
          node {
            ... on Post(sortBy: "date", order: DESC) {
              title
              path              
            }
          }
        }        
      }        
    }
  }
}

先ほどのクエリと違うのは、コレクション名(typeName)の後ろに条件式を書いている点。これでもエラーは起こらないのですが、指定した条件式が反映されません。

場所が違うだけなのですが、知らないとハマりポイントなので、備忘録的にまとめました。