{"id":316865,"date":"2020-07-13T07:32:36","date_gmt":"2020-07-13T14:32:36","guid":{"rendered":"https:\/\/css-tricks.com\/?p=316865"},"modified":"2020-07-13T07:32:37","modified_gmt":"2020-07-13T14:32:37","slug":"introducing-headless-wordpress-with-gatsby-cloud-live-preview-incremental-builds-and-more","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/introducing-headless-wordpress-with-gatsby-cloud-live-preview-incremental-builds-and-more\/","title":{"rendered":"Introducing Headless WordPress with Gatsby Cloud (Live Preview, Incremental Builds, and more!)"},"content":{"rendered":"\n<p>The Gatsby team shipped an update to its <a href=\"https:\/\/github.com\/gatsbyjs\/gatsby-source-wordpress-experimental\" rel=\"noopener\">source plugin for WordPress<\/a>, graduating it to a beta release. The new version brings a new set of features to <a href=\"https:\/\/www.gatsbyjs.org\/docs\/glossary\/headless-wordpress\/\" rel=\"noopener\">Gatsby&#8217;s headless WordPress<\/a> configuration, which brings together <a href=\"https:\/\/github.com\/wp-graphql\/wp-graphql\" rel=\"noopener\">WPGraphQL<\/a> and <a href=\"https:\/\/github.com\/gatsbyjs\/wp-gatsby\" rel=\"noopener\">WPGatsby<\/a> to power a Gatsby front-end that pulls in data from WordPress.<\/p>\n\n\n\n<p>If you haven&#8217;t encountered these plugins before, that&#8217;s probably because they&#8217;re only available on GitHub rather than the WordPress Plugin Directory.<\/p>\n\n\n\n<p>And if you&#8217;re wondering what the big deal is, then you&#8217;re in for a treat because this may very well be the most straightforward path to using React with WordPress. WPGraphQL turns WordPress into a GraphQL API server, providing an endpoint to access WordPress data. WPGatsby optimizes WordPress data to conform to Gatsby schema. Now, with the latest version of <a href=\"https:\/\/github.com\/gatsbyjs\/gatsby-source-wordpress-experimental\" rel=\"noopener\">gatsby-source-wordpress@v4<\/a>, not only is the GraphQL schema merged with Gatsby schema, but Gatsby Cloud is tossed into the mix.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>That last bit is the magic. Since the plugin is able to cache data to Gatsby&#8217;s node cache, it introduces some pretty impressive features that make writing content and deploying changes so dang nice via Gatsby Cloud. I&#8217;ll just lift the feature list from the announcement:<\/p>\n\n\n\n<ul><li>Preview content as you write it with Gatsby Preview<\/li><li>Update or publish new content almost instantly with Incremental Builds, available only on Gatsby Cloud<\/li><li>Links and images within the HTML of content can be used with&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/docs\/gatsby-image\/\" rel=\"noopener\">gatsby-image<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/docs\/gatsby-link\/\" rel=\"noopener\">gatsby-link<\/a>. This fixes a common complaint about the original source plugin for WordPress.<\/li><li>Limit the number of nodes fetched during development, so you can rapidly make changes to your site while creating new pages and features<\/li><li>Only images that are referenced in published content are processed by Gatsby, so a large media library won\u2019t slow down your build times&nbsp;<\/li><li>Any WPGraphQL extension automatically makes its data available to your Gatsby project. This means your site can leverage popular WordPress&nbsp;<a href=\"https:\/\/github.com\/ashhitch\/wp-graphql-yoast-seo\" rel=\"noopener\">SEO<\/a>,&nbsp;<a href=\"https:\/\/docs.wpgraphql.com\/extensions\/wpgraphql-advanced-custom-fields\/\" rel=\"noopener\">content modeling<\/a>,&nbsp;<a href=\"https:\/\/github.com\/valu-digital\/wp-graphql-polylang\" rel=\"noopener\">translation<\/a>, and&nbsp;<a href=\"https:\/\/docs.wpgraphql.com\/extensions\/wpgraphql-woocommerce\/\" rel=\"noopener\">ecommerce<\/a>&nbsp;plugins through a single Gatsby source plugin.<\/li><\/ul>\n\n\n\n<p>Live previews are super nice. But hey, check out the introduction of incremental builds. That means no more complete site rebuilds when writing content. Instead the only things that get pushed are the updated files. And that means super fast builds with fewer bugs.<\/p>\n\n\n\n<p>Oh, and hey, if you&#8217;re interested in putting a React site together with WordPress as the CMS, Ganesh Dahal just started a <a href=\"https:\/\/css-tricks.com\/my-long-journey-to-a-decoupled-wordpress-gatsby-site\">two-part series<\/a> today here on CSS-Tricks that provides a step-by-step walkthrough.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Gatsby team shipped an update to its source plugin for WordPress, graduating it to a beta release. The new version brings a new set of features to Gatsby&#8217;s headless WordPress configuration, which brings together WPGraphQL and WPGatsby to power a Gatsby front-end that pulls in data from WordPress. If you haven&#8217;t encountered these plugins [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":316910,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[3032,264,970],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/gatsby-wordpress.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":338051,"url":"https:\/\/css-tricks.com\/using-new-gatsby-source-wordpress-plugin\/","url_meta":{"origin":316865,"position":0},"title":"Using New Gatsby Source WordPress Plugin","date":"April 23, 2021","format":false,"excerpt":"In my previous article, I discussed how I learned to create a decoupled WordPress powered Gatsby site using the Gatsby Source WPGraphQL plugin. The project was done following the ongoing developmental version of WPGraphQL and an excellent tutorial by Henrik Wirth. Although WPGraphQL was used in some production sites at\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/wordpress-graphql.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":346147,"url":"https:\/\/css-tricks.com\/native-search-vs-jetpack-instant-search-in-headless-wordpress-with-gatsby\/","url_meta":{"origin":316865,"position":1},"title":"Native Search vs. Jetpack Instant Search in Headless WordPress With Gatsby","date":"August 18, 2021","format":false,"excerpt":"Have you already tried using WordPress headlessly with Gatsby? If you haven\u2019t, you might check this article around the new Gatsby source plugin for WordPress; gatsby-source-wordpress is the official source plugin introduced in March 2021 as a part of the Gatsby 3 release. It significantly improves the integration with WordPress.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/screenshot_Gatsby_WP_Jetpack_1200x600px@1x_sans_loupe.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":316282,"url":"https:\/\/css-tricks.com\/my-long-journey-to-a-decoupled-wordpress-gatsby-site\/","url_meta":{"origin":316865,"position":2},"title":"My Long Journey to a Decoupled WordPress Gatsby Site","date":"July 13, 2020","format":false,"excerpt":"As a professional research biologist, my playground used to be science laboratories filled with microscopes, petri dishes, and biology tools. Curiosity leads many scientists on their journey to discoveries. Mine led me to web design. I used to try learning HTML on my lab desktop while centrifuging extraction samples or\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":316186,"url":"https:\/\/css-tricks.com\/creating-a-gatsby-site-with-wordpress-data\/","url_meta":{"origin":316865,"position":3},"title":"Creating a Gatsby Site with WordPress Data","date":"July 20, 2020","format":false,"excerpt":"In my previous article last week, I mentioned creating a partially ported WordPress-Gatsby site. This article is a continuation with a step-by-step walkthrough under the hood. Gatsby, a React-based framework for static sites, is attracting attention not only from JavaScript developers but also from the WordPress developers and users. Many\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/63LGG0lL.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":342248,"url":"https:\/\/css-tricks.com\/just-how-niche-is-headless-wordpress\/","url_meta":{"origin":316865,"position":4},"title":"Just How Niche is Headless WordPress?","date":"June 15, 2021","format":false,"excerpt":"I wonder where headless WordPress will land. And by \"headless\" I mean only using the WordPress admin and building out the user-facing site through the WordPress REST API rather than the traditional WordPress theme structure. Is it... big? The future of WordPress? Or relatively niche? Where's the demand? Certainly, there\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/wordpress-logo-sketch.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304441,"url":"https:\/\/css-tricks.com\/data-driven-jamstack-with-sourcebit\/","url_meta":{"origin":316865,"position":5},"title":"Data-driven Jamstack with Sourcebit","date":"February 28, 2020","format":false,"excerpt":"Think of building sites with Gatsby as an hourglass shape. Gatsby itself is right in the middle. The wide funnel at the top represents the fact that Gatsby can take in data from all sorts of sources. The data could be in markdown files, from a headless CMS or some\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/1582723765-create-step1-sm.png?fit=702%2C323&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/gatsby-wordpress.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/316865"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=316865"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/316865\/revisions"}],"predecessor-version":[{"id":316909,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/316865\/revisions\/316909"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/316910"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=316865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=316865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=316865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}