On This Page: [hide]
The free, open-source framework Gatsby has developed a new beta version of the Gatsby source WordPress plugin, which has been entirely remade to develop the headless WordPress setups where Gatsby powers the frontend. The plugin, besides combined with the Gatsby Cloud, is designed to implement real-time previews and incremental builds.
Also Read JAMstack: How Does It Work and What Are the Benefits?
The primary purpose of the Gatsby source plugin is creating an integration for WordPress websites tо accomplish more complicated use occasions.
There are three different ways to use the Gatsby source WordPress plugin. With each, you can acquire various benefits and drawbacks.
Gatsby Source WordPress plugin Interactions
Using the first method, the plugin interacts with the WP REST API to provide all the data like terms, posts, media, etc. It is also caching the info in Gatsby’s node cache.
The second one authorizes developers to write GraphQL queries and provide cache and render that data in templates.
According to the Gatsby team, these two methods are the best for basic usage.
WP REST API Integration
As explained by WPGraphQL creator Jason Bahl, when adding more advanced functionality, like Advanced Custom Fields Flex Fields, the WP REST API will fall apart, and it will be challenging to use in a decoupled way.
The WP REST API has a Schema that allows themes and plugins to enhance the WP REST API and declare the type of data any given endpoint will expose. That is helpful for decoupled applications to know ahead of time what kind of data to expect.
There is a problem, and it is the plugins and themes which can extend the WP REST API without using the Schema or simply defining field types in the Schema as “object” or “array” Types. That means that it is not going to be easy for decoupled applications like Gatsby, to know what to expect from those fields. Gatsby relies on consistent data, and the WP REST API isn’t consistent. The data shape returned from endpoints (especially when plugins extend the REST API) is unpredictable, and that is a problem for the decoupled applications.
Also Read Google Web Stories WordPress Plugin (Review)
WPGraphQL Alternative
WPGraphQL was created as an alternative to the WP REST API, addressing many of these pain points with its enforced Schema. This alternative is good for the decoupled tools like Gatsby because they can introspect the Schema to determine what data is available before requesting any.
Even occasions such as Advanced Custom Fields Flex Fields, where the returned data could be one of many possible Flex Field Layouts, Gatsby knows the possible data is before asking for the data. The enforced Schema of WPGraphQL permits decoupled tools to ship without any problem and eliminates whole classes of bugs.
The Gatsby Source GraphQL + WPGraphQL method has some developments over the use of the WP REST API. It has a limit that it doesn’t cache the info to the Gatsby node cache. This limit avoids WordPress sites from utilizing Gatsby’s cloud-based commercial offerings for previews and incremental builds.
Here Bahl again explains how the new Gatsby Source WordPress plugin (v4) + WPGraphQL is the “best of both worlds:
It uses WPGraphQL on the WordPress server to expose WordPress data in a Typed GraphQL Schema. Gatsby Source WordPress v4 uses GraphQL Introspection to read the Schema from the WordPress site and builds a nearly identical Schema in Gatsby. It then fetches data using WPGraphQL and caches the data in Gatsby. Users then use GraphQL to interact with the Gatsby cache and get data to render in Components in their Gatsby site.
This new integration allows the content creators to click on “preview” and see what they have changed. And all this will happens live in the Gatsby-powered site. It will push out the changes to the affected pages. Changes will be live very fast only in seconds, just to how the users expect WordPress to work without the headless integration. The new plugin, integrated with Gatsby Cloud, gives a better marriage of the content creation experience with Gatsby’s React + GraphQL developer experience while bringing fast static pages on the frontend.