1.什么是GraphQL
GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。
2.为什么需要它？
一图抵万言：
1557045421223.png
3.怎么做？
1.一图抵万言，
1557046295168.png
解释：你需要的东西都在这段代码里：
<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="c24" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-position: inherit inherit; background-repeat: inherit inherit;">{
site {
siteMetadata {
title
}
}
}</pre>
2.怎么套到组件里？
src>components>Header.js里面，
<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="c28" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-position: inherit inherit; background-repeat: inherit inherit;">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</pre>
这里是所有数据，传到了TitleAndDescription组件里，react组件数据传递,我这么就为了看着舒服一点。
3.嵌套Header
将Header组件扔到 pages下面的index.js里面：
<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="c34" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-position: inherit inherit; background-repeat: inherit inherit;">import React from "react"
import Header from '../components/header'
const Layout = () => {
return (
<div>
<Header />
</div>
)
}
export default Layout;</pre>
打开首页，看到网站的描述就大功告成了。
