Atte Liimatainen

<p>Converts frontend to JSON response when request is done with certain conditions.</p>
<h3>Inspiration</h3>
<p>After creating a bunch of headless WordPress + Web app stacks, I wanted to find a standard and a all-round solution for fetching per page information for web applications inside WordPress. Built-in rest api works fine in basic cases, but it doesn’t support querying by path. Usually this meant that for each project developers would create a custom rest endpoint which would return expected content using content type and slug parameters.</p>
<p>WordPress has few built-in functions to retrieve content by path, <a href="https://developer.wordpress.org/reference/functions/url_to_postid/" rel="nofollow ugc">url_to_postid</a> and <a href="https://developer.wordpress.org/reference/functions/get_page_by_path/" rel="nofollow ugc">get_page_by_path</a>, but they don’t seem to work with multilanguage plugins, taxonomy or archive pages, which means that WP doesn’t have a reliable way to fetch content this way through rest api.</p>
<p>This plugin converts frontend to JSON which seems after above solution the best way to do things, with added layer of security through application passwords (WordPress v5.6 feature) and a filter, which let’s developers alter outgoing data.</p>
<h3>How to start using the plugin</h3>
<ul>
<li>Install and activate this plugin in your environment</li>
<li>Create application password for a user with administrator role</li>
</ul>
<p>After above steps have been made, make a request to a page with added <a href="https://en.wikipedia.org/wiki/Basic_access_authentication#Client_side" rel="nofollow ugc">Authorization header</a>. See data fetching examples at the end of this documentation for more help</p>
<h3>Modifying the output</h3>
<p>Plugin outputs current page’s Post object or null. This can be modified using <code>headless-converter-modify-data</code>-filter. You can either modify passed in post object or do your own logic like in the example below.</p>
<pre><code>/**
 * Modifies Headless Converter plugin's output.
 * 
 * @param WPPost|null $post - Current template's post object 
 */
function modify_headless_converter_output($post) {
  if(is_404()) {
    return "this block renders 404 page content";
  } else if(is_page()) {
    return "this block renders page post types content";
  } else if (is_singular('post')) {
    return "this block renders single post content";
  } else if(is_home()) {
    return "this block renders post archive";
  } else {
    return $post;
  }
}

add_filter('headless-converter-modify-data', 'modify_headless_converter_output');
</code></pre>
<h3>Data fetching examples</h3>
<h4>Fetch</h4>
<pre><code>const username = "admin"
const password = "1111 1111 1111 1111 1111"
const url = "http://localhost:3000/?page_id=2"
const opts = {
  headers: {
     'Authorization': 'Basic ' + btoa(username + ":" + password) 
  }, 
}
fetch(url, opts).then(r => r.json()).then(console.log)
</code></pre>
<h4>Axios</h4>
<pre><code>const axios = require("axios")

const username = "admin"
const password = "1111 1111 1111 1111 1111"
const url = "http://localhost:3000/?page_id=2"
const opts = {
  auth: {
    username,
    password
  }
}

axios(url, opts).then(r => r.data).then(console.log)
</code></pre>


Headless Converter

Converts frontend to JSON response when request is done with certain conditions.

Jason Bahl

Tyler

David Levine

Ryan Kanner

Geoff Taylor

Edwin Cromley

<p>WPGraphQL is a free, open-source WordPress plugin that provides an extendable GraphQL schema and API for any WordPress site.</p>
<p><strong>Get Started</strong></p>
<ol>
<li>Install WPGraphQL: <code>wp plugin install wp-graphql --activate</code></li>
<li>Try it out: <a href="https://repl.wpgraphql.com" rel="nofollow ugc">Live Demo</a></li>
<li>Read the <a href="https://wpgraphql.com/docs/quick-start" rel="nofollow ugc">Quick Start Guide</a>.</li>
<li>Join the <a href="https://discord.gg/AGVBqqyaUY" rel="nofollow ugc">Community on Discord</a> and <a href="https://github.com/wp-graphql/wp-graphql" rel="nofollow ugc">Star the Repo</a>!</li>
</ol>
<p><strong>Key Features</strong></p>
<ul>
<li><strong>Flexible API</strong>: Query posts, pages, custom post types, taxonomies, users, and more.</li>
<li><strong>Extendable Schema</strong>: Easily add functionality with WPGraphQL’s API, enabling custom integrations.</li>
<li><strong>Compatible with Modern Frameworks</strong>: Works seamlessly with <a href="https://vercel.com/guides/wordpress-with-vercel" rel="nofollow ugc">Next.js</a>, <a href="https://docs.astro.build/en/guides/cms/wordpress/" rel="nofollow ugc">Astro</a>, <a href="https://www.okupter.com/blog/headless-wordpress-graphql-sveltekit" rel="nofollow ugc">SvelteKit</a>, and more.</li>
<li><strong>Optimized Performance</strong>: Fetch exactly the data you need in a single query. Boost performance with <a href="https://github.com/wp-graphql/wp-graphql-smart-cache" rel="nofollow ugc">WPGraphQL Smart Cache</a>.</li>
</ul>
<p>WPGraphQL is becoming a <a href="https://wordpress.org/news/2024/10/wpgraphql/" rel="ugc">Canonical Plugin</a> on WordPress.org, ensuring long-term support and a growing community of users and contributors.</p>
<h4>Upgrading</h4>
<p>It is recommended that anytime you want to update WPGraphQL that you get familiar with what’s changed in the release.</p>
<p>WPGraphQL publishes <a href="https://github.com/wp-graphql/wp-graphql/releases" rel="nofollow ugc">release notes on Github</a>.</p>
<p>WPGraphQL has been following Semver practices for a few years. We will continue to follow Semver and let version numbers communicate meaning. The summary of Semver versioning is as follows:</p>
<ul>
<li><em>MAJOR</em> version when you make incompatible API changes,</li>
<li><em>MINOR</em> version when you add functionality in a backwards compatible manner, and</li>
<li><em>PATCH</em> version when you make backwards compatible bug fixes.</li>
</ul>
<p>You can read more about the details of Semver at semver.org</p>
<h3>Privacy Policy</h3>
<p>WPGraphQL uses <a href="https://appsero.com" rel="nofollow ugc">Appsero</a> SDK to collect some telemetry data upon user’s confirmation. This helps us to troubleshoot problems faster and make product improvements.</p>
<p>Appsero SDK <strong>does not gather any data by default.</strong> The SDK starts gathering basic telemetry data <strong>only when a user allows it via the admin notice</strong>.</p>
<p>Learn more about how <a href="https://appsero.com/privacy-policy/" rel="nofollow ugc">Appsero collects and uses this data</a>.</p>
<p>Learn more about how <a href="https://appsero.com/privacy-policy/" rel="nofollow ugc">Appsero collects and uses this data</a>.</p>


WPGraphQL


I operate a large blog that uses WordPress as a headless CMS with a Next.JS frontend, which is largely enabled by this plugin. Let me just say first that creating an entire alternative third-party data API is an ambitious undertaking and I appreciate all the work the authors have put into it.



But as a developer I have to throw out a word of caution that this plugin often has major bugs that can have critical impact on your production website. For example after a recent minor update  we discovered a bug where any URL with a special character in it started returning a 404, causing several of our pages to suddenly become unavailable to users and delisted from Google, and this went on for many months before we realized it.



There have been many similar instances. My general approach is to lean more on WordPress's REST API over time which is more reliable since it's maintained by the WordPress team, and only use WPGraphQL when it's necessary.



Also recommend turning off auto-updates and test your website extremely thoroughly after any upgrade.


Unreliable

GraphQL vs. REST API
  10    :     0

Thank you for this plugin. Building my headless application with WPGraphQL is fun. 
The repl interface to test queries is A+.

Speedy

WPGraphQL adds a flexible and powerful GraphQL API to WordPress, enabling efficient querying and interaction with your site's data.

Headless Converter vs WPGraphQL