Gatsby Tutorial #20 - Query Variables

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Useful playlists:

🐱‍💻 🐱‍💻 Other links:

🐱‍💻 🐱‍💻 Social Links:

[opeyemi.gfamosipe]

After searching through the internet for how to use graphql, I was tutorial 19 of this series, I had to watch everything and it worth it... Thank you NetNinja, I understand react, reactnative, now gatsby with graphql because of your videos.

[aymanmilhem]

This tutorial is awesome and The Net Ninja is an awesome teacher, very clear and thorough, and does not assume prior knowledge, and most important: does not say one word and mean another, leaving it up to you go guess the true meaning.

[jdubhman]

Took me a few days, but here's my Gatsby V3 project-details.js with everything I think is working right.
So this is with the styles issue fixed and using GatsbyImage - Hats off to The Net Ninja! thank you so much...🙏

import React from 'react'
import Layout from '../components/Layout'
import { GatsbyImage } from "gatsby-plugin-image"
import * as styles from
import { graphql } from 'gatsby'

export default function ProjectDetails({ data }) {
const { html } = data.markdownRemark
const { title, stack, featuredImg } =
console.log(data)


return (
<Layout>
<div className={styles.details}>
<h2>{title}</h2>
<h3>{stack}</h3>
<div className={styles.featured}>
<GatsbyImage alt="featured" />
</div>
<div className={styles.html} dangerouslySetInnerHTML={{ __html: html }} />
</div>
</Layout>
)
}


export const query = graphql`
query ProjectDetails($slug: String) {
markdownRemark(frontmatter: {slug: {eq: $slug}}) {
html
frontmatter {
stack
title
featuredImg {
childImageSharp {
gatsbyImageData(
layout: FULL_WIDTH
placeholder: BLURRED
transformOptions: {grayscale: true}
)
}
}
}
}
}
`

[slopper]

If you've updated gatsby-image to gatsby-plugin-image, your image tag will look like this:



Your query will also be a bit different, it should look like this:


        html
        frontmatter {
            stack
            slug
            title
            featuredImg {
            childImageSharp {

            }
            }
        }
        }
    }

[rinconfede]

SOLUTION FOR GATSBY V3

New interesting thing, now you could have two querys with the same name


This is the project-details.js

import { graphql } from 'gatsby';
import React from 'react';
import Layout from '../components/Layout';
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import * as styles from


export default function ProjectDetails({ data }) {

const { html } = data.markdownRemark
const { title, stack, featuredImg } =

return (
<Layout>
<div className={styles.details}>
<h2> { title } </h2>
<h3> { stack } </h3>
<div className={styles.featured}>
<GatsbyImage alt="Projects" />
{/* <GatsbyImage alt="Projects" /> */}
</div>
<div className={styles.html} dangerouslySetInnerHTML={{ __html: html }} />
</div>
</Layout>
)
}

export const query = graphql`
query ProjectsPage($slug: String) {
markdownRemark(frontmatter: {slug: {eq: $slug}}) {
html
frontmatter {
stack
title
featuredImg {
childImageSharp {
gatsbyImageData
}
}
}
}
}
`;

[vladimirputindreadlockrast]

For Gatsby 5'ers who managed to use gatsby-image and not gatsby-plugin-image, you only need to add one line to imports:

import { graphql } from 'gatsby'

My entire templates\project-details.js:

import React from "react"
import Img from "gatsby-image"
import Layout from "../components/Layout"
import * as styles from
import { graphql } from 'gatsby'

const ProjectDetails = ({ data }) => {
const { html } = data.markdownRemark
const { title, stack, featuredImg } =

return (
<Layout>
<div className={styles.details}>
<h2>{title}</h2>
<h3>{stack}</h3>
<div className={styles.featured}>
<Img />
</div>
<div className={styles.html} dangerouslySetInnerHTML={{ __html: html }} />
</div>
</Layout>
)
}

export default ProjectDetails

export const query = graphql`
query ProjectDetails($slug: String) {
markdownRemark(frontmatter: {slug: {eq: $slug}}) {
html
frontmatter {
stack
title
featuredImg {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`

[danielkim]

How do we generally pass variables through a template from the place you create it? (not through graphql only)

[edward___]

my query is too long so could i write a page query in another file and import to use it ??

[aasifmunshi-ppld]

my featured image in graphql has no substring....please help

[nowaccki]

Your variable came from gatsby-node.js, but is it possible to query using variables that are created in regular JS? For example, if you have multiple image folder directories labelled 1-10, can you use an increment or decrement counter to dynamically render the directory that corresponds to the count? (i.e. if const count === 2, render directory "/2") ?

[yacinemathurin]

Having featured image not showing using GatsbyImage in develop mode ? Try to build and serve your project.

[gauravmahat]

The featuredImg is not showing for me. I have used the <GatsbyImage />, but still it does not show up in the page. Does anyone have a solution for that?

[BobbyBundlez]

ok i'm tired of all of these examples being with slugs and ids. what if i wnat to use category, or type, or some random other frontmatter value... it isn't working for me a year later lol

[codingchannels]

Is there a way to pass query variable to page query for normal pages that are not created by createPage hook?

[rizalsofyans]

hi, can you show how to styling active link in gatsby? thank you!

[MegaPatrick]

isn't it better way to fetch all data from graphql in gatsby-node, not only slug? I check in my commercial project, where i have 30000 dynamic pages - with your way building this pages take 1h 20m, in my way it takes 15m :D

[caespinoza]

Hi, i have a questions, what about if one of the .md has a different structure? i mean for example if one of those don't have photo?