Get started with Gatsby - use GraphQL to parse Markdown

1. What is GraphQL

GraphQL is both a query language for APIs and a runtime for your data queries GraphQL provides an easy to understand and complete description of the data in your API, which enables the client to accurately obtain the data it needs without any redundancy, makes the API more easily evolve over time, and can also be used to build powerful developer tools.

Official website: http://graphql.cn/

2. Why do you need it?

One picture is worth ten thousand words:

3. How to do it?

1. A picture is worth ten thousand words:

Explanation: everything you need is in this Code:

{
  site {
    siteMetadata {
      title
    }
  }
}

2. How to put it into the component?

SRC > components > header.js,

import { StaticQuery, graphql } from 'gatsby'
import React from "react"
const TitleAndDescription = ({ data }) => {
//The data here is from the following
  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>
  );
}
//Here is all the data. It's transferred to the TitleAndDescription component. The react component transfers the data
const Header = () => {
  return (
    <StaticQuery
      query={graphql`
        query{
          site {
            siteMetadata {
              title,
              description,
              
            }
          }
        }
      `}
      render={data => <TitleAndDescription data={data} />}
    />
  )
}
export default Header

Here is all the data. It's transferred to the TitleAndDescription component. The react component transfers the data. I'm just trying to look comfortable.

3. Nested Header

Throw the Header component into index.js under pages:

import React from "react"
import Header from '../components/header'
const Layout = () => {
  return (
    <div>
      <Header />
    </div>
  )
}
export default Layout;

Open the home page and see the description of the website.

Tags: Javascript React

Posted on Sat, 09 Nov 2019 10:12:50 -0500 by turdferguson