Data

Query Site MetaData

Add a site title as metadata to the gatsby configuration file.
gatsby-config.js
module.exports = {
+ siteMetadata: {
+ title: `Acme Inc.`,
+ description: `A corporate site`,
+ },
plugins: [`gatsby-plugin-emotion`, "gatsby-plugin-postcss"],
}
Open GraphiQL and write a query for the siteMetadata.
http://localhost:8000/___graphQL
query {
site {
siteMetadata {
title
}
}
}

Create a Static Query

Use that query as a static query in the Header component to retrieve the data.
Display the data in the header to the left of the Navigation.
import React from "react"
- import { Link } from "gatsby"
+ import { useStaticQuery, graphql, Link } from "gatsby"
export const NavLink = ({ children, to }) => {
return (
<Link
className="mx-0 p-5 text-gray-600 text-lg hover:text-gray-800 hover:border-2 hover:border-solid hover:border-gray-800"
to={to}
>
{children}
</Link>
)
}

export default function Header() {
+ const data = useStaticQuery(graphql`
+ query {
+ site {
+ siteMetadata {
+ title
+ }
+ }
+ }
+ `)
return (
<header className="pt-5 pb-10 border-b-2 border-solid border-gray-600">
+ <Link to="/" className="text-4xl mx-4">
+ {data.site.siteMetadata.title}
+ </Link>
- <nav>
+ <nav className="inline">
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
</nav>
</header>
)
}

Query Files

Download these files
Unzip the files.
Copy the articles and images directories into the acme\src directory.
Install and configure the gatsby-source-filesystem plugin so we can read the files in the content directory.
npm install gatsby-source-filesystem
gatsby-config.js
module.exports = {
siteMetadata: {
title: `Acme Inc.`,
description: `A corporate site`,
},
plugins: [
+ {
+ resolve: `gatsby-source-filesystem`,
+ options: {
+ name: `src`,
+ path: `${__dirname}/src`,
+ },
+ },
`gatsby-plugin-emotion`,
'gatsby-plugin-postcss',
],
};
Save the file and restart the gatsby development server.
Ctrl+C
gatsby develop
Then open up GraphiQL again.
http://localhost:8000/___graphQL
Write a query to view the file names in the content directory.
{
allFile {
edges {
node {
id
relativePath
prettySize
birthTime(fromNow: true)
}
}
}
}

Create a Page Query

Create a page named files.js that uses that uses a the query you just wrote as a page query to fetch data and then displays it in the page.
src\pages\files.js
import { graphql } from "gatsby";
import React from "react";
import Layout from "../components/layout";
import { PageTitle } from "../components/page-title";

const Th = ({ children }) => {
return (
<th className="px-5 py-3 border-b-2 border-gray-200 bg-blue-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
{children}
</th>
);
};

const Td = ({ children }) => {
return (
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
{children}
</td>
);
};

export default function Files({ data }) {
return (
<Layout>
<PageTitle>Files</PageTitle>
<table className="border border-gray-400 min-w-full leading-normal ">
<thead>
<tr>
<Th>Relative PaTh</Th>
<Th>Pretty Size</Th>
<Th>File Type</Th>
<Th>Created</Th>
</tr>
</thead>
<tbody>
{data.allFile.nodes.map((file) => (
<tr key={file.id}>
<Td>{file.relativePath}</Td>
<Td>{file.prettySize}</Td>
<Td>{file.extension}</Td>
<Td>{file.birthTime}</Td>
</tr>
))}
</tbody>
</table>
</Layout>
);
}

export const query = graphql`
{
allFile {
nodes {
id
relativePath
prettySize
extension
birthTime(fromNow: true)
}
}
}
`;
Load the files page and verify the contents.
http://localhost:8000/files/
Tip: visit the development 404 page by typing an invalid url to see a list of all available page routes

Transform Markdown Files into HTML

Install and configure the transformer plugin.
npm install gatsby-transformer-remark
gatsby-config.js
module.exports = {
siteMetadata: {
title: `Acme Inc.`,
description: `A corporate site`,
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src`,
},
},
+ `gatsby-transformer-remark`,
`gatsby-plugin-emotion`,
"gatsby-plugin-postcss",
],
}
Restart the development server then refresh (or open again) GraphiQL.
Query the contents of your articles from the markdown files and transform them to HTML.
query {
allMarkdownRemark {
nodes {
timeToRead
excerpt
frontmatter {
slug
id
title
}
}
}
}
Dislay the articles on the home page (pages\index.js). *You won't need the html field from the query just the excerpt so you can leave it out for now.
src\pages\index.html
import { graphql } from "gatsby";
import React from "react";
import Layout from "../components/layout";
import { PageTitle } from "../components/page-title";

export default function Home({ data }) {
console.log(data);
console.log(data.nodes);
return (
<Layout>
<PageTitle>Home</PageTitle>
<img src="https://source.unsplash.com/600x300/?house" alt="house" />
<blockquote className="py-6 text-xl text-gray-800 bg-gray-300 text-center my-6">
"We here at Acme Inc. understand that it is better to leverage
efficiently than to benchmark extensibly."
</blockquote>
<p>
What does the commonly-used commonly-used commonly-accepted industry
jargon "holistic" really mean? What does the term "re-sizing" really
mean? Imagine a combination of WAP and Apache. The ability to
integrate compellingly leads to the power to grow seamlessly. Your
budget for iterating should be at least one-tenth of your budget for
harnessing. If all of this comes off as fabulous to you, that's
because it is! The power to repurpose strategically leads to the
aptitude to productize mega-compellingly. If you redefine
proactively, you may have to maximize dynamically. Do you have a game
plan to become subscriber-defined? Think
micro-intra-clicks-and-mortar, open-source, C2B2B. If all of this
seems confused to you, that's because it is!
</p>
<div className="py-12">
<h2 className="text-xl">Featured Articles</h2>
<hr className="border-gray-400 pb-4" />
{data.allMarkdownRemark.nodes.map((node) => (
<div key={node.frontmatter.id} className="py-2">
<a className="hover:underline " href="">
<h3 className="text-sm text-gray-800 font-semibold tracking-wide uppercase">
{node.frontmatter.title}
</h3>
<p className="">{node.excerpt}</p>
</a>
</div>
))}
</div>
</Layout>
);
}

export const query = graphql`
query {
allMarkdownRemark {
nodes {
timeToRead
excerpt
frontmatter {
slug
id
title
}
}
}
}
`;

Create Pages from Data

Create the directory src\articles.
Create a file to tell gatsby what routes to dynamically generate: src\articles\{MarkdownRemark.frontmatter__slug}.js
Create a directory at src/templates, and then add the following in a file named src/templates/article.js.
In your browser, visit:
http://localhost:8000/nothing
This is the default 404 page in gatsby that displays all the site pages including the ones you just dynamically created.
Scroll down to the bottom of the Gatsby.js development 404 page and you should see the following article pages were generated.
/articles/recontextualizing-extensibily/
/articles/your-budget-for-streamlining/
/articles/determining-your-feature-set/
Note: If you click these page links at this point they will be broken.
Create the basics of a component to display an article but just hard-code a header.
src\pages\articles\{MarkdownRemark.frontmatter__slug}.js
import React from "react";
import Layout from "../../components/layout";
import { PageTitle } from "../../components/page-title";

export default function Article() {
return (
<Layout>
<PageTitle>Article Page</PageTitle>
</Layout>
);
}
In your browser, visit:
http://localhost:8000/nothing
Click on of the article links and you should see the Article Page header displayed.
Article Page
Write a query to find an article based on its slug/path.
Query

Query Variables

Note the id below won't work, you'll have to use a prior query to find an id for your dev environment.

{
  "id": "b982e018-50e0-58f0-8ca6-3169483ab7c4"
}

Update the article component as follows:
- Add the query to find an article as page query
- Display the title of the article
- Display the html of the article
src\components\article.js
+ import { graphql } from 'gatsby';
import React from 'react';
import Layout from '../components/layout';
import { PageTitle } from "../components/page-title"

+ export default function Article({ data }) {
+ const article = data.markdownRemark;
return (
<Layout>
+ <PageTitle>{article.frontmatter.title}</PageTitle>
+ <div dangerouslySetInnerHTML={{ __html: article.html }} />
</Layout>
);
}

export const query = graphql`
query {
allMarkdownRemark {
nodes {
timeToRead
excerpt
frontmatter {
slug
id
title
}
}
}
}
`
}

Update the article links on the home page to use the slug.
src\pages\index.js
- import { graphql } from "gatsby"
+ import { graphql, Link } from "gatsby"
import React from "react"
import Layout from "../components/layout"
import { PageTitle } from "../components/page-title"

export default function Home({ data }) {
return (
<Layout>
<PageTitle>Home</PageTitle>
...
<div className="py-12">
<h2 className="text-xl">Featured Articles</h2>
<hr className="border-gray-400 pb-4" />
{data.allMarkdownRemark.edges.map(({ node }) => (
<div key={node.frontmatter.id} className="py-2">
- <a className="hover:underline" href="">
+ <Link
+ className="hover:underline"
+ to={`articles${node.frontmatter.slug}`}
+ >
<h3 className="text-sm text-gray-800 font-semibold tracking-wide uppercase">
{node.frontmatter.title}
</h3>
<p className="">{node.excerpt}</p>
- </a>
+ </Link>
</div>
))}
</div>
</Layout>
)
}

export const query = graphql`
query {
allMarkdownRemark {
totalCount
edges {
node {
frontmatter {
id
slug
title
}
timeToRead
excerpt
}
}
}
}
`

Note: The graphql function call returns a Promise see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for more info

Data

Query Site MetaData

`gatsby-config.js`

Create a Static Query

Query Files

`gatsby-config.js`

Create a Page Query

`src\pages\files.js`

Transform Markdown Files into HTML

`gatsby-config.js`

`src\pages\index.html`

Create Pages from Data

`src\pages\articles\{MarkdownRemark.frontmatter__slug}.js`

Query

Query Variables

`src\components\article.js`

`src\pages\index.js`

Query Site MetaData#

gatsby-config.js#

Create a Static Query#

Query Files#

gatsby-config.js#

Create a Page Query#

src\pages\files.js#

Transform Markdown Files into HTML#

gatsby-config.js#

src\pages\index.html#

Create Pages from Data#

src\pages\articles\{MarkdownRemark.frontmatter__slug}.js#

Query#

Query Variables#

src\components\article.js#

src\pages\index.js#

Query Site MetaData

`gatsby-config.js`

Create a Static Query

Query Files

`gatsby-config.js`

Create a Page Query

`src\pages\files.js`

Transform Markdown Files into HTML

`gatsby-config.js`

`src\pages\index.html`

Create Pages from Data

`src\pages\articles\{MarkdownRemark.frontmatter__slug}.js`

Query

Query Variables

`src\components\article.js`

`src\pages\index.js`