Load Data using GraphQL Queries in a Gatsby Component with StaticQuery

on YouTube ↗33m

" summary

Builds a small Gatsby starter site and proves a component can fetch build-time data itself using a GraphQL query rather than relying on a page query. Uses Node.js + Gatsby, a local siteMetadata JSON file as the data source, React components and the Gatsby StaticQuery (or its hook) to inject the title into a header. One simple GraphQL query returns the title and the page renders it successfully, demo runs end-to-end.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 2:54Gatsby and Graphql
3. 5:04What Is Gatsby
4. 22:17Building a Brand New Gatsby Website
5. 23:30Add a React Header
6. 28:32Import Graphql
7. 31:06Static Queries
8. 31:51The Static Query Hook

" related talks

• 27mBeyond Static: Dynamic Web Applications with GatsbyDustin Schau · ReactNext 2019
• 25mLive coding a Portfolio with Gatsby + GraphQLEmma Bostian · React Live 2019
• 38mLIVE DEMO: Using GatsbyJS to build a decoupled (Drupal) websiteMark Conroy · DrupalCon Amsterdam 2019
• 50mUsing GatsbyJS to build a decoupled (Drupal) website (Live demo)Mark Conroy · Frontend United 2019
• 17mThe Client-Side Revolution, Brought to You by ReactKyle Mathews · Reactathon 2018
• 45mPump up the JAM with GatsbyStefan Adolf · code.talks 2019
• 59mGoodbye REST; Hello GraphQLSandeep Singh · NDC Oslo 2017
• 28mCurious Use Cases of GraphQLNader Dabit · ReactiveConf 2019