Get GraphQL APIs on WordPress and MySQL using Hasura

Hasura just announced support for Instant GraphQL APIs on top of MySQL, MariaDB and Oracle. Read the announcement post.

With Hasura’s support for MySQL, we can now point Hasura to existing or new MySQL databases that are configured to work with WordPress installations.

But wait a minute, WordPress?

Yes, WordPress is still a dominant player in the world of online publishing. While the estimates of WP powering 43% of all websites certainly include a number of abandoned blogs and ill-fated high-school newspapers, it does power a surprising amount of platforms for household names. Al Jazeera, Bloomberg, and CNN just get us through the ABCs of their logo wall with top-shelf brands spanning travel, social media, finance, news, and more.

WordPress + MySQL GraphQL APIs using Hasura
WordPress + MySQL GraphQL APIs using Hasura

Needless to say, enabling GraphQL for data models built on WP lets development teams leverage familiar editorial workflow tools while accessing the latest in software development trends.

What does this mean for you? In case you have a WordPress setup, usually configured on MySQL, you can now:

  • Get Instant GraphQL and REST APIs for querying your blog posts and any properties in WordPress.
  • Run WordPress as a Headless CMS.
  • Replace plugin-style installations like WPGraphQL with Hasura as Hasura just connects to DB and doesn’t modify WordPress instances.
  • Declaratively configure granular access control rules for fetching blog posts, pages, tags, categories, and plugin data with Hasura’s Authorization layer.
  • Join this WordPress data with other databases like Postgres or other MySQL sources to get a federated API for your client.
  • Customize the API tailored to developer needs.

Instant GraphQL APIs for querying WordPress

Hasura, when connected to the MySQL database, can give an instant GraphQL API for CRUD operations. WordPress is typically connected to MySQL or its variants for performance, which opens up the ability to add an API on top of the connected DB.

WordPress does not come with GraphQL support by default and the REST APIs can get verbose quickly with each added custom Post Type. There are plugins and tooling, which add a GraphQL API on top. What Hasura offers on top of providing a GraphQL API is the ability to configure role-based permissions giving the APIs a declarative Authorization layer.

Hasura GraphQL APIs on top of WordPress/MySQL setup
Hasura GraphQL APIs on top of WordPress/MySQL setup

Headless CMS with WordPress and Hasura APIs

Once you separate out the API layer from the WordPress CMS, content creators can focus on using WordPress purely from a CMS perspective and developers can use the Hasura APIs on top to build rich frontend websites.

A while ago, we posted about exploring Hasura as a Headless CMS.

Now the frontend teams can build the website with the framework of choice. Popular frameworks like React (Next.js, Gatsby), Vue.js (Gridsome), Svelte, and more (like static site builders) can now be used to generate fast-performing pages, while still getting the benefits of the CMS solution in WordPress.

Connect WordPress-configured MySQL DB with Hasura

Let’s create a new project on Hasura Cloud.

This will create a project and give a GraphQL endpoint on Hasura Cloud. Next up, we need to connect the database. Now, let’s delve into how to do this.

For the MySQL DB connected to WordPress, you need the following details:

  • MySQL Host
  • MySQL Port (usually 3306)
  • MySQL Database name
  • MySQL user
  • MySQL password

Once you have these details, you need to form the JDBC connection string which is of the format:

jdbc:mysql://host:post/database?user=user&password=pass

On the Hasura Console, head to the Data Tab, click on Connect Database, and choose the MySQL option in the Data Source Driver dropdown. Enter the JDBC connection URL that you just created. Give the database a name, let’s say “wordpress.”

Connect Existing Database

Querying WordPress Posts, Tags, and Author via GraphQL

The tables in MySQL DB are all in the format of wp_posts, wp_users, wp_terms (for categories), etc. If you are interested in the entire DB structure, refer to their documentation on Database Description. The schema data model looks like this, as cited in their docs.

WordPress DB Schema
WordPress DB Schema

Assuming we added the MySQL DB with the name wordpress, the query for fetching Posts will look something like this in the default settings.

query fetchPosts {
  wordpress_wp_posts {
    ID
    post_title
    post_date
  }
}

Since the table name for posts, is wp_posts and the DB prefix is wordpress, Hasura exposes GraphQL on this db/table combination. The column names of the table include ID, post_title, post_date and similar for other fields.

From a GraphQL API point of view, this query is not particularly elegant. So let’s customize the API to make it more natural and concise.

Let’s update the GraphQL schema for the table name and column names. Head to the wp_posts table and navigate to the Modify tab.

Under Custom Field Names, click on Edit field names and enter the value posts for the custom table name.

Similarly, for the column names, click on Edit and add the custom name.

Customize GraphQL Field Types WordPress using Hasura
Customize GraphQL Field Types WordPress using Hasura

After doing this for post_title and post_date to be updated to title and date, we can now make the following GraphQL query:

query fetchPosts {
  posts {
    id
    title
    date
  }
}

The above query is now more readable and elegant for the clients to consume.

RESTified endpoints for WordPress

Hasura supports RESTifying a GraphQL query to an equivalent REST API. This is useful in case the clients need a REST API over GraphQL, or if there is existing tooling in place for REST APIs across your services.

On the GraphiQL interface of Hasura Console, click on the REST button for the query that you just executed.

GraphQL query to fetch posts from MySQL using Hasura
GraphQL query to fetch posts from MySQL using Hasura

You can define the endpoint which starts with /api/rest/ and give it a name. You can select if this request is going to be a GET or POST etc. Here we can select GET since we are just fetching posts with 3 columns and no filters.

Create REST Endpoint for WordPress Posts using Hasura
Create REST Endpoint for WordPress Posts using Hasura

After creating this, Now you can start making requests to fetch posts on the REST endpoint, which will look like below:

http://<your-hasura-base-endpoint>/api/rest/posts

You will be able to customize the entire API workflow by using both GraphQL and REST and make your frontend client make authorized calls.

Notes on Support

Hasura currently supports MySQL versions v8.0 and above and if your WordPress installation is on an older version of MySQL, you need to upgrade it to the newer version to be able to use the APIs.


Blog
04 May, 2023
Email
Subscribe to stay up-to-date on all things Hasura. One newsletter, once a month.
Loading...
v3-pattern
Accelerate development and data access with radically reduced complexity.