Category: Gatsby.js

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Querying Data in Pages with GraphQL

We can query data in pages with GraphQL with Gatsby.

To do this, we write:

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "My Homepage",
    description: "This is where I write my thoughts.",
  },
}

src/pages/index.js

import React from "react"
import { graphql } from 'gatsby'

export const query = graphql`
  query HomePageQuery {
    site {
      siteMetadata {
        description
      }
    }
  }
`
export default function Home({ data }) {
  return (
    <div>
      Hello!
      {data.site.siteMetadata.description}
    </div>
  )
}

We have the website’s metadata in gatsby-config.js .

Then we can get the data in our page by using a GraphQL query.

We create the query with the graphql tag in index.js .

We use it to get the description of our site.

Then we can get the description in data prop with the data.site.siteMetadata.description property.

Now we see:

Hello!This is where I write my thoughts.

displayed.

Add Query Variables to a Page Query

We can add query variables to make our page query more flexible.

For example, we can write:

src/templates/post.js

import React from "react"
import { graphql } from "gatsby"
export default function Template({ data }) {
  const { markdownRemark } = data
  const { frontmatter, html } = markdownRemark
  return (
    <div className="blog-post">
      <h1>{frontmatter.title}</h1>
      <h2>{frontmatter.date}</h2>
      <div
        className="blog-post-content"
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </div>
  )
}
export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        path
        title
      }
    }
  }
`

We add a query that takes the $path parameter.

And we specified that it’s a string.

Then we pass that into our markdownRemark query to search for posts with the given path.

Then in the Template component, we get the query result from the data prop,

frontmatter has the front matter, which is a post’s metadata.

And html has the HTML content.

StaticQuery

Another way to query for data on our website is with the StaticQuery component.

To use it, we write:

import React from "react"
import { graphql, StaticQuery } from 'gatsby'

export default function Home() {
  return (
    <div>
      <StaticQuery
        query={graphql`
          query HeadingQuery {
            site {
              siteMetadata {
                title
              }
            }
          }
      `}
        render={data => (
          <header>
            <h1>{data.site.siteMetadata.title}</h1>
          </header>
        )}
      />
    </div>
  )
}

We use the StaticQuery component with the query prop.

It has the GraphQL query we want to make as the value.

Then in the render prop, we can pass in a function to render the query result.

The data prop has the query result.

We query the same metadata from the gatsby-config.js .

Conclusion

Gatsby provides us with several ways to make queries to get data.

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Conditionals

We can add conditional operations with our GraphQL queries.

For example, we can with:

query GetBlogPosts($withDate: Boolean = false) {
  allMarkdownRemark(limit: 3, skip: 1) {
    edges {
      node {
        frontmatter {
          title
          date @include(if: $withDate)
        }
      }
    }
  }
}

We use the $withDate boolean value in our if operator.

Creating and Modifying Pages

We can use GraphQL queries to create pages in the gatsby-node.js file.

For example, we can write:

gatsby-node.js

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions
  const result = await graphql(
    `
      {
        allMarkdownRemark(limit: 1000) {
          edges {
            node {
              frontmatter {
                path
              }
            }
          }
        }
      }
    `
  )
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  const blogPostTemplate = path.resolve(`src/templates/post.js`)
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    const path = node.frontmatter.path
    createPage({
      path,
      component: blogPostTemplate,
      context: {
        pagePath: path,
      },
    })
  })
}

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content`,
      },
    },
  ]
}

src/templates/post.js

import React from "react"
import { graphql } from "gatsby"
export default function Template({ data }) {
  const { markdownRemark } = data
  const { frontmatter, html } = markdownRemark
  return (
    <div className="blog-post">
      <h1>{frontmatter.title}</h1>
      <h2>{frontmatter.date}</h2>
      <div
        className="blog-post-content"
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </div>
  )
}
export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        path
        title
      }
    }
  }
`

We get the results with the createPages function in gatsby-node.js .

Then we loop through the items with the forEach call and call createPage to create the posts.

We reference post.js , which is the template component.

And then we call createPage and set the template as the component.

context has data we want to display on our page.

We access that in the data prop of the Template component.

Removing Trailing Slashes

We can remove trailing slashes from the path when we create the page.

For instance, we can write:

const replacePath = path => (path === `/` ? path : path.replace(//$/, ``))

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage, deletePage } = actions
  const result = await graphql(
    `
      {
        allMarkdownRemark(limit: 1000) {
          edges {
            node {
              frontmatter {
                path
              }
            }
          }
        }
      }
    `
  )
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  const blogPostTemplate = path.resolve(`src/templates/post.js`)
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    const path = node.frontmatter.path
    const page = {
      path,
      component: blogPostTemplate,
      context: {
        pagePath: path,
      },
    }
    const oldPage = Object.assign({}, page)
    page.path = replacePath(page.path)
    if (page.path !== oldPage.path) {
      deletePage(oldPage)
      createPage(page)
    }
  })
}

We check if the oldPage.path is equal to page.path .

If they aren’t equal, then we call deletePage to delete the old page and call createPage to add the new page.

Conclusion

We can make conditional queries and create pages from GraphQL queries with Gatsby.

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Excerpt

We can get post excerpts from GraphQL queries.

To do this, we write:

{
  allMarkdownRemark(filter: {frontmatter: {date: {ne: null}}}, limit: 5) {
    edges {
      node {
        frontmatter {
          title
        }
        excerpt(format: PLAIN, pruneLength: 200, truncate: true)
      }
    }
  }
}

We add the excerpt function with the format , pruneLength , and truncate parameters.

format has the excerpt format.

pruneLength is the max length of the excerpt.

truncate indicates that we want to truncate the excerpt to the given length.

Sort, Filter, Limit, and Format Together

We can combine sort, filter, limit, and format together.

For instance, we can write:

{
  allMarkdownRemark(limit: 3, filter: {frontmatter: {date: {ne: null}}}, sort: {fields: [frontmatter___date], order: DESC}) {
    edges {
      node {
        frontmatter {
          title
          date(formatString: "dddd DD MMMM YYYY")
        }
      }
    }
  }
}

We just put them all in the allMarkdownRemark query and all the operations will be applied.

Query Variables

We don’t have to create queries with fixed values.

To reuse our queries, we can use query variables.

For example, we can write:

query GetBlogPosts($limit: Int, $filter: MarkdownRemarkFilterInput, $sort: MarkdownRemarkSortInput) {
  allMarkdownRemark(limit: $limit, filter: $filter, sort: $sort) {
    edges {
      node {
        frontmatter {
          title
          date(formatString: "dddd DD MMMM YYYY")
        }
      }
    }
  }
}

Then we can put the following the query variables screen:

{
  "limit": 5,
  "filter": {
    "frontmatter": {
      "date": {
        "ne": null
      }
    }
  },
  "sort": {
    "fields": "frontmatter___title",
    "order": "DESC"
  }
}

We set the limit , filter , and sort variables in the Query Variables pane to set the variable values.

Group

We can group values by fields.

To do this, we run:

{
  allMarkdownRemark(filter: {frontmatter: {title: {ne: ""}}}) {
    group(field: frontmatter___date) {
      fieldValue
      totalCount
      edges {
        node {
          frontmatter {
            title
          }
        }
      }
    }
    nodes {
      frontmatter {
        title
        date
      }
    }
  }
}

We group the posts by date, so the results will be grouped by date.

Fragments

Fragments let us save frequently used queries for reuse.

We can apply fragments in our queries.

For instance, we can run:

fragment fragmentName on Site {
  siteMetadata {
    title
  }
}

{
  site {
    ...fragmentName
  }
}

We add the fragmentName fragment and applied it to our site query.

It just gets the title metadata of the site.

Aliasing

We can alias queries to run 2 queries on the same data source.

For example, we can write:

{
  someEntries: allMarkdownRemark(skip: 3, limit: 3) {
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
  someMoreEntries: allMarkdownRemark(limit: 3) {
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

We have the someEntries and someMoreEntries queries and we get results from them.

Conclusion

We can make various kinds of GraphQL queries with Gatsby to get data for our site.

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Limit

We can limit the number of results that are returned in the GraphQL query results.

For instance, we can write:

{
  allMarkdownRemark(limit: 3) {
    totalCount
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

to get the first 3 Markdown posts with the title field.

Skip

We can skip over a number of results with the skip parameter:

{
  allMarkdownRemark(skip: 3) {
    totalCount
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

Filter

We can filter results with the filter parameter:

{
  allMarkdownRemark(filter: {frontmatter: {title: {ne: ""}}}) {
    totalCount
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

We set the filtet to an object with the title not equal to an empty string in the frontmatter .

We can combine multiple fields.

For instance, we can write:

{
  allMarkdownRemark(filter: {frontmatter: {title: {ne: ""}}, wordCount: {words: {gte: 1}}}) {
    totalCount
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

to search for Markdown posts that have title not equal to an empty string and with a word count bigger than or equal to 1.

Operators

The full list of operators include:

• eq: short for equal, must match the given data exactly
• ne: short for not equal, must be different from the given data
• regex: short for regular expression, must match the given pattern. Note that backslashes need to be escaped twice, so /\w+/ needs to be written as "/\\\\w+/".
• glob: short for global, allows us to use wildcard * which acts as a placeholder for any non-empty string
• in: short for in an array, must be an element of the array
• nin: short for not in an array, must not be an element of the array
• gt: short for greater than, must be greater than given value
• gte: short for greater than or equal, must be greater than or equal to the given value
• lt: short for less than, must be less than given value
• lte: short for less than or equal, must be less than or equal to the given value
• elemMatch: short for element match. We find the elements that match the given value with this operator.

Sort

We can sort items that are returned in the results.

To do this, we write:

{
  allMarkdownRemark(sort: {fields: [frontmatter___date], order: ASC}) {
    totalCount
    edges {
      node {
        frontmatter {
          title
          date
        }
      }
    }
  }
}

to add the order field to let us sort the frontmatter.date field.

Format Dates

We can format our results. To format dates, we write:

{
  allMarkdownRemark(filter: {frontmatter: {date: {ne: null}}}) {
    edges {
      node {
        frontmatter {
          title
          date(formatString: "dddd DD MMMM YYYY")
        }
      }
    }
  }
}

Then we get the full date, something like:

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "My First Post",
              "date": "Wednesday 10 July 2019"
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

Conclusion

We can make various kinds of queries with Gatsby’s GraphQL API.

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Hosting Your Own HTML5 Video Files

We can host our own HTML5 video files and show them.

To do this, we write:

import React from "react"
import SampleVideo from "../assets/sample.mp4"

const IndexPage = () => {
  return (
    <div>
      <video controls>
        <source src={SampleVideo} type="video/mp4" />
      </video>
    </div>
  )
}
export default IndexPage

We import a video file from the /assets folder.

Then we pass them into the src prop of the source element.

Also, we can add captions for our video by writing:

src/assets/sample.vtt

WEBVTT

00:00:00.500 --> 00:00:02.000
The Web is always changing

00:00:02.500 --> 00:00:04.300
and the way we access it is changing

src/pages/index.js

import React from "react"
import SampleVideo from "../assets/sample.mp4"
import Captions from "file-loader!../assets/sample.vtt"

const IndexPage = () => {
  return (
    <div>
      <video controls>
        <source src={SampleVideo} type="video/mp4" />
        <track kind="captions" srcLang="en" src={Captions} />
      </video>
    </div>
  )
}
export default IndexPage

We add the track element to add the captions.

We just import them like any other module and set it as the value of src .

srcLang has the language of the caption.

Including GIFs in Components

We can add GIFs to components.

For instance, we can write:

import React from "react"
import otterGIF from '../assets/dancing-otter.gif'

const IndexPage = () => {
  return (
    <div>
      <img src={otterGIF} alt="Otter" />
    </div>
  )
}
export default IndexPage

to import the otter GIF into our component file.

They can also be included in Markdown by writing:

![otter](./assets/dancing-otter.gif)

Create a Page with Hard-Coded Data

We can create a page with hard-coded data.

To do this, we write:

gatsby-node.js

exports.createPages = ({ actions: { createPage } }) => {
  createPage({
    path: "/page-with-context/",
    component: require.resolve("./src/templates/post.js"),
    context: {
      title: "No GraphQL",
      content: "<p>This is page content.</p><p>No GraphQL required!</p>",
    },
  })
}

src/templates/post.js

import React from "react"
const WithContext = ({ pageContext }) => (
  <section>
    <h1>{pageContext.title}</h1>
    <div dangerouslySetInnerHTML={{ __html: pageContext.content }} />
  </section>
)
export default WithContext

gatsby-node.js has the content, which are hardcoded in the createPage call.

path has the path of the document.

component has the template to render the document.

context has the title and content , which are rendered in the template file.

post.js is the template file.

We get the pageContext prop and render the properties.

They’re passed in from the createPage call.

We can render JSON data that are imported from APIs or a file.

Query Nodes

We can query for metadata about the site with GraphQL.

For example, we can get the plugins that are used in the project with:

{
  allSitePlugin {
    totalCount
    edges {
      node {
        name
        version
        packageJson {
          description
        }
      }
    }
  }
}

name is the plugin name. version is the plugin version.

description has the plugin description. totalCount has the result count.

Conclusion

We can show videos and create pages with hard-coded content with Gatsby.