Gatsby profile continued

Hello. This is a continuation of my most recent post in relation to using Gatsby.js. I used Gatsby.js to build my portfolio at the request of my friend, Levy Adams.

If you remember from my previous post, I just started using Gatsby.js to build my portfolio. The only difference in this publication as opposed to my previous publication, is I have used GraphQL to render my components onto the page. How might one do that you may ask. Let me show you.

First, you will want to add a folder to your current project. You can call the folder whatever you want. Next, you will set-up a file within that folder. You can name that file whatever you want as well. This project did not come without some help, so I would like to thank John Smigla for this tutorial and helping me get my profile situation into action.

In this blog, I will talk about how I was able to render information from GraphQL and into my project. When you first download gatsby.js, you will notice a file in the static folder called gatsby-config.js. In this fil is where you would add your objects to render onto the page. For instance:

module.exports = {
  siteMetadata:{
    title:'ScrubHub',
    description: "ScrubHub. The only way to wash your pet",
    author: "riomar",
    data: ["item 1", "item 2"],
    person: {name: "rio", age: 42},
  },
  /* Your site config here */
  plugins: [`gatsby-plugin-styled-components`],

The above code shows the object and the components that we will see on the website, you can then go into the folder that you created in the folder that you just built. go into the GraphQL page that was built when you started the localhost: Usually there is a link that you can click on to go into the site. Once you have clicked on the link to the GraphQL site, you can then see the data that you entered in your file. For my project, I used a basic name for it called Header.js. I just followed along in a tutorial that I used, but you can name the folder and the file whatever you want to. You will need this file later ,and I will show you how it is used.

Now the fun begins. Once you have built your syntax and objects, you can now go into your GraphQL site and start using the data by doing he following:

1. Click on the site dropdown menu under Explorer.
2. Click on siteMetadata dropdown menu.
3. Once you have clicked on siteMetadata dropdown, you can now click on all the objects that you have created. You can choose however many you want. I clicked them all, but you can click on however many you would like to.

You should see your Graph QL query look something like this:

query MyQuery {
  site {
    siteMetadata {
      author
      data
      description
      person {
        age
        name
      }
      title
    }
  }
}

Now here comes the cool part. Once you have selected your queries, you can now use GraphQL to obtain the syntax you will need in order for your query to render onto your website.

Click on the “Code Exporer” button, and then click the “Page query” dropdown menu. Then select “StaticQuery hook.” You should get this syntax back:

export default ComponentName
import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const ComponentName = () => {
  const data = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          author
          data
          description
          person {
            age
            name
          }
          title
        }
      }
    }
  `)
  return <pre>{JSON.stringify(data, null, 4)}</pre>
}

export default ComponentName

This syntax is to be copied and pasted into the gatsby-config.js file, but the syntax where it returns a JS stringify object, but this is something that we do not want in our syntax. We want to be able to render the header directly from the same file that you just copied the syntax from.

Go into the Header.js file, or whatever you called it and you can build your syntax and object like so:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const ComponentName = () => {
  const data = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          person {
            age
            name
          }
          author
          data
          description
          title
        }
      }
    }
  `)
  return (
    <div>
    <h1>{data.site.siteMetadata.person.name}</h1>
      <h1>{data.site.siteMetadata.person.age}</h1>
    </div>
  )
}

export default ComponentName

Notice that we took out the stringify method and replaced it with a header, and calling the objects from the syntax above? This is how you are able to render the objects that you added in your gasby-config.js file.

I forgot to mention that I also added an examples.js file. You can name it whatever, but again, for purposes of the tutorial, I used the name that was used in the tutorial. In the example.js file in the pages folder, you are going to want to import this information from the examples page like so:

import React from 'react'
import Header from '../examples/Header'

const examples = () => {
  return (
  <div>
    <h1>This is the examples page</h1>
    <Header />
  </div>
  )
}

export default examples

Always remember when you are building a new page, or adding a new file, please be sure to build and import the information. For example, if you are adding another page called “contact,” be sure to build a file called contact.js, and add a component to it in order to render it to your website. The same can be said when using GraphQL. Always remember to keep your folders neat, and your files make sense to you so that way when you are building the page, it is easier to figure out what file is doing what.

I have done a lot of projects and didn’t quite understand my file structures (and I still don’t sometimes), but if you give folders/files names that make sense to you and you can fall back on them at any time, you are ahead of the game.

Thank you for giving this blog a read. Click like, share, give it a thumbs up, or thumbs down, and I will be back with some additional blogs to finish up this series. Again…this will be a very long series of blogs, so I hope you stick around and enjoy my Gatsby journey. Please be sure to follow some of my favorite fellow programmers, and follow me on twitter if you like. Or not. 😁

https://twitter.com/mmaciasjr

BGM6 - Overview

emansiu - Overview

Levy Adams - Taylor, Michigan | Professional Profile | LinkedIn

https://twitter.com/codename_tj