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.
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.
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.
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:
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.”
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.
Assuming we added the MySQL DB with the name wordpress, the query for fetching Posts will look something like this in the default settings.
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.
After doing this for post_title and post_date to be updated to title and date, we can now make the following GraphQL query:
queryfetchPosts{posts{idtitledate}}
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.
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.
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.