Master Gatsby -- Group Learnings

[fgomez828]

Opening up this issue for us as an org to drop knowledge nuggets we glean from Wes Bos's "Master Gatsby" course (login here). We can then add the most helpful pieces into our documentation about React / Gatsby.

[fgomez828]

Switched approaches to mostly watch (instead of do) the code-along and write up implementation details that aren't obvious and aren't currently in our internal documentation:

Module 2: Gatsby Basics

• Using <Link> instead of <a> for local links
• Using Layout

Module 3: CSS in Gatsby

• There are a few options for styling. My understanding is we currently use src/styles/global.css file, but a few other things it might be useful to make note of / provide context for:
  • gatsby-browser.js is what Wes Bos recommends for global styles. I'd be curious to do more research about the pros & cons of this approach vs what we've been doing
• normalize.css might be worth exploring also, particularly as a way to shorten the amount of time we test browser compatibility for styling.

[fgomez828]

Will continue with Module 4: Headless CMS next investment time

• skipping this section since I've realized it's not relevant to our stack as far as I can tell

Module 5: GraphQL

• gatsby-config.js allows us to pull data from a headless CMS or a directory of final data from an ETL pipeline into GraphQL. It also allows us to add site metadata and make use of plugins. Here are the docs on gatsby-config.js.
• Page queries vs static queries
  • Page queries: have to run on a top level page (as opposed to component); can be dynamic with variables
  • Static queries: cannot be dynamic & no variables can be passed; can run on any page though

Module 6: Puttin' in work

• Images:
  • whether using an external image hosting service like cloudinary or handling images within the app, the way we want to serve those images will remain the same.
  • gatsby-img <Img> component, include fluid or static property (fluid makes the image responsive) and alt property.

Module 7: Making Gatsby Dynamic

• Working with external APIs:
  • gatsby-node.js file using sourceNodes() method to tell Gatsby to get data and turn it into nodes

[fgomez828]

Module 8: Pages & Filtering

• Querying and pagination
  • include totalCount in your graphql query for the data you want to paginate
  • b/c gatsby pre-loads all pages, you need to know how many pages you will need (totalCount / total per page + 1 if remainder)
  • async function to paginate data in gatsby-node.js; in this method, query for data to be paginated & create each page with the appropriate number of query results using actions.createPage
  • provide context for each page including skip = <number of query results to skip on this page>, currentPage = <the page number>, and pageSize = <number of results on this page>
  • variables passed in context will be available to your graphql query for the paginated page; also use graphql's limit filter
  • create components/Pagination.js and import your query
  • Honesty, will probably re-watch module 8 and grab code examples from the repo provided for the course. lots of good stuff here if we decide to do pagination without an additional module (aka not for a table or something)

Module 9: Custom Pages + SEO

• React Helmet allows you to update information in the head of the document anywhere you add the <Helmet> tag
• this module is basically a crash course on Helmet; might be worth getting the documentation for helmet directly

Module 10: Order form, custom hooks, & state management

• talks about hooks, which is the new preferred way to affect state. worth linking directly to React documentation on hooks

Modules 11 - 13:

• these modules were primarily concerned with addressing the final details of the pizza ordering site (11: serverless functions to manage orders, 12: client-side data for creating a loading screen, 13: Build, deploy, & responsive design)