Home Page Icon
Home Page
Table of Contents for
III. Extending Gatsby
Close
III. Extending Gatsby
by
Gatsby: The Definitive Guide
Preface
Who Should Read This Book
Why I Wrote This Book
Navigating This Book
Conventions Used in This Book
Using Code Examples
O’Reilly Online Learning
How to Contact Us
Acknowledgments
I. Elementary Gatsby
1. Gatsby Fundamentals
What Is Gatsby?
Gatsby Pages and Components
Gatsby’s Data Layer: GraphQL and Source Plugins
The Gatsby Ecosystem
Why Gatsby?
Performance
Accessibility
Developer Experience
Security
Gatsby and the Jamstack
Static Site Generators
Distributed Content and Commerce
The Jamstack
JavaScript in Gatsby
Command-Line Interfaces
Modular JavaScript
React in Gatsby
Declarative Rendering with JSX
React Components
React Props
Getting Going with Gatsby
The Command Line
Installing the Gatsby CLI
Creating Your First Gatsby Site
Starting a Development Server
Creating a Production Build
Serving the Production Build Locally
Conclusion
2. Core Elements of Gatsby
The Gatsby CLI
Installing and Configuring the Gatsby CLI
gatsby new
gatsby develop
gatsby build
gatsby serve
Other Useful Gatsby CLI Commands
Starters
Official and Community Starters
Modifying Starters
Creating a New Project from a Starter
The gatsby-config.js File
Gatsby Pages and Components
Pages
Components
Linking Between Pages
The Layout Component
Using CSS in Gatsby
Global Styling
Modular Styling with CSS Modules
CSS-in-JavaScript
Extending Gatsby with Plugins
Installing Gatsby Plugins
Loading Local Plugins
Conclusion
3. Adding Features to Gatsby Sites
Pages and Routing in Gatsby
Rehydration
Static Pages
Hybrid Application Pages
Client-Only Routes
Differences Between Gatsby Sites and React Applications
Adding Forms
Basic Forms
Handling Form Submissions
Adding Localization and Internationalization
gatsby-plugin-i18n
react-intl
react-i18next
Adding an XML Sitemap
Adding a 404 Page
Adding Analytics
Conclusion
II. Data in Gatsby
4. GraphQL and the Gatsby Data Layer
GraphQL Fundamentals
GraphQL Queries
GraphQL Fields
GraphQL Arguments
GraphQL Query Variables
GraphQL Directives
GraphQL Fragments
GraphQL Schemas and Types
The Gatsby Data Layer
GraphiQL
GraphiQL Explorer
GraphQL Playground
Page and Component Queries
Page Queries
Component Queries with StaticQuery
Component Queries with the useStaticQuery Hook
Conclusion
5. Source Plugins and Sourcing Data
Using Source Plugins
Installing Source Plugins
Setting Up Source Plugins
Using Environment Variables with Source Plugins
Sourcing Data from the Filesystem
Setting Up gatsby-source-filesystem
Working with Files from the Filesystem
Working with Multiple Directories in the Filesystem
Sourcing Data from Database Systems
MongoDB
MySQL
PostgreSQL
Amazon Redshift, SQLite3, Oracle, and MSSQL
Sourcing Data from Third-Party SaaS Services
Airtable
AWS DynamoDB
Google Docs
Sourcing Data from CMSs and Commerce Systems
Contentful
Drupal
Netlify CMS
Prismic
Sanity
Shopify
WordPress
Sourcing Data from Other Sources
Sourcing Data from GraphQL APIs
Sourcing Data from JSON and YAML
Conclusion
6. Programmatic Page Creation
Traversing GraphQL Data in Pages
Working with Transformer Plugins
Adding Transformer Plugins
Transforming Markdown into Data and HTML
Adding a List of Markdown Pages
Working with gatsby-node.js
Creating Slugs for Markdown Pages
Adding a Template
Adding Markdown Pages with createPages
Conclusion
7. Assets in Gatsby
Working with Assets
Types of Assets in Gatsby
Importing Assets Directly with Webpack
Querying for Assets with gatsby-source-filesystem
Importing Assets with the static Folder
Working with Images
The gatsby-plugin-image Plugin (Gatsby 3.0)
The gatsby-image Component (Gatsby 2.0)
Working with Videos
Creating Custom Components for Hosted Videos
Querying Videos from Markdown Using GraphQL
Self-Hosting Your Own Videos
Working with Fonts
Adding Local Fonts
Adding Web Fonts
Conclusion
8. Adding Data-Driven Features to Gatsby Sites
Adding Site Search
Implementing Site Search with Algolia
Configuring gatsby-plugin-algolia
Querying Pages with GraphQL for Indexing
Adding a Commenting System
Adding Taxonomy to Blog Posts
Adding Tags and Querying for All Tags
Adding a Tag Page Template
Programmatic Tag Page Creation with gatsby-node.js
Adding a Tag Index Page
Adding Pagination
Preparing for Pagination in Page Templates
Generating Paginated Pages with gatsby-node.js
Adding an RSS Feed
Adding an RSS Feed to a Markdown Blog
Adding an RSS Feed for Non-Markdown Content
Adding Authentication
Preparing for Authentication
Creating Client-Only Routes
Managing Private Routes
Providing Privileged Data to Routes
Conclusion
III. Extending Gatsby
9. Gatsby Plugins and Starters
Creating Gatsby Starters
Gatsby Starter Requirements
Enabling Starter Configuration
Starter Performance and Accessibility
Licensing, Testing, and Releasing Starters
Creating Gatsby Plugins
Plugin Nomenclature
Initializing a New Plugin Project
Plugin Configuration with Options
Interacting with Gatsby Lifecycle APIs
Creating Source Plugins
Initializing Projects for Source Plugin Development
Installing the Source Plugin
Creating GraphQL Nodes
Querying and Sourcing Remote Data
Establishing Foreign Key Relationships
Using Plugin Options to Allow Customization
Creating Transformer Plugins
Reviewing an Example: gatsby-transformer-yaml
Ensuring Needed Data Is Sourced
Transforming Nodes
Establishing the Transformer Relationship
Creating New Nodes from Derived Data and Querying
Publishing and Maintaining Plugins
Submitting Plugins to the Gatsby Plugin Library
Maintaining Plugins
Conclusion
10. Gatsby Themes
Gatsby Themes in Context
Differences from Plugins and Starters
Deciding Between Using and Creating a Theme
Using Gatsby Themes
Starting a New Site from a Theme
Using a Theme in an Existing Site
Using Multiple Gatsby Themes
Creating Gatsby Themes
Creating New Themes
Gatsby Theme Conventions
Converting Starters into Themes
Theme Shadowing
Theme Shadowing in gatsby-theme-blog
Shadowing Other Files
Extending Shadowed Files
Conclusion
IV. Production Gatsby
11. Debugging and Testing Gatsby
Testing Gatsby
Unit Testing with Jest
Testing React Components
Visual Testing with Storybook
End-to-End Testing with Cypress
Debugging Gatsby
Debugging Static Builds
Debugging the Build Process
Debugging Server-Side Rendering Issues
Debugging Cache Issues
Debugging Asynchronous Lifecycle Methods
Conclusion
12. Deploying Gatsby
Environment Variables
Defining Environment Variables
Using Environment Variables
Using Path and Asset Prefixes
Path Prefixes
Asset Prefixes
Deploying to Hosting Services
Netlify
Vercel
Gatsby Cloud
AWS Amplify
Azure
Amazon S3
Heroku
Firebase
GitHub Pages
Conclusion
V. Advanced Gatsby
13. Advanced Topics in Gatsby
Creating Recipes
Infrastructure as Code
Automating Site Operations with Recipes
Adding Components to Markdown with MDX
Getting Started with MDX
Creating MDX Pages
Importing Components into MDX Files
Customizing Markdown Components
Schema Customization
Explicitly Defining Data Types
Implementing the createResolvers API
Creating Custom Interfaces and Unions
Custom Gatsby Configuration
Babel
Babel Plugin Macros
Webpack
Customizing html.js
ESLint
Proxying API Requests
Performance Optimization
Caching Gatsby Sites
Adding a Progressive Web App Manifest File
Adding Offline Support with Service Workers
Profiling with React Profiler
Performance Tracing for Gatsby Builds
Conditional Page Builds
Conclusion
14. Gatsby Internals
APIs and Plugins in Gatsby
Loading Configured Plugins
The apiRunInstance Object
Executing Plugins and Injecting Arguments
The Gatsby Build Lifecycle
Node Creation
Schema Generation
Schema Inference
Schema Root Fields and Utility Types
Page Creation
Query Extraction and Execution
Writing Out Pages
Bundling Gatsby
Generating the JavaScript Bundle
The production-app.js file
Enabling Code Splitting and Prefetching
Conclusion
A. The Gatsby CLI
Gatsby Cheat Sheet
Common CLI Commands
Quick Start Commands
Helpful File Definitions
Top Documentation Pages
Gatsby CLI Commands
new
develop
build
serve
info
clean
plugin
repl
B. Gatsby Component APIs
<Link />
<Link /> Usage
Active Styles for <Link />
Working with Props in <Link />
navigate
gatsby-plugin-image
StaticImage
GatsbyImage
Image Options
Helper Functions
C. Gatsby Configuration APIs
Config APIs
siteMetadata
plugins
flags
pathPrefix
polyfill
mapping
proxy
developMiddleware
Node APIs
createPages
createPagesStatefully
createResolvers
createSchemaCustomization
onCreateBabelConfig
onCreateDevServer
onCreateNode
onCreatePage
onCreateWebpackConfig
onPostBootstrap
onPostBuild
onPreBootstrap
onPreBuild
onPreExtractQueries
onPreInit
pluginOptionsSchema
preprocessSource
resolvableExtensions
setFieldsOnGraphQLNodeType
sourceNodes
unstable_onPluginInit
unstable_shouldOnCreateNode
Index
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
8. Adding Data-Driven Features to Gatsby Sites
Next
Next Chapter
9. Gatsby Plugins and Starters
Part III.
Extending Gatsby
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset