site.projectsShipped
0+
Gatsby sites shipped
type Site { projectsShipped: Int! @min(value: 24) }
Stack Innovations
Start a project
Stack Innovations
Start a project
Gatsby is a React framework with a graphql data layer that
treats every source — WordPress, Contentful, Markdown, a REST
API, Shopify, your homegrown CSV — as the same content mesh.
Query once, ship anywhere. We tune the schema, the plugin pipeline,
the image pipeline, and the build. Predictable, fast, mature.
Each stat is a Gatsby GraphQL type definition. Hover any to see the SDL it'd generate via schemaCustomization. Counters scrub with scroll.
type Site { projectsShipped: Int! @min(value: 24) }
type Site { contentNodes: Int! @min(value: 3200) }
type Site { pluginsAuthored: Int @min(value: 64) }
type Site { defaultBuilds: Int @max(value: 0) }
Click the schema explorer on the left — the active capability opens in the GraphiQL-feeling editor. Each pane is a working pattern we've shipped.
Gatsby's killer feature: every source becomes nodes in the same GraphQL schema. allMarkdownRemark, allWpPost, allContentfulArticle, allShopifyProduct — all queryable from any page or component, with refinements, filters, sorting, pagination.
createSchemaCustomization · explicit typespageQuery for routes, useStaticQuery for componentsOne project pulls from WordPress (legacy posts), Contentful (marketing pages), Markdown (docs), a REST API (events), and Shopify (commerce). Gatsby normalizes them all into the same schema. Editorial keeps tools they know; engineers query one API.
gatsby-source-wordpress · WPGraphQLgatsby-source-contentful · previewsgatsby-source-filesystem · Markdown / MDXgatsby-source-shopify · products / collectionsGatsby invented the modern image-pipeline pattern (Gatsby Image, then gatsby-plugin-image). One source image becomes responsive AVIF / WebP / JPEG sizes with blur-up placeholders, art direction, and lazy loading — all generated at build time, all queryable.
gatsbyImageData · responsive srcsetStatic HTML at build time + automatic prefetching of linked pages + tuned image pipeline + critical CSS inlining = honest Lighthouse 100s. We layer in JSON-LD, Open Graph, sitemaps, hreflang, canonical, and CI perf budgets that fail the build on regressions.
gatsby-plugin-react-helmet · per-page metagatsby-plugin-sitemap · auto-generatedGatsby's ecosystem is its moat. We curate a tight stack of source / transformer / plugin combinations per project, vet them for maintenance and bundle size, and write our own when no existing plugin fits. Forks pinned, patches in patches/.
onCreateNode hookspatch-packageStatic (SSG) for the marketing spine, Deferred Static Generation (DSG) for long-tail content that doesn't need to ship at every build, SSR for personalized routes — same project, same schema, different runtime per route. Build times stay sane on 100k+ page sites.
defer: true in createPage()getServerData() for SSR routesThis is what makes Gatsby itself: every source flows into one typed GraphQL schema. Toggle fields in the schema explorer on the left — the query in the middle rebuilds, and the response on the right updates with realistic data from a fake content mesh. anime.js spring on toggle, Mo.js burst on run.
Same framework, two gatsby-config.js files. The diff tells the story.
module.exports = { siteMetadata: { title: 'Site', siteUrl: 'https://example.com', }, plugins: [], } // no source plugins // no transformers // no image pipeline // no schema customization // shipped to prod — everywhere.
module.exports = { siteMetadata: { title: 'Stack Innovations', siteUrl: 'https://stackinnovations.com', organization: { /* JSON-LD */ }, }, graphqlTypegen: true, trailingSlash: 'never', plugins: [ 'gatsby-plugin-image', 'gatsby-plugin-sharp', 'gatsby-transformer-sharp', { resolve: 'gatsby-source-wordpress', options: { url: process.env.WP_URL } }, { resolve: 'gatsby-source-contentful', options: { spaceId, accessToken } }, 'gatsby-source-filesystem', 'gatsby-transformer-remark', 'gatsby-plugin-mdx', 'gatsby-plugin-sitemap', 'gatsby-plugin-react-helmet', 'gatsby-plugin-manifest', ], }
This is Gatsby's superpower. Multiple content sources flow into the unified GraphQL data layer; pages query whatever they need. Click a source on the left to toggle it — the schema rebuilds in real time, fields appear and disappear, particles flow along the active links.
Inventory every existing content source. Design the unified GraphQL schema that maps them. Lighthouse baseline.
Gatsby 5 scaffolded, source / transformer / image plugins wired, environments, GraphQL typegen, CI perf budgets.
Page queries, fragments, MDX content, image pipeline, custom transformers, schema customization for cross-source joins.
Sitemaps, JSON-LD, hreflang, canonical, redirect map. DSG for long-tail routes, SSR for personalized routes.
Content migration via source plugins, redirects mapped. gatsby build, deploy, DNS cutover.
Gatsby version bumps, plugin upgrades, perf monitoring, monthly review. Features, not tickets.