Gatsby/GraphQL/React component

Goal:Make the site looks like this: left hand side is all the blog posts, right hand site is bio

Right now what I did was I inserted Post.js and Bio.js into index.js.

index.js:

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import 'bootstrap/dist/css/bootstrap.css';
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Bio from '../components/bio'
import Blog from '../components/blog'



const IndexPage = () => (
  <Layout>
    <SEO title="slowpacedcoding" keywords={[`slowpacedcoding`, `programming`, `Matt Zhou`, `gatsbyJS`,`web development`,`zhouxiang19910319`,`web programming`]} />

    <Container>
      <Row>
        <Col xl={6} lg={6} md={12} sm={12} xs={12}>
          <Blog/>  **THIS IS THE PART THAT WENT WRONG**
        </Col>

        <Col xl={6} lg={6} md={12} sm={12} xs={12}>
          {/* BIO SECTION IS HERE! */}
          <Bio />
        </Col>
      </Row>
     </Container>


  </Layout>
)

export default IndexPage

Blog.js

import React from "react"
import { Link } from "gatsby"
// import Layout from "../components/layout"
import 'bootstrap/dist/css/bootstrap.css'

class Blog extends React.Component{
  render({data}){
    return(
      <>
      <h3
      style={{
        fontFamily: `'Montserrat', sans-serif`,
        fontWeight: 700,
      }}
      >Posts</h3>
      {data.allMarkdownRemark.edges.map(post=>(
        <div>
        <div key = {post.node.id}>
          <small
          style={{
            fontFamily: `'Montserrat', sans-serif`,
            fontWeight: 300,
            color: `#828282`,
          }}
          >{post.node.frontmatter.date}</small>
          <br></br>
          <h4
          style= {{
            display: `inline-block`,
            fontFamily: `'Montserrat', sans-serif`,
            fontWeight: 400,
            color: `#f47c48`,
          }}
          >{post.node.frontmatter.title}</h4>
        </div>
          <Link to={post.node.frontmatter.path} 
          style={{
            padding:0,}}
            >Read More</Link>
          <hr></hr>
        </div>
      ))}
      </>
    )
  }
}

export default Blog

export const pageQuery = graphql`
  query BlogIndexQuery{
      allMarkdownRemark
      (sort: { fields: [frontmatter___date], order: DESC })
      {
        edges{
          node{
            id
            frontmatter{
              path
              title
              date
              author
            }
          }
        }
      }
    }
`

Bio.js

import React from "react"
import profile_pic from "../images/profile_pic.png"

class Bio extends React.Component{
  render (){
    return(
      <>
      <h3 style={{
        fontFamily: `'Montserrat', sans-serif`,
        fontWeight: 400,
        marginTop:`1rem`,
        color: `#f47c48`,
      }}>Bio</h3>

      <img src={profile_pic} alt="profile_pic" style={{
            width:`100px`,
          }}></img>

          <p style={{
            fontFamily: `'Montserrat', sans-serif`,
          }}>
          Former student of Singapore Polytechnic, dropped out at the end of year two, had been
          learning Web-Development since 2016. My goal is to become a web developer in an English speaking country.
          </p>

          <h5 style={{
            fontFamily: `'Montserrat', sans-serif`,
          }}>Find me at :</h5>

          <div>
            <a href="https://www.linkedin.com/in/xiang-zhou-03547755/" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>LinkedIn</a>
            <a href="https://github.com/zhouxiang19910319" rel='noopener noreferrer' target="_blank"  style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>github</a>
            <a href="https://medium.freecodecamp.org/the-most-difficult-things-about-learning-to-code-by-yourself-b24ac8c3c23a "
            rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>medium</a>
            <a href="https://twitter.com/zh0ux1ang" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>twitter</a>
            <a href="https://www.freecodecamp.org/zhouxiang19910319" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}} >freeCodeCamp</a>
          </div>
    </>
    )
  }
}

export default Bio

the problem is Bio.js can be displayed correctly. But Blog.js cannot.
it gives out these errors:

×
TypeError: Cannot read property 'data' of undefined
Blog.render
src/components/blog.js:7
   4 | import 'bootstrap/dist/css/bootstrap.css'
   5 | 
   6 | class Blog extends React.Component{
>  7 |   render({data}){
   8 |     return(
   9 |       <>
  10 |       <h3

how do I parse those data in, so that it can be displayed correctly?

@ husseyexplores

thanks in advanced.

In Blog.js, you need to import graphql along with Link from Gatsby.

import { Link, graphql } from "gatsby" 

hmmm same error. (20 characters)

I totally missed that it’s a class component. Sorry. The render method does not receive props. You have to destructure data from props.

render() {
  const { data } = this.props;
  return () 

Hmm. I think it might be because Blog.js isn’t a Gatsby page. It looks like only pages can use pageQuery. You might have to use a StaticQuery. See Gatsby docs

1 Like

I will take a look at it tomorrow.

Thanks for the info.

This project is a bit out of my reach per say.

@husseyexplores @brandonstinson

I have made some progress when it comes to solving this issue.

Just to re-cap, I am trying to insert blog.js into index.js

Right now here is what my code looks like:

blog.js:

import React from "react"
import { Link,graphql,useStaticQuery } from "gatsby"
import 'bootstrap/dist/css/bootstrap.css'

const Blog = () => {

  {/*DATA FROM GRAPH QL*/}
  const data = useStaticQuery(graphql`
  query BlogIndexQuery{
    allMarkdownRemark
    (sort: { fields: [frontmatter___date], order: DESC })
    {
      edges{
        node{
          id
          frontmatter{
            path
            title
            date
          }
        }
      }
    }
  }
  `)


  {/*ALL THE HTML AND CSS STUFF*/}
  return(
    <>
    <h3 style={{
      fontFamily: `'Montserrat', sans-serif`,
      fontWeight: 700,
    }}
    >Posts</h3>
    {data.allMarkdownRemark.edges.map(post=>(
      <div>
      <div key = {post.node.id}>
        <small
        style={{
          fontFamily: `'Montserrat', sans-serif`,
          fontWeight: 300,
          color: `#828282`,
        }}
        >{post.node.frontmatter.date}</small>
        <br></br>
        <h4
        style= {{
          display: `inline-block`,
          fontFamily: `'Montserrat', sans-serif`,
          fontWeight: 400,
          color: `#f47c48`,
        }}
        >{post.node.frontmatter.title}</h4>
      </div>
        <Link to={post.node.frontmatter.path} 
        style={{
          padding:0,}}
          >Read More</Link>
        <hr></hr>
      </div>
    ))}
    </>
  )
}


export default Blog


index.js

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import 'bootstrap/dist/css/bootstrap.css';
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Bio from '../components/bio'
import Blog from '../components/blog'



const IndexPage = () => (
  <Layout>
    <SEO title="slowpacedcoding" keywords={[`slowpacedcoding`, `Xiang Zhou`,`programming`, `Matt Zhou`, `gatsbyJS`,`web development`,`zhouxiang19910319`]} />

    <Container>
      <Row>
        <Col xl={6} lg={6} md={12} sm={12} xs={12}>
          {/* BLOG POST SECTION IS HERE! */}
          <Blog/>
        </Col>

        <Col xl={6} lg={6} md={12} sm={12} xs={12}>
          {/* BIO SECTION IS HERE! */}
          <Bio />
        </Col>
      </Row>
     </Container>

  </Layout>
)

export default IndexPage




And here is the error message I got,

So my question is how do I bump up the version of react in gatsby??

hmmm I used
npm i react react-dom to mute the warnings.

Can I do that in real project?? or this is just a temporary fix.