专栏首页大前端666Gatsby入门指南—使用GraphQL解析Markdown(2)
原创

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;

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Gatsby入门指南—添加博客内容页(4)

    注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。

    前端大彬哥
  • Gatsby入门指南—添加上一页下一页功能(完结篇)

    到此,通过gatsby就快速的搭建了一个博客网站,我们只需书写markdown文件就能生成对应的网页了。至于网页美化,那是切图的事儿,我就不在这里墨迹了。

    前端大彬哥
  • Gatsby入门指南—添加博客内容页(4)

    注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。

    前端大彬哥
  • python(实操4):录音文件的读取、

    py3study
  • NAND闪存中的隐私数据销毁方案(CS Security)

    我们提出用于有效破坏NAND闪存中的隐私数据的方案。通常,即使从NAND闪存中丢弃了隐私数据,也很有可能将数据保留在无效块中。这是由于NAND闪存的编程操作和擦...

    shellmik
  • 译文 | 在使用过采样或欠采样处理类别不均衡数据后,如何正确做交叉验证?

    最近读的一篇英文博客,讲的很不错,于是便抽空翻译成了中文。 [关于我在这篇文章中使用的术语可以在 Physionet (http://www.physionet...

    用户1332428
  • 趋势:从云到多云,超融合与云管平台(CMP)如期而遇

    在IT基础设施领域,超融合基础架构(Hyper-Converged Infrastructure,HCI,以下简称为超融合)在近几年备受瞩目,凭借井喷式的市场增...

    FIT2CLOUD飞致云
  • 【野路子】正则表达式~极速入门图文教程

    Eller
  • 为什么你觉得Matplotlib用起来很困难?因为你还没看过这个思维导图

    Matplotlib是一个流行的Python库,可以很容易地用于创建数据可视化。然而,设置数据、参数、图形和绘图在每次执行新项目时都可能变得非常混乱和繁琐。而且...

    HuangWeiAI
  • 前端模拟ajax接口

    在平常开发中,了解完需求后,前端和后端会确定页面的需要的ajax接口,及接口的细节(请求与响应的格式)。然后,前后端就可以各自开工~ (注:在本文的接口均指aj...

    Joel

扫码关注云+社区

领取腾讯云代金券