Category: Uncategorized
-
Performance Optimization
The topic of performance is a broad one, and this app cannot possibly do it justice. But fortunately, Gatsby includes many performance enhancements that ensure a high-performing Gatsby site with little to no additional work. For instance, Gatsby comes prepackaged with common modern paradigms for performant websites such as link prefetching, code splitting, and other techniques.…
-
Proxying API Requests
The final portion of this section deals with proxying API requests, which involves customizing the Gatsby configuration file. Many Gatsby developers employ an architectural approach that involves hosting the backend server implementation and frontend React application from the same host and port, which can lead to issues when sourcing data for presentation in Gatsby, as some…
-
ESLint
ESLint is a powerful open source utility for JavaScript aimed at detecting malformed syntax using a type of static analysis known as code linting. Due to JavaScript’s loosely typed and dynamic nature, the language is prone to syntax errors committed by developers. ESLint allows developers to run tests across their code without executing the logic. As with…
-
Customizing html.js
Gatsby uses a React component to render <head>, <footer>, and other elements that lie outside the core application destined for the browser. For the vast majority of Gatsby sites, the html.js file that comes packaged with Gatsby suits most requirements, but some situations call for additional customization. To customize your site’s default html.js, execute the following in the root of your…
-
Webpack
As a Gatsby developer, you should attempt a custom Webpack configuration only if the default Webpack configuration built into Gatsby does not support your requirements and there is no Gatsby plugin available in the ecosystem that meets your needs. For those cases, Gatsby provides a Node API known as onCreateWebpackConfig that can be implemented in gatsby-node.js to adjust the default Gatsby Webpack configuration. When…
-
Babel Plugin Macros
Gatsby also permits the use of Babel macros to apply compile-time code transformations that can be more flexible than Babel plugins. Rather than including them in the .babelrc configuration file, we insert Babel plugin macros into the working code of the files we write. Babel macros have two key advantages: There is no uncertainty about where particular nonstandard or noncompliant…
-
Babel
Gatsby leverages Babel to provide support for both older browsers and modern JavaScript development paradigms. By default, Gatsby’s Babel configuration guarantees support for the previous two versions of commonly used browsers, Internet Explorer 9+, and any other browser having more than 1% market share. Babel in Gatsby automatically transpiles all JavaScript to ensure that all written…
-
Custom Gatsby Configuration
Over the course of developing a Gatsby site, sometimes additional customization is needed to suit particular needs when it comes to how Gatsby performs a build and yields bundles for consumption. In this section, we examine custom approaches to Gatsby configuration outside of schema customization—we’ll look at using Babel, Webpack, Gatsby’s html.js file, and ESLint, as well as…
-
Creating Custom Interfaces and Unions
One final common use case for schema customization in Gatsby involves creating custom interfaces and unions across multiple types through GraphQL’s abstract types. For instance, we could issue two queries for allAuthorJson and allTranslatorJson and then merge these by writing Gatsby code, but GraphQL can give us these types out of the box as a merged list. Because both the AuthorJson and TranslatorJson types…
-
Implementing the createResolvers API
In the course of schema customization, sometimes type definitions are insufficient for requirements in Gatsby sites. For example, the GraphQL SDL and Gatsby Type Builders can handle the vast majority of use cases when it comes to adding type definitions, but more granularity is occasionally necessary in the form of custom resolvers, which allow us to…