Install the Latest Version of Gatsby

Install Plugins for Transforming Markdown with Gatsby

Format Markdown Files for Gatsby.js

Use the GraphiQL Browser to Build Queries for Gatsby

Create a Home Layout Component with a GraphQL Query in Gatsby

Organize React Components in a Gatsby Project

Add a List of Posts to a Gatsby Blog with a GraphQL Page Query

Build Gatsby Page Slugs Dynamically from Markdown with gatsby-node.js 

Build a Blog Post Template with GraphQL and Gatsby

Add Next and Previous Links to a Gatsby Blog

Expose Post Tag Data for a Gatsby Blog

Use PageContext to Display Tags in Gatsby

Deploy a Gatsby Site with Netlify


Build a Blog with React and Markdown using Gatsby

Starting with version 2 of Gatsby, a new `StaticQuery` component is available. This component allows you to make a GraphQL query and render the data it returns. In this lesson we will define a layout component that displays Header and Footer components with information from our site metadata.

https://app.egghead.io/api/v1/lessons/gatsby-create-a-home-layout-component-with-a-graphql-query-in-gatsby/subtitles

Instructor: [00:00] I'm inside source/pages inside the "My blog" directory. If I do an LS, we can see the different posts that I've created and the index.js file. Let's open the index.js. We can see that we have a really basic component here that will render our "Hello world."

[00:18] Our "Hello world" component has been refactored to be called layout. In order to bring in data into our layout component, we'll import static query from Gatsby. Let's create a new component called header.

[00:30] Inside the return of header, we're going to return the static query component. One of the props that static query takes is our actual GraphQL query. I realize now that we need to import GraphQL also.

[00:43] Inside of our query to prop, we're going to pass in a tagged template, which is the syntax we use to make a GraphQL query. Our query syntax is GraphQL, then two backticks. Then we use the query keyword. We already know what our query looks like by looking at our GraphiQL.

[00:59] We know that we need site and siteMetadata. We want the title and description. The next prop that we pass to static query is what we want to render. In this case, we'll just render a simple proof of concept. We're going to pass a function that takes data, which comes from right here.

[01:15] We'll just return a div and it will go data.site.siteMetadata.title. Now we can replace "Hello world" with our header component. Now that we know we can get data from static query, let's create a new subcomponent to clean up this render a little bit.

[01:35] We'll create a new component called title and description. We'll destructure data from props. We'll pull our title and description from data. Inside our return, for now, we'll just do an h2 and a p tag.

[01:47] With our subcomponent created, we can now update the render prop of our static query component. Now we can see that our page has been updated. With the magic of editing, I've added some inline styles and our header is complete.

Create a Home Layout Component with a GraphQL Query in Gatsby

Share this video with your friends

Course

Build a Blog with React and Markdown using Gatsby