In 2015, Huey Petersen wrote an article about instrumenting a GraphQL schema to track resolver times and provide insight into how the GraphQL server is performing. Since then Apollo Optics has taken the instrumentation to a new level, providing a SaaS solution for storing data about your GraphQL requests. The Apollo team has also been working on a proposal to standardize the instrumentation, and they’re calling it Apollo Tracing.
The proposed spec is still young, but the goal is to come up with a standard for how GraphQL schemas should record performance metrics for requests and their resolvers so that tools like Apollo and perhaps even GraphiQL or others can make use of these standard extensions.
While the spec is still young, having these metrics is pretty important for us, so we’ve introduced WPGraphQL Insights. It’s a plugin that adds tracing to your WPGraphQL server. The plugin is pretty early in development, so I wouldn’t suggest running it in production quite yet, but feel free to test it out on your local/dev environments and provide any feedback on the Github repo so we can make it better!
The near-future plans for the WPGraphQL Insights plugin are:
add the ability for the server to enable/disable tracing
add a settings page
define via a constant, ex: define( ‘GRAPHQL_TRACING’, true );
GraphQL is most popularly known as a way to fetch data from remote sources via HTTP requests, but with WPGraphQL, you can access your local WordPress data in your plugin or theme via declarative GraphQL queries. An example use case would be a simple shortcode for a list of posts.
Example shortcode that outputs a list of posts and is populated with the site’s content with a GraphQL query
Let’s look at how we can build a simple shortcode that populates a list of posts from the site and renders an unordered list with the post’s title and date. First, lets register our shortcode:
Now we have a [graphql_basic_post_list] shortcode but it’s not useful. Our end goal is to output a list of posts with the title and date, and we’ll use the ID as the “id” of each list item. Since we know what data we’ll need, we can start with writing our GraphQL query to get the data. Inside the shortcode function, let’s add our query. GraphQL queries are static strings, so we can simply add:
$query = '
query basicPostList($first:Int){
posts(first:$first){
edges{
node{
id
title
date
}
}
}
}
';
$data = do_graphql_request( $query );
This will give us an array of posts, which contains an array of “edges” and each edge will contain a “node”. The node is our post object, and this is where the fields we requested are. In our case, we asked for id, title, and date. The raw data returned from the query should look like this (of course with your site’s data):
This makes sure that we have an array of “edges” and if we do, it creates an unordered list and loops through the edges, creating a list item for each node, with the node’s id as the <li> id property, and the post’s title and date as the text within the list item. The complete shortcode, with an example argument for how many posts to query is:
