How to create a Gatsby Blog - Part 4 (Fetching data using Graphql)

Posted by : at

Category : gatsby   react


This is a part of a series - How to Create a Gatsby Blog from Scratch

Part 4 - Fetching data using Graphql

Let’s now look on how we can use Graphql to fetch data for us, Run the following Command

$ gatsby develop

You can find the Graphiql Browser, If you go to http://localhost:8000/___graphql

This Graphql Browser helps to run the queries and check what data we can fetch for.

For Example, If you run :

{
  site{
    siteMetadata{
      author
      description
      title
    }
  }
}

It will fetch Json results, by looking up our gatsby-config.js and return results something like this:

{
  "data": {
    "site": {
      "siteMetadata": {
        "author": "@sujaykundu777",
        "description": "Your Project Description",
        "title": "Your Project Title"
      }
    }
  }
}

By this data we can modify our components, and make them have completely seperated (with independent data sources) without the necessity of passing props from its parent components. Like we were passing Header’s title and description from our Layout Component. Graphql helps to solve that.

Lets modify our About Us Page. We will use graphql to replace the description using the data provided by running graphql queries

about.js

import { graphql } from "gatsby"
import React from "react"
import Jumbotron from "../components/jumbotron"
import Layout from "../components/layout"
import SEO from "../components/seo"

export const query = graphql`
  query{
    site{
      siteMetadata{
        description
      }
    }
  }
`

const About = ({data}) => (
  <Layout>
    <SEO title="About us"></SEO>
    <Jumbotron
      heading="About us"
      subheading={data.site.siteMetadata.description}
      buttontitle="Join Us"
      buttonlink="/join"
    >
      >
    </Jumbotron>
  </Layout>
)

export default About

Also lets modify our Header component, to use the title from the data source :


import { graphql, Link, StaticQuery } from "gatsby"
import React from "react"
import styled from "styled-components"
import Navlink from "./navlink"

const HeaderContainer = styled.div`
  background-color: #232020;
  height: 60px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
`
const LogoContainer = styled.div`
    width:auto;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    `
const LogoTitle = styled.h1`
  color: #ff7315;
  font-weight: 100;
  font-size: 28px;
`
const NavlinkContainer = styled.ul`
  list-style: none;
  float: right;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 14px;
`
const StyledLink = styled(Link)`
  color: #ff7315;
  text-decoration: none;
`

const Header = () => (
  <StaticQuery
    query={graphql`
      {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <HeaderContainer>
        <LogoContainer>
          <LogoTitle>
            <StyledLink to="/">{data.site.siteMetadata.title}</StyledLink>
          </LogoTitle>
        </LogoContainer>
        <NavlinkContainer>
          <Navlink to="/">Home</Navlink>
          <Navlink to="/projects">Projects</Navlink>
          <Navlink to="/about">About</Navlink>
          <Navlink to="/contact">Contact</Navlink>
        </NavlinkContainer>
      </HeaderContainer>
    )}
  />
)

export default Header

We don’t need to pass any props to our Header Component consumed by Layout. So lets change that too

import PropTypes from "prop-types";
import React from "react";
import Footer from './footer';
import Header from './header';
import "./layout.css";

const Layout = ({ children }) => {
  return (
    <>
    <Header/>
      <div>
        <main>{children}</main>
        <Footer siteFooter="Built with love using Gatsby !"></Footer>
      </div>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Great. One thing to note: here is, while using the queries in Pages, we used the normal grapql query, but while using queries in Components, we use StaticQuery that takes two params, query and render. query is which we want to run and render the html that we want to display. It returns a data object after returning the result, which then can be used to fetch the desired result and can be used in our components

If you want to do validation or use propTypes. You can use react hooks way of running queries too.

Awesome, Graphql setup done. In the next part, we will check on how we can fetch Blog Posts using Markdown and Graphql

Stay Tuned :D