Jamal Hansen

About

Watch me learn blogging, Gatsby, GraphQL, React, CSS and more

Finding out about GraphQL

I've been hearing a lot about Gatsby and GraphQL in the podcasts that I'm listening to. This is one of the reasons that I decided to start down this path to begin with.

I've now gotten a very rudimentary blog up and running. It has a main page that is very plain, but links to the posts and a tags page.

Gatsby image plugin for featured images

I've used the plugin gatsby-image to add images to the blog. At this point I've leveraged GraphQL and an image location in the front matter to add a featured image to each post.

There are a few things I discovered about this setup. If these conditions are not satisfied, the gatsby source filesystem will keep the featured image tag as a string. When it is a string it doesn't have sub items such as childImageSharp and you get an error.

GraphQL Error Field "featuredImage" must not have a selection since type "String" has no subfields.

Using this query:

export const query = graphql`
  query($pathSlug: String!) {
    markdownRemark(frontmatter: { path: {eq: $pathSlug} }) {
      html
      frontmatter {
        title
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

Here are the conditions that I needed to meet to stop getting this error.

  1. GraphQL will want you to have a featured image for each post
  2. The images needed to exist on the hard drive (using gatsby-source-filesystem)
  3. The images needed to be jpg or png

When these criteria are met, the gatsby transformer sharp recognizes the image and links in image information.

That said, all of the Gatsby technology is pretty amazing. I am enjoying learning all of this. GraphQL is particularly interesting as it specifies an api to completely separate the front end from the back end (filesystem in my case).

I really want to explore this more and see how it works. It makes me want to continue down the path that is leading to Query the World

If you have some experience with coding and want to explore a new blogging platform, I would definitely recommend exploring Gatsby.

Here is a link to more information about GraphQL

GraphQL logo By Facebook - https://github.com/facebook/graphql/blob/master/resources/GraphQL%20Logo.svg, BSD, Link