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 (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center'
    }}>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}
//這裏是全部數據，傳到了TitleAndDescription組件裏，react組件數據傳遞
const Header = () => {
  return (
    <StaticQuery
      query={graphql`
        query{
          site {
            siteMetadata {
              title,
              description,
              
            }
          }
        }
      `}
      render={data => <TitleAndDescription data={data} />}
    />
  )
}
export default Header

這裏是全部數據，傳到了TitleAndDescription組件裏，react組件數據傳遞,我這麼就爲了看着舒服一點。

3.嵌套Header

將Header組件扔到 pages下面的index.js裏面：

import React from "react"
import Header from '../components/header'
const Layout = () => {
  return (
    <div>
      <Header />
    </div>
  )
}
export default Layout;

打開首頁，看到網站的描述就大功告成了。