Gatsby極速入門—使用GraphQL解析Markdown(2)

1.什麼是GraphQLreact

GraphQL 既是一種用於 API 的查詢語言也是一個知足你數據查詢的運行時。 GraphQL 對你的 API 中的數據提供了一套易於理解的完整描述,使得客戶端可以準確地得到它須要的數據,並且沒有任何冗餘,也讓 API 更容易地隨着時間推移而演進,還能用於構建強大的開發者工具。工具

官網:http://graphql.cn/flex

2.爲何須要它?網站

一圖抵萬言:spa

圖片描述

3.怎麼作?code

1.一圖抵萬言:
圖片描述component

解釋:你須要的東西都在這段代碼裏:圖片

{
  site {
    siteMetadata {
      title
    }
  }
}

2.怎麼套到組件裏?ip

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;

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

相關文章
相關標籤/搜索