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;
打開首頁,看到網站的描述就大功告成了。