- adding a root field
- adding a custom field to the “post” schema
- registering a custom post type with WPGraphQL support
- registering a custom taxonomy with WPGraphQL support
- adding a custom field to a custom post type where the field can be queried and mutated
- adding a root field that resolves data from an external system (return a random “dad joke” from icanhazdadjoke.com (source code)
- Finally, we looked at registering a new Type to the GraphQL schema.
- We registered a “Syndicated Books” type which resolves with data from external WPGraphQL enabled servers.
Author: Jason Bahl
-
WPGraphQL at WordCamp for Publishers
I hosted a workshop on “Content Syndication with the WP REST API and WPGraphQL” at the first ever WordCamp for Publishers on Friday, August 18, 2017 at the Denver Post building in beautiful Denver, CO. Unfortunately, there was no video of the workshop, but the slides for the workshop are here: http://slides.com/jasonbahl-1/content-syndication In the workshop, we covered how Digital First Media uses the WP REST API to syndicate millions of pieces of content per year across various WordPress and non-WordPress systems. We cover what we’ve learned about using REST, both positives and negatives. We looked at many of the frustrations we have with working with REST and how GraphQL eases some of those frustrations. We looked at what GraphQL is, how it applies to WordPress as an application data graph, and how you can use GraphQL today in WordPress with the WPGraphQL plugin. We walked through various features of GraphQL using the GraphiQL IDE. We explored the documentation that is generated for the GraphQL Schema using the GraphiQL documentation browser, then we wrote some queries. We queried for posts, posts with nested author objects and nested posts of that author. We looked at node queries, fragments, aliasing, variables and the cursor based pagination, even for data that’s typically not paginated, such as plugins and themes. We then looked at examples of how to extend the WPGraphQL schema to add custom entry points into the queryable WordPress Application Data Graph. The examples we looked at for extending the Schema included: -
Optimizing WPGraphQL for WordPress VIP
EDIT: This specific issue has been addressed by WordPress core in version WordPress 4.8, but it still shows how to filter to override resolvers in WPGraphQL.
If you host your site with WordPress.com VIP, you can (and should) take advantage of the cached functions they provide to improve the performance of some WordPress core uncached functions.
If you’re using WPGraphQL in a WordPress.com VIP environment and want to have WPGraphQL take advantage of some of these functions, you can do so pretty easily.
In WPGraphQL, the TermObjectType, which is used for terms (categories, tags, custom taxonomies) has a
link
field, which uses the uncached function:get_term_link
in the resolver.WordPress.com VIP provides an alternative cached function:
wpcom_vip_get_term_link
.Our goal here is to:
- Find all termObjectTypes
- Filter the resolver for the `link` field on those types, replacing the default resolver with our optimized resolver.
Let’s do this:
First, let’s only hook our functionality in after the Allowed Taxonomies have been registered and setup for WPGraphQL to make use of.
add_action( 'graphql_generate_schema', 'your_prefix_filter_term_object_fields', 10, 1 );
Now, let’s get the Taxonomies that are registered as allowed to show in GraphQL, and we’ll loop through them and filter their fields.
function your_prefix_filter_term_object_fields() { // Get the allowed taxonomies (taxonomies with "show_in_graphql" => true) $allowed_taxonomies = \WPGraphQL::get_allowed_taxonomies(); // Loop through the allowed taxonomies, so that we can filter the fields for each termObjectType for each taxonomy if ( ! empty( $allowed_taxonomies ) && is_array( $allowed_taxonomies ) ) { foreach( $allowed_taxonomies as $taxonomy ) { // Get the taxonomy object as we'll need the "graphql_single_name" property to use in the filter $tax_object = get_taxonomy( $taxonomy ); if ( ! empty( $tax_object->graphql_single_name ) ) { add_filter( "graphql_{$tax_object->graphql_single_name}_fields", 'your_prefix_replace_term_link_resolver', 10, 1 ); } } }
Now, we’re at a point where each TermObjectType (category, tag, etc) will have its fields filtered. So now we need to alter the
$fields
to replace the resolver for thelink
field to make use of the cached function we have available in the VIP environment.// This is the callback for our filter on the termObjectType fields. // We get the $fields passed to us and we want to replace the "resolve" function for the "link" field function your_prefix_replace_term_link_resolver( $fields ) { if ( ! empty( $fields['link'] ) ) { $fields['link']['resolver'] = function( \WP_Term $term, $args, $context, $info ) { // Get the term link using the VIP cached function // You could even wrap this with a "function_exists( 'wpcom_vip_get_term_link' )" and fall back to the standard "get_term_link" function // to make sure things work when running in an environment where the VIP functions are not present $term_link = wpcom_vip_get_term_link( $term->term_id ); // If the response was valid, return it, otherwise return a null response. // You might also want to throw an exception if the response was a WP_Error return ( ! empty( $term_link ) && ! is_wp_error( $term_link ) ) ? $term_link : null; } } // Return the $fields, altered or not return $fields; }
There we have it. We now have our
link
field on TermObjects resolving using a WordPress.com VIP cached function!Now, we can execute a query like so and know that the
link
field will be more performant.{ tags{ edges{ node{ id name link } } } }
-
Query Dad Jokes with WPGraphQL
If you’ve ever wanted to use GraphQL to query dad jokes, look no further.
If you’re running a WordPress site, you can install the WPGraphQL plugin along with the WPGraphQL Dad Jokes plugin, and you can query for a random Dad Joke using GraphQL!
The plugin uses icanhazdadjoke.com to retrieve a random dad joke.
This also serves as a great example on how to extend WPGraphQL to customize the Schema for your needs.
The beauty of GraphQL is the data that resolves can come from anywhere. Even though it’s a WordPress plugin, the data that’s queried and resolved, doesn’t have to live in WordPress!
Enjoy!
-
WordCamp Orange County Recap
I had the privilege of leading a Workshop this weekend at WordCamp Orange County on building Single Page Apps with React, Apollo, WordPress and WPGraphQL.
-
Denver WordPress Developer Meetup Workshop Follow Up
In preparation for the Workshop I’ll be doing at WordCamp Orange County next weekend, I hosted the Workshop for the Denver WordPress Developer Meetup to get some practice.
I learned a lot about how I need to have my files organized for the workshop and learned what steps I can skip to get through the “important” steps within the allotted time.
If you attended and have feedback, please share. I’m far from a seasoned professional when it comes to public speaking and hosting workshops, so any feedback is welcome.
Anyway, below are some links from the Workshop:
- The recording is here: https://youtu.be/5xASl0JZBAw
- Here’s the links to the slides: http://slides.com/jasonbahl-1/super-powered-single-page-apps#/
- Here’s the Github Repo to the single Page App we built (the commit history has detailed comments for each change that was made): https://github.com/wp-graphql/wordflix-single-page-app/
- And the github repo for the WPGraphQL plugin is here (go ahead and Star the repo on Github wink, wink): https://github.com/wp-graphql/wp-graphql
I plan on updating the Tutorial series to have a video walkthrough for each step to compliment the written tutorial, so keep an eye out for that in the next few weeks.
There’s also a wp-graphql slack organization if you’re interested in discussing the plugin more: https://slackin-wpgraphql.herokuapp.com/ (if that link doesn’t work message me and I’ll invite you to the Slack org).