Gatsby極速入門-GraphQLを使用してMarkdownを解析(2)

1.GraphQLとは
GraphQLはAPI用のクエリー言語であり、データクエリーの実行時を満たす言語でもあります.GraphQLは、あなたのAPIのデータに対して理解しやすい完全な説明を提供し、クライアントが必要なデータを正確に取得することができ、冗長性がなく、APIを時間が経つにつれて進化させやすくし、強力な開発者ツールの構築にも使用できます.
公式サイト:http://graphql.cn/
2.なぜ必要なの?
一図は万言に達する.
3.どうする?
1.一図万言に達する:
説明:必要なものはすべてこのコードにあります.

{
  site {
    siteMetadata {
      title
    }
  }
}

2.どうやってコンポーネントにセットしますか?
src>components>Header.jsでは、

import { StaticQuery, graphql } from 'gatsby'
import React from "react"
const TitleAndDescription = ({ data }) => {
//            
  const title = data.site.siteMetadata.title;
  const description = data.site.siteMetadata.description;
  return (
    

      
{title}
      
{description}
    
  );
}
//       ，   TitleAndDescription   ，react      
const Header = () => {
  return (
     }
    />
  )
}
export default Header

ここではすべてのデータがTitleAndDescriptionコンポーネントに転送され、reactコンポーネントのデータが転送されます.私はこのように見ているために少し楽になります.
3.ネストヘッド
Headerコンポーネントをpagesの下にあるindex.jsに投げ込みます.

import React from "react"
import Header from '../components/header'
const Layout = () => {
  return (
    

      

    
  )
}
export default Layout;

トップページを開くと、サイトの説明を見て大成功しました.