Thanks to some well-placed WordPress hooks, we have technically had WPGraphQL support for a long while now, but never formally as part of the plugin itself. Jason Bahl, the creator and maintainer of WPGraphQL was also maintaining a Custom Post Type UI (CPTUI) extension that provided the UI fields to set and save WPGraphQL integration within the settings for post types and taxonomies registered with CPTUI.

Going into our March Five for the Future day, Greg informed me that Jason reached out about getting official integration for the two pieces, and after a touch of consideration, I agreed that it was time to merge them into one. Utilizing that day’s time, I set out to adapt and pull in Jason’s work into our primary plugin. If you are not using WPGraphQL at all with your site, or are perhaps not even sure what it is, you have nothing to worry about. We made sure to load the related changes only if the WPGraphQL plugin is available. If it is not, then you will only see the other 1.9.0 changes.

To help with transitions, we set up an admin notice for those with the now legacy CPTUI integration, letting the users know that they no longer need that original extension and can remove it without any loss of data. It should switch over seamlessly.

We are excited about the future of Headless WordPress and the types of creations developers around the world can produce with it. We are even more excited that users of Custom Post Type UI who are wanting to explore and try out Headless WordPress can now do so without having to leave us behind.

So what are you waiting for? Download or upgrade to Custom Post Type UI 1.9.0 and share with us what you are thinking about making in the comments below.

The post Custom Post Type UI Supports WPGraphQL appeared first on WebDevStudios.

But what about making a headless WordPress site with GraphQL? How do you add your custom post types and custom meta fields to the GraphQL API?

It’s worth noting that our plugin for creating custom post types, Custom Post Type UI, now does this automatically! But if you’re not using a plugin to create your custom post types, read on to see the code behind the scenes.

I ran into this issue working on a personal website and using the WP GraphQL plugin. This website would be for my music, so I need a custom post type called “Album.”

View the code on Gist.

There are three extra arguments being passed to the register_post_type function: show_in_graphql, graphql_single_name, and graphql_plural_name. The first enables the custom post type to be added to the GraphQL API, and the last two give the name for the object:

That takes care of our custom post type! But what about the custom meta field?

View the code on Gist.

This code is a little more complicated, so we’ll step through it:

1. We hook into the graphql_register_types action. This will make sure that our next code is called at the right time.
2. We call the register_graphql_field field with:
   1. The name of the object we are creating the field on (“Album”)
   2. The name of the field we are creating (externalLinks)
   3. Extra arguments for the function
3. The extra arguments include a callback function that returns the value of the field.

For our callback function, we’re cheating a little bit. The meta field, find_links, can have multiple values. The purist approach would be to create a new GraphQL object and allow the links to be individually queryable. The pragmatic approach is to instead make our GraphQL field a String and encode the full meta field into a JSON object.

The end result here is that we get the data out of WordPress and into our Next.js frontend where we can use it.

You can see the full Next.js source code for my website on GitHub.

With a few tricks, it’s not hard to get the full power of WordPress into your Headless WordPress site. Using a decoupled frontend like Next.js means that the final website can be as complicated or as simple as it needs to be. And when it comes time to update or make new content, it’s as easy as… well, as easy as WordPress.

Want to see what we can do for you? Get in touch!

The post Quick Tip: Add Custom Meta Fields to GraphQL appeared first on WebDevStudios.