【GatsbyJS製ブログ】GatsbyにおけるGraphQLの基本を丁寧に説明

import { graphql } from "gatsby" //gatsbyからgraphqlをインポートしておく

…

（ここらへんの書き方は先ほどの２つの呼び出し方によって異なる） = graphql`
  query {
   （ここに欲しい情報を入れ子で書いていく）
  }
`

（ここらへんの書き方は先ほどの２つの呼び出し方によって異なる） = graphql`
  query MyQuery {
    （ここに欲しい情報を入れ子で書いていく）
  }
`

import { graphql } from "gatsby" //gatsbyからgraphqlをインポートしておく

…

（ここらへんの書き方は先ほどの２つの呼び出し方によって異なる） = graphql`
  query {
    site {
      siteMetadata {
        title
        description
      }
    }
  }
`

…
//↓ ※① とりあえず全てのマークダウンのデータからid、slugを取得します。
//↓      GraphQLの書き方は次のように書きます。
  const result = await graphql( 
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: ASC }
          limit: 1000
        ) {
          nodes {
            id
            fields {
              slug
            }
          }
        }
      }
    `
  )

  const posts = result.data.allMarkdownRemark.nodes // ※① その結果達をとりあえずpostsに入れます。
…

posts.forEach((post, index) => { // postsは全てのマークダウンのデータが入ったJSONなので、一つ一つをブログ記事のページにするためにforEachを使う
…
  createPage({ // createPageについては別記事参照
    path: post.fields.slug, // pathには、slugを渡します。
    component: blogPost, // componentには、使うテンプレートを渡します。（ここの記述は省略しているので「blogPostとは？」というのは気にしなくていいです。）
    context: { // ※② contextは、渡した先（blog-post.js）で直接GraphQLの変数としても使えるし、propsの「pageContext」としても引っ張り出せます。
      id: post.id, // ※② idというpropsにブログ記事のIDを渡します。
      …
    },
  })
})
…

…

const BlogPostTemplate = ({ data, location }) => { 
  // ※③ ↑propsのdataにGraphQLの取得結果が入ります。このデータは、このファイルの下部のGraphQLで取得したものです。
  const post = data.markdownRemark // ※③ このようにしてマークダウンのデータを代入することがででます（別に代入する必要はありませんが、代入しとかないと、いちいち長ったらしく書かないといけないので）
  …

  return (
      …
      <h1>{post.frontmatter.title}</h1> // こんな感じで取得したデータ（タイトルや日付など）を使うことができます。
        <p>{post.frontmatter.date}</p>
        <section
          dangerouslySetInnerHTML={{ __html: post.html }} // マークダウンでは、「html」がいわゆる記事の本体になります。こんな感じで記事本体をHTMLに起こします。
          itemProp="articleBody"
        />
      …
  )
}


export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String // ※② こんな感じでgatsby-node.jsのcontextから渡された変数を使うことができます。
    …
  ) {
…
    markdownRemark(id: { eq: $id }) { // ※② gatsby-node.jsからもらった$idとIDが等しい記事のデータだけ持ってきます。
      id
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
    …
  }
`

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby'; //useStaticQueryとgraphqlをインポート
import * as styles from '../styles/contentscard.module.scss'/

const ContentsCard = ({ id }) => { 
  const data = useStaticQuery(graphql` // こんな感じでuseStaticQueryを使います。
    query {
     allMarkdownRemark(sort: {frontmatter: {date: DESC}}) { //とりあえず全記事のデータを拾ってきます。絞り込む条件がわかっていればいいですが、propsのような変数は条件の絞り込みとして使えません。
        edges {
          node {
            id
            frontmatter {
              title
              date(formatString: "MMMM DD, YYYY")
              description
            }
          }
        }
      }
    }
  `)

  const posts = data.allMarkdownRemark.edges.node
  let post
  for (let i = 0; i < posts.length; i++){
    if(id == posts[i].id){ // こんな感じで、propsから渡ってきた変数で絞り込むには、if文とかを使うしかないです。
      post = posts[i]
    }
  }
…