GraphQLで同じフィールドを複数使いたいときは名前をつけてデータを取得しよう

GraphQL ではさまざまなデータを取得することができます。
普段、Gatsby.js をマークダウン形式で使っている場合、データの取得方法は例えば、

allMarkdownRemark {
  edges {
    node {
      html
      headings {
        depth
        value
      }
      frontmatter {
        title
        category
      }
    }
  }
}

こういう感じになると思います。

使い方は、例えば、title を表示する場合は、

data.allMarkdownRemark.edges.node.frontmatter.title

などになります。

カテゴリー毎に分けたい

allMarkdownRemark を category 毎に取得分けたいとなった場合、取得した後に分けてもいいんですけど、この取得時に分けることもできます。どうやるか？

allMarkdownRemark{} を2つ書くことになります。が！

// category sort: fruit
allMarkdownRemark(filter: {frontmatter: {category: {eq: "fruit"}}}) {
}

// categroy sort: vegetable 
allMarkdownRemark(filter: {frontmatter: {category: {eq: "vegetable"}}}) {
}

と書きたいところですが、これだと、取得するときにどうしますか？区別がつきませんね。

こういうときはどうするかというと、
名前を付けます。

名前の付け方と取得方法

GraphQL では名前を付けることができます。どのようにつけるかは下記を見てみてください。

// category sort: fruit
fruitData: allMarkdownRemark(filter: {frontmatter: {category: {eq: "fruit"}}}) {
}

// categroy sort: vegetable 
vegetableData: allMarkdownRemark(filter: {frontmatter: {category: {eq: "vegetable"}}}) {
}

こんな感じで付けることができます。
形はこんな感じです。

{任意の名前}: フィールド名 {}

取得の方法は、

// category sort: fruit
data.fruitData.edges.node.frontmatter.title

// categroy sort: vegetable 
data.vegetableData.edges.node.frontmatter.title

になります。
簡単ですね。

こうすることにより、 allMarkdownRemark{} を2つ使うことができます。

サンキュ！！