Gatsby JS - The Great Gatsby Bootcamp [Full Tutorial]
Why Stack Overflow recommends it
Stack Overflow users cite it as the tutorial they are following when they hit problems with Gatsby, GraphQL queries, Contentful and environment variables.
Recommended by 0 people across 0 different months, 2019 to 2021.
What it is
A 4.5 hour full course by Andrew Mead that walks through building a Gatsby site from scratch. It covers pages, layouts, styling, GraphQL data, Markdown blogs, Contentful, and deployment, with downloadable code for each section.
What people said
Cites user11507236 · 2019-06 · Stack Overflow · on “Environmental variables only accessible during development, how to make this work after deploying website? (GatsbyJS project)”
I am following this tutorial: [this video] and he didn't use `.env.development` nor `.env.production` right before deploying, yet he can still access his env var, why is that?
Cites benard-kong · 2019-12 · Stack Overflow · on “GraphQL: How to pass Query Variables via playground?”
I am following Andrew Mead's tutorial on Gatsby [this video] and for some reason I am having trouble with passing query variables to the query via GraphQL playground. As far as I can tell, the query works on node, as the contents of the 'blog' are being populated. Here is my code for the Query Variables (bottom left in GQL playground). { "slug": "example" } And the query I am making: query ($slug: String!) { markdownRemark ( fields: { slug: { eq: $slug } } ) { frontmatter { title date } html } } However, this results in error: "message": "Variable \"$slug\" of required type \"String!\" was not provided.", After playing around with making the variable required and not required, I am pretty sure it
Cites StephD · 2020-01 · Stack Overflow · on “how to show media content from contentful using gatsby”
Going through Andrew Mead's gatsby tutorial [this video] . I have my contentful model set up with a media field for the hero image. The rich text and text fields work fine. In my index page I want each post to show up with a thumbnail of the hero image. My graphql query looks like this, and you can see heroImage in there, which works fine in the graphql playground: const data = useStaticQuery(graphql` query { allContentfulWork(sort: { fields: publishedDate, order: DESC }) { edges { node { title slug publishedDate(formatString: "MMMM Do, YYYY") heroImage { file { url } } } } } } `) ^^This works in graphql playground. And below in index.js I'm returning: return ( <Layout> <ul className={workStyles.
Cites Tony Radin · 2021-01 · Stack Overflow · on “Gatsby soruce contentful body”
Step 1. Make sure you have imported gatsby-source-contentful using: npm install gatsby-source-contentful Step 2. Add this to you imports: import { renderRichText } from "gatsby-source-contentful/rich-text" Step 3. Your query should look something like this export const query = graphql` query($slug: String!){ contentfulBlogPost(slug: {eq: $slug}) { title publishedDate(formatString: "MMMM Do, YYYY") body{ raw } } }` Step 4. return {renderRichText(props.data.contentfulBlogPost.body)} const Blog = (props) => { return( <Layout> <h1>{props.data.contentfulBlogPost.title}</h1> <p>{props.data.contentfulBlogPost.publishedDate}</p> <div>{renderRichText(props.data.contentfulBlogPost.body)}</div> </Layou