Gatsby: The Definitive Guide (ebook)

Get the definitive guide on Gatsby, the JavaScript framework for building blazing fast websites and applications. Used by Nike, Costa Coffee, and other companies worldwide, Gatsby is emerging as one of the key technologies in the Jamstack (JavaScript, APIs, and markup) ecosystem. With this comprehensive guide, you'll learn how to architect, build, and deploy Gatsby sites independently or with CMSs, commerce systems, and other data sources.Author Preston So begins by showing you how to set up a Gatsby site from scratch. From there, youâ??ll learn ways to use Gatsbyâ??s declarative rendering and GraphQL API, build complex offline-enabled sites, and continuously deploy Gatsby sites on a variety of platforms, including Gatsby Cloud.Discover how Gatsby integrates with many data sources and plug-insSet up, configure, and architect Gatsby sites using Gatsby's CLI, React, JSX, and GraphQL with high performance out of the boxBuild an independent Gatsby site based on Markdown and data- and content-driven Gatsby sites that integrate with CMSs and commerce platformsDeploy Gatsby sites with full CI/CD and test coverage on a variety of platforms, including Netlify, Vercel, and Gatsby Cloud Spis treści: ForewordPrefaceWho Should Read This BookWhy I Wrote This BookNavigating This BookConventions Used in This BookUsing Code ExamplesOReilly Online LearningHow to Contact UsAcknowledgmentsI. Elementary Gatsby1. Gatsby FundamentalsWhat Is Gatsby?Gatsby Pages and ComponentsGatsbys Data Layer: GraphQL and Source PluginsThe Gatsby EcosystemWhy Gatsby?PerformanceAccessibilityDeveloper ExperienceSecurityGatsby and the JamstackStatic Site GeneratorsDistributed Content and CommerceThe JamstackDifferences between Jamstack and other architecturesServerless infrastructureJavaScript in GatsbyCommand-Line InterfacesModular JavaScriptReact in GatsbyDeclarative Rendering with JSXReact ComponentsReact PropsGetting Going with GatsbyThe Command LineInstalling the Gatsby CLICreating Your First Gatsby SiteStarting a Development ServerCreating a Production BuildServing the Production Build LocallyConclusion2. Core Elements of GatsbyThe Gatsby CLIInstalling and Configuring the Gatsby CLIgatsby newgatsby developgatsby buildgatsby serveOther Useful Gatsby CLI Commandsgatsby infogatsby cleangatsby plugingatsby replStartersOfficial and Community StartersModifying StartersCreating a New Project from a StarterThe gatsby-config.js FileGatsby Pages and ComponentsPagesComponentsLinking Between PagesThe Layout ComponentUsing CSS in GatsbyGlobal StylingGlobal styling with a layout componentGlobal styling without the layout componentGlobal styling with component stylesheetsModular Styling with CSS ModulesCSS-in-JSEmotionStyled ComponentsExtending Gatsby with PluginsInstalling Gatsby PluginsLoading Local PluginsConclusion3. Adding Features to Gatsby SitesPages and Routing in GatsbyRehydrationStatic PagesHybrid Application PagesClient-Only RoutesDifferences Between Gatsby Sites and React ApplicationsAdding FormsBasic FormsHandling Form SubmissionsGetformNetlify FormsFormspreeAdding Localization and Internationalizationgatsby-plugin-i18nreact-intlreact-i18nextAdding an XML SitemapAdding a 404 PageAdding AnalyticsConclusionII. Data in Gatsby4. GraphQL and the Gatsby Data LayerGraphQL FundamentalsGraphQL QueriesGraphQL FieldsGraphQL Argumentslimit and skipfiltersortGraphQL Query VariablesGraphQL DirectivesGraphQL FragmentsGraphQL Schemas and TypesThe Gatsby Data LayerGraphiQLGraphiQL ExplorerGraphQL PlaygroundPage and Component QueriesPage QueriesComponent Queries with StaticQueryComponent Queries with the useStaticQuery HookConclusion5. Source Plugins and Sourcing DataUsing Source PluginsInstalling Source PluginsSetting Up Source PluginsUsing Environment Variables with Source PluginsSourcing Data from the FilesystemSetting Up gatsby-source-filesystemWorking with Files from the FilesystemWorking with Multiple Directories in the FilesystemSourcing Data from Database SystemsMongoDBMySQLPostgreSQLAmazon Redshift, SQLite3, Oracle, and MSSQLSourcing Data from Third-Party SaaS ServicesAirtableAWS DynamoDBGoogle DocsSourcing Data from CMSs and Commerce SystemsContentfulDrupalNetlify CMSPrismicSanityShopifyWordPressSourcing Data from Other SourcesSourcing Data from GraphQL APIsSourcing Data from JSON and YAMLConclusion6. Programmatic Page CreationTraversing GraphQL Data in PagesWorking with Transformer PluginsAdding Transformer PluginsTransforming Markdown into Data and HTMLAdding a List of Markdown PagesWorking with gatsby-node.jsCreating Slugs for Markdown PagesUsing onCreateNodeUsing createNodeFieldAdding a TemplateAdding Markdown Pages with createPagesConclusion7. Assets in GatsbyWorking with AssetsTypes of Assets in GatsbyImporting Assets Directly with WebpackQuerying for Assets with gatsby-source-filesystemQuerying for assets in Gatsby pages and componentsQuerying for assets in Markdown filesImporting Assets with the static FolderMotivations for using the static folderReferencing a static assetWorking with ImagesThe gatsby-plugin-image Plugin (Gatsby 3.0)Using gatsby-plugin-imageStatic images with gatsby-plugin-imageDynamic images with gatsby-plugin-imageThe gatsby-image Component (Gatsby 2.0)Using gatsby-imageWorking with VideosCreating Custom Components for Hosted VideosQuerying Videos from Markdown Using GraphQLSelf-Hosting Your Own VideosWorking with FontsAdding Local FontsAdding Web FontsAdding Google FontsAdding Adobe Fonts (Typekit)Conclusion8. Adding Data-Driven Features to Gatsby SitesAdding Site SearchImplementing Site Search with AlgoliaConfiguring gatsby-plugin-algoliaQuerying Pages with GraphQL for IndexingAdding a Commenting SystemAdding Taxonomy to Blog PostsAdding Tags and Querying for All TagsAdding a Tag Page TemplateProgrammatic Tag Page Creation with gatsby-node.jsAdding a Tag Index PageAdding PaginationPreparing for Pagination in Page TemplatesGenerating Paginated Pages with gatsby-node.jsAdding an RSS FeedAdding an RSS Feed to a Markdown BlogAdding an RSS Feed for Non-Markdown ContentAdding AuthenticationPreparing for AuthenticationCreating Client-Only RoutesManaging Private RoutesProviding Privileged Data to RoutesConclusionIII. Extending Gatsby9. Gatsby Plugins and StartersCreating Gatsby StartersGatsby Starter RequirementsEnabling Starter ConfigurationStarter Performance and AccessibilityLicensing, Testing, and Releasing StartersCreating Gatsby PluginsPlugin NomenclatureInitializing a New Plugin ProjectPlugin Configuration with OptionsAccessing and passing plugin configuration optionsValidating plugin configuration with an options schemaBest practices for writing options schemasPerforming unit testing on options schemasInteracting with Gatsby Lifecycle APIsCreating Source PluginsInitializing Projects for Source Plugin DevelopmentInstalling the Source PluginCreating GraphQL NodesQuerying and Sourcing Remote DataConfiguring an Apollo client to retrieve dataQuerying data from the APIOptimizing remote images and creating remote File nodesTransforming File nodes with Sharp pluginsEstablishing Foreign Key RelationshipsUsing Plugin Options to Allow CustomizationCreating Transformer PluginsReviewing an Example: gatsby-transformer-yamlEnsuring Needed Data Is SourcedTransforming NodesEstablishing the Transformer RelationshipCreating New Nodes from Derived Data and QueryingPublishing and Maintaining PluginsSubmitting Plugins to the Gatsby Plugin LibraryMaintaining PluginsHandling plugin patches and improvementsWriting a README and documentationManaging dependency versionsConclusion10. Gatsby ThemesGatsby Themes in ContextDifferences from Plugins and StartersDeciding Between Using and Creating a ThemeUsing Gatsby ThemesStarting a New Site from a ThemeUsing a Theme in an Existing SiteUsing Multiple Gatsby ThemesCreating Gatsby ThemesCreating New ThemesGatsby Theme ConventionsNomenclature and required directoriesSeparating data queries from rendering componentsProviding data customization in themesReleasing and versioning Gatsby themesConverting Starters into ThemesTheme ShadowingTheme Shadowing in gatsby-theme-blogShadowing Other FilesExtending Shadowed FilesConclusionIV. Production Gatsby11. Debugging and Testing GatsbyTesting GatsbyUnit Testing with JestConfiguring JestWriting unit testsRunning unit testsTesting React ComponentsVisual Testing with StorybookEnd-to-End Testing with CypressDebugging GatsbyDebugging Static BuildsDebugging the Build ProcessDebugging Server-Side Rendering IssuesDebugging Cache IssuesDebugging Asynchronous Lifecycle MethodsConclusion12. Deploying GatsbyEnvironment VariablesDefining Environment VariablesClient-side environment variablesServer-side environment variablesUsing Environment VariablesUsing Path and Asset PrefixesPath PrefixesAsset PrefixesDeploying to Hosting ServicesNetlifyVercelGatsby CloudAWS AmplifyAzureAmazon S3HerokuFirebaseGitHub PagesConclusionV. Advanced Gatsby13. Advanced Topics in GatsbyCreating RecipesInfrastructure as CodeAutomating Site Operations with RecipesAdding Components to Markdown with MDXGetting Started with MDXCreating MDX PagesImporting Components into MDX FilesCustomizing Markdown ComponentsSchema CustomizationExplicitly Defining Data TypesThe Node interface and automatic type inferenceCreating explicit type definitionsHandling nested typesImplementing the createResolvers APICreating Custom Interfaces and UnionsCustom Gatsby ConfigurationBabelBabel Plugin MacrosWebpackCustomizing html.jsESLintProxying API RequestsPerformance OptimizationCaching Gatsby SitesAdding a Progressive Web App Manifest FileAdding Offline Support with Service WorkersProfiling with React ProfilerPerformance Tracing for Gatsby BuildsConditional Page BuildsConclusion14. Gatsby InternalsAPIs and Plugins in GatsbyLoading Configured PluginsThe apiRunInstance ObjectExecuting Plugins and Injecting ArgumentsThe Gatsby Build LifecycleNode CreationEstablishing parent and child relationshipsHandling stale nodesSchema GenerationSchema InferenceInferring fields on the created Node objectInferring child and parent fieldsSchema Root Fields and Utility TypesPlural root fieldsSingular root fieldsPagination typesFilter typesSort typesPage CreationQuery Extraction and ExecutionQuery extractionQuery executionWriting Out PagesThe pages.json fileThe sync-requires.js fileThe async-requires.js fileThe data.json fileBundling GatsbyGenerating the JavaScript BundleThe production-app.js fileEnabling Code Splitting and PrefetchingSplitting into and naming chunksMapping chunks to chunk assetsReferencing chunks in current page HTMLReferencing chunks to be prefetchedConclusionA. The Gatsby CLIGatsby Cheat SheetCommon CLI CommandsQuick Start CommandsHelpful File DefinitionsTop Documentation PagesGatsby CLI CommandsnewdevelopbuildserveinfocleanpluginreplB. Gatsby Component APIs UsageActive Styles for Working with Props in navigategatsby-plugin-imageStaticImageGatsbyImageImage Optionslayoutwidth and heightaspectRatioplaceholderformatstransformOptionsHelper FunctionsgetImagegetSrcgetSrcSetwithArtDirectionC. Gatsby Configuration APIsConfig APIssiteMetadatapluginsflagspathPrefixpolyfillmappingproxydevelopMiddlewareNode APIscreatePagesParametersReturn valueExamplecreatePagesStatefullycreateResolversParametersExamplecreateSchemaCustomizationParametersExampleonCreateBabelConfigParametersExampleonCreateDevServerParametersExampleonCreateNodeExampleonCreatePageonCreateWebpackConfigParametersExampleonPostBootstraponPostBuildonPreBootstraponPreBuildonPreExtractQueriesonPreInitpluginOptionsSchemaParametersExamplepreprocessSourceresolvableExtensionssetFieldsOnGraphQLNodeTypeParametersExamplesourceNodesExampleunstable_onPluginInitExampleunstable_shouldOnCreateNodeExampleIndex