Category: React

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.

Transforming Markdown into HTML

We can transform Markdown into HTML with Gatsby.

To do this, we use the gatsby-transformer-remark plugin.

For example, we write:

gatsby-config.js

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

pages/pandas-and-bananas.md

---
title: "Sweet Pandas Eating Sweets"
date: "2020-08-10"
---
Pandas are really sweet.

pages/index.js

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

export const query = graphql`
  query {
    allMarkdownRemark {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          excerpt
        }
      }
    }
  }
`

const IndexPage = ({ data }) => {
  return (
    <div>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key={node.id}>
          <h3>{node.frontmatter.title}— {node.frontmatter.date}</h3>
          <p>{node.excerpt}</p>
        </div >
      ))}
    </div >
  )
}
export default IndexPage

We add the plugins in the gatsby-config.js file.

The plugins are added to the plugins array.

We need the gatsby-source-filesystem plugin to read the files.

The path property has the string of the path to read from.

The gatsby-transformer-remark plugin transforms Markdown into HTML.

Then in the IndexPage component, we make the query with the graphql tag to get the Markdown data,

And we get the data from the data prop.

The frontmatter property has the metadata and the excerpt property has the excerpt.

Transforming Images into Grayscale Using GraphQL

Also, we can transform images into grayscale with a GraphQL query.

To do this, we write:

gatsby-config.js

const path = require('path');

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

index.js

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export const query = graphql`
  query {
    file(relativePath: { eq: "images/laptop.jpg" }) {
      childImageSharp {
        fluid(grayscale: true) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

const IndexPage = ({ data }) => {
  return (
    <div>
      <Img
        fluid={data.file.childImageSharp.fluid}
        alt="laptop"
      />
    </div >
  )
}
export default IndexPage

We add the gatsby-transformer-sharp and gatsby-plugin-sharp plugins to let us transform the images.

The gatsby-source-filesystem plugin lets us read the images from the file system.

Then in index.js , we make the query to transform the image into grayscale.

We set grayscale to true to let us transform the image to a grayscale one.

We pass in the transformed image as the value of the fluid prop.

Now we should see a grayscale image displayed.

Conclusion

We can transform Markdown to HTML and transform images to grayscale 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.

Get and Display a Single Image

We can get and display a single image with Gatsby.

We use the gatsby-image to get and add an image.

To install the packages required packages, we run:

npm i gatsby-plugin-sharp gatsby-transformer-sharp

To do this, we write:

gatsby-config.js

const path = require('path');

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

Then we can get the image on our page by writing:

src/pages/index.js

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "laptop.jpg" }) {
        childImageSharp {
          fluid {
            base64
            aspectRatio
            src
            srcSet
            sizes
          }
        }
      }
    }
  `)

  return (
    <div>
      <Img fluid={data.file.childImageSharp.fluid} alt="laptop" />
    </div>
  )
}
export default IndexPage

We specify that we want to get laptop.jpg in our GraphQL query.

Then we get the fields and put them into the Img component in the JSX.

We can simplify this by writing:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "laptop.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 200, quality: 75) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return (
    <div>
      <Img
        fluid={data.file.childImageSharp.fluid}
        alt="laptop"
        style={{ border: "2px solid purple", borderRadius: 5, height: 250 }}
      />
    </div>
  )
}
export default IndexPage

We simplify the query with the GatsbyImageSharpField fragment, which is equivalent to what we have in the previous example.

And we add the style into our Img component.

We can set the fluid prop to force an aspect ratio by overriding the aspectRatio field:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "laptop.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 200, quality: 75) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return (
    <div>
      <Img
        fluid={data.file.childImageSharp.fluid}
        alt="laptop"
        fluid={{
          ...data.file.childImageSharp.fluid,
          aspectRatio: 1.6,
        }}
      />
    </div>
  )
}
export default IndexPage

Also, we can set the image with a fixed-width with the following query:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "laptop.jpg" }) {
        childImageSharp {
          fixed(width: 250) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)

  return (
    <div>
      <Img fixed={data.file.childImageSharp.fixed} alt="laptop" />
    </div>
  )
}
export default IndexPage

We have the fixed field with the width set to 250.

So the image will be displayed with 250px width.

Conclusion

We can display a single image in various ways by using various 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.

Filtering with GraphQL

We can filter items in our results with our GraphQL queries.

For example, we can write:

{
  allSitePage(filter: {path: {eq: "/pokemon"}}) {
    edges {
      node {
        id
        path
      }
    }
  }
}

Then we get the path that equals to to /pokemon .

eq means equals.

GraphQL Query Aliases

We can add GraphQL query aliases.

For example, we can write:

{
  fileCount: allFile {
    totalCount
  }
  filePageInfo: allFile {
    pageInfo {
      currentPage
    }
  }
}

fileCount and filePageInfo are the aliases.

And the expression after the colon are the queries.

GraphQL Query Fragments

GraphQL query fragments are shareable chunks of a query that can be reused.

For example, we can create a fragment and make a query with it by writing:

src/pages/index.js

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

export const query = graphql`
  fragment SiteInformation on SiteSiteMetadata {
    title
    description
  }
`

export const pageQuery = graphql`
  query SiteQuery {
    site {
      siteMetadata {
        ...SiteInformation
      }
    }
  }
`

export default function Home({ data }) {
  return <div>{data.site.siteMetadata.title}</div>
}

We create the fragment with the query query.

We create the fragment for the SiteSiteMetadata type, which has the website’s metadata fields.

Then the pageQuery uses the fragment we just created.

Querying Data Client-Side with fetch

We can query data on the client-side with the Fetch API.

For instance, we can write:

import React, { useState, useEffect } from "react"

const IndexPage = () => {
  const [starsCount, setStarsCount] = useState(0)
  useEffect(() => {
    fetch(`https://api.github.com/repos/gatsbyjs/gatsby`)
      .then(response => response.json())
      .then(resultData => {
        setStarsCount(resultData.stargazers_count)
      })
  }, [])

  return (
    <section>
      <p>Gatsby start count: {starsCount}</p>
    </section>
  )
}
export default IndexPage

to get the number of Github stars for the Gatsby project and display it.

Images

We can add images into our Gatsby project.

For example, we can write:

src/pages/index.js

import React from "react"
import LaptopImg from "../assets/laptop.jpg"

const IndexPage = () => {
  return (
    <section>
      <img src={LaptopImg} alt="laptop" />
    </section>
  )
}
export default IndexPage

We import the image from the /assets folder and set the src prop to the imported image.

Reference an Image from the static Folder

Also, we can reference an image from the static folder by its path.

For example, we can write:

import React from "react"

const IndexPage = () => {
  return (
    <section>
      <img src={`laptop.jpg`} alt="laptop" />
    </section>
  )
}
export default IndexPage

given that we have the image in the static folder.

Optimizing and Querying Local Images with gatsby-image

We can use the gatsby-image to add an image.

To install the packages required packages, we run:

npm i gatsby-plugin-sharp gatsby-transformer-sharp

To do this, we write:

gatsby-config.js

const path = require('path');

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

Then we can get the images on our page by writing:

src/pages/index.js

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      allFile(
        filter: {
          extension: { regex: "/(jpg)|(png)|(jpeg)/" }
          relativeDirectory: { eq: "" }
        }
      ) {
        edges {
          node {
            base
            childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `)

  return (
    <div>
      {data.allFile.edges.map(image => (
        <Img
          fluid={image.node.childImageSharp.fluid}
          alt={image.node.base.split(".")[0]}
        />
      ))}
    </div>
  )
}
export default IndexPage

We get the files with the allFile query.

We get the images from the src/images folder as we specified in gatsby-config.js .

Conclusion

We can filter items with GraphQL and we can get images and display them with a query with GraphQL.

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.

Page Query

We can query the site’s data and display it on our page.

To do this, we write:

gatsby-config.js

module.exports = {
  plugins: [],
  siteMetadata: {
    title: `Gatsby`,
    siteUrl: `https://www.gatsbyjs.com`,
    description: `Blazing fast modern site generator for React`,
  },
}

src/pages/index.js

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

export const query = graphql`
  query HomePageQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`

export default function Home({ data }) {
  return <div>{data.site.siteMetadata.title}</div>
}

We set the site’s metadata in gatsby-config.js .

Then we can get the data with the graphql tag in our page.

Then in the page component, we get the data from the data prop.

Querying Data with the StaticQuery Component

We can also query data with the StaticQuery component.

This is useful for getting data on non-page components.

For example, we can write:

gatsby-config.js

module.exports = {
  plugins: [],
  siteMetadata: {
    title: `Gatsby`,
    siteUrl: `https://www.gatsbyjs.com`,
    description: `Blazing fast modern site generator for React`,
  },
}

src/pages/index.js

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

const NonPageComponent = () => (
  <StaticQuery
    query={graphql`
      query NonPageQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={(
      data
    ) => (
        <h1>
          {data.site.siteMetadata.title}
        </h1>
      )}
  />
)

export default function Home() {
  return <div>
    <NonPageComponent />
  </div>
}

We created the NonPageComponent to get the title from the site’s metadata.

We use the StaticQuery component to get the data.

Then in the render prop, we have a function that renders the title in the way we want.

Querying Data with the useStaticQuery Hook

Another way to query data is to use the useStaticQuery hook.

To do this, we write:

gatsby-config.js

module.exports = {
  plugins: [],
  siteMetadata: {
    title: `Gatsby`,
    siteUrl: `https://www.gatsbyjs.com`,
    description: `Blazing fast modern site generator for React`,
  },
}

src/pages/index.js

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

const NonPageComponent = () => {
  const data = useStaticQuery(graphql`
    query NonPageQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
  return (
    <h1>
      {data.site.siteMetadata.title}
    </h1>
  )
}

export default function Home() {
  return <div>
    <NonPageComponent />
  </div>
}

We call the useStaticQuery hook with our GraphQL query object, which is created from the graphql tag.

It returns the data and we can render it.

Limiting with GraphQL

We can limit the number of results returned with the GraphQL API/

To do this, we can run the following query:

{
  allSitePage(limit: 3) {
    edges {
      node {
        id
        path
      }
    }
  }
}

in http://localhost:8000/__graphql, then the results are limited to 3 entries.

Also, we can add sorting by running:

{
  allSitePage(sort: {fields: path, order: ASC}) {
    edges {
      node {
        id
        path
      }
    }
  }
}

Now we sort the path field in the response in ascending order.

Conclusion

We can query our site metadata and configure queries in various ways with Gatsby.