Gatsby: The Definitive Guide: Build and Deploy Highly Performant Jamstack Sites and Applications

542 Pages·2021·27.012 MB·English

by  Preston So

GGaattssbbyy

TThhee DDeefifinniittiivvee GGuuiiddee
Build and Deploy Highly Performant Jamstack
Sites and Applications
Preston So
Foreword by
Jason Lengstorf

Gatsby: The Definitive Guide
Build and Deploy Highly Performant
Jamstack Sites and Applications
Preston So
BBeeiijjiinngg BBoossttoonn FFaarrnnhhaamm SSeebbaassttooppooll TTookkyyoo
Gatsby: The Definitive Guide
by Preston So
Copyright © 2021 Preston So. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles (http://oreilly.com). For more information, contact our corporate/institutional
sales department: 800-998-9938 or [e-mail].
Acquisition Editor: Amanda Quinn Indexer: nSight, Inc.
Development Editor: Jeff Bleiel Interior Designer: David Futato
Production Editor: Katherine Tozer Cover Designer: Karen Montgomery
Copyeditor: Rachel Head Illustrator: Kate Dullea
Proofreader: Stephanie English
September 2021: First Edition
Revision History for the First Edition
2021-09-10: First Release
See http://oreilly.com/catalog/errata.csp?isbn=9781492087519 for release details.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Gatsby: The Definitive Guide, the cover
image, and related trade dress are trademarks of O’Reilly Media, Inc.
The views expressed in this work are those of the author, and do not represent the publisher’s views.
While the publisher and the author have used good faith efforts to ensure that the information and
instructions contained in this work are accurate, the publisher and the author disclaim all responsibility
for errors or omissions, including without limitation responsibility for damages resulting from the use of
or reliance on this work. Use of the information and instructions contained in this work is at your own
risk. If any code samples or other technology this work contains or describes is subject to open source
licenses or the intellectual property rights of others, it is your responsibility to ensure that your use
thereof complies with such licenses and/or rights.
978-1-492-08751-9
[LSI]
For my father, with love.

Table of Contents
Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Part I. Elementary Gatsby
1. Gatsby Fundamentals. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
What Is Gatsby? 3
Gatsby Pages and Components 4
Gatsby’s Data Layer: GraphQL and Source Plugins 5
The Gatsby Ecosystem 6
Why Gatsby? 7
Performance 7
Accessibility 9
Developer Experience 9
Security 10
Gatsby and the Jamstack 11
Static Site Generators 11
Distributed Content and Commerce 12
The Jamstack 14
JavaScript in Gatsby 16
Command-Line Interfaces 16
Modular JavaScript 17
React in Gatsby 18
Declarative Rendering with JSX 19
React Components 20
v
React Props 21
Getting Going with Gatsby 22
The Command Line 23
Installing the Gatsby CLI 23
Creating Your First Gatsby Site 24
Starting a Development Server 26
Creating a Production Build 27
Serving the Production Build Locally 28
Conclusion 28
2. Core Elements of Gatsby. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
The Gatsby CLI 29
Installing and Configuring the Gatsby CLI 29
gatsby new 30
gatsby develop 32
gatsby build 33
gatsby serve 34
Other Useful Gatsby CLI Commands 35
Starters 36
Official and Community Starters 36
Modifying Starters 37
Creating a New Project from a Starter 38
The gatsby-config.js File 39
Gatsby Pages and Components 40
Pages 40
Components 41
Linking Between Pages 43
The Layout Component 44
Using CSS in Gatsby 46
Global Styling 46
Modular Styling with CSS Modules 50
CSS-in-JS 51
Extending Gatsby with Plugins 56
Installing Gatsby Plugins 58
Loading Local Plugins 59
Conclusion 61
3. Adding Features to Gatsby Sites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Pages and Routing in Gatsby 63
Rehydration 64
Static Pages 64
vi | Table of Contents
Hybrid Application Pages 65
Client-Only Routes 66
Differences Between Gatsby Sites and React Applications 67
Adding Forms 68
Basic Forms 68
Handling Form Submissions 72
Adding Localization and Internationalization 77
gatsby-plugin-i18n 78
react-intl 78
react-i18next 78
Adding an XML Sitemap 79
Adding a 404 Page 81
Adding Analytics 82
Conclusion 83
Part II. Data in Gatsby
4. GraphQL and the Gatsby Data Layer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
GraphQL Fundamentals 88
GraphQL Queries 89
GraphQL Fields 90
GraphQL Arguments 91
GraphQL Query Variables 97
GraphQL Directives 98
GraphQL Fragments 99
GraphQL Schemas and Types 101
The Gatsby Data Layer 103
GraphiQL 103
GraphiQL Explorer 106
GraphQL Playground 107
Page and Component Queries 108
Page Queries 109
Component Queries with StaticQuery 113
Component Queries with the useStaticQuery Hook 114
Conclusion 116
5. Source Plugins and Sourcing Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Using Source Plugins 119
Installing Source Plugins 120
Setting Up Source Plugins 120
Table of Contents | vii
Using Environment Variables with Source Plugins 121
Sourcing Data from the Filesystem 123
Setting Up gatsby-source-filesystem 123
Working with Files from the Filesystem 125
Working with Multiple Directories in the Filesystem 128
Sourcing Data from Database Systems 129
MongoDB 129
MySQL 132
PostgreSQL 134
Amazon Redshift, SQLite3, Oracle, and MSSQL 135
Sourcing Data from Third-Party SaaS Services 138
Airtable 138
AWS DynamoDB 141
Google Docs 142
Sourcing Data from CMSs and Commerce Systems 144
Contentful 144
Drupal 147
Netlify CMS 150
Prismic 152
Sanity 155
Shopify 157
WordPress 158
Sourcing Data from Other Sources 161
Sourcing Data from GraphQL APIs 161
Sourcing Data from JSON and YAML 166
Conclusion 167
6. Programmatic Page Creation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Traversing GraphQL Data in Pages 170
Working with Transformer Plugins 175
Adding Transformer Plugins 176
Transforming Markdown into Data and HTML 177
Adding a List of Markdown Pages 178
Working with gatsby-node.js 181
Creating Slugs for Markdown Pages 181
Adding a Template 183
Adding Markdown Pages with createPages 185
Conclusion 189
7. Assets in Gatsby. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Working with Assets 191
viii | Table of Contents