Gatsby入门指南—使用GraphQL解析Markdown（2）

前端大彬哥

发布于 2019-05-29 16:03:14

7340

发布于 2019-05-29 16:03:14

1.什么是GraphQL

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

官网：http://graphql.cn/

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>

打开首页，看到网站的描述就大功告成了。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.05.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

api