Gatsby Graphql

Love me some Gatsby. Using Gatsby with Wordpress can be a little tricky in the beginning. The following are some helpful snippets for debugging. The following snippets are using the old gatsby-wrodpress-source plugin. Someday I will be able to update to the latest version of the plugin but until then here is some code.

Check data data coming from Wordpress

This snippet is crucial when data doesn't match what is coming from wordpress. This graphql snippet will print the slug from Wordpress so you know what page is being identified, also show you the url created by Wordpress's rest API. The url will show you the post_id which is needed if you need to go into the database and clean it up. Alternatively you can use wordpress_id to the id related to your post.

graphql
allWordpressPage {
    edges {
      node {
        slug
        _links {
          self {
            href
          }
        }
      }
    }
  }

Find large assets in your Wordpress media library

If you are not watching all the assets being uploaded to the media library like a hawk, people might upload some big stuff. Maybe you want to investigate why developers with slower internet have intermittent problems getting local development environment to run. This snippet will show you all media assets greater then 1MB.

graphql
{
    allWordpressWpMedia(filter: {localFile: {size: {gt: 1000000}}}) {
      edges {
        node {
          localFile {
            size
          }
          source_url
        }
      }
    }
  }

Investigate template pages

First off the way I organize templates in wordpress is as follows. I make a parent page and all children pages point to the parent. Then in gatsby-node you just need to parse the parent_element slug. One benefit doing things this way is if you have components which all children share a single components data you can make them on the parent and then each child will have access to the data. Not all templates will have an index displaying a list template children, so this snippet will show you all the urls associated with a given parent url path. Ex. https://example.com/parent-url/child-url

graphql
{
    allSitePage(filter: {path: {regex: "/^/parent-url/"}}) {
      edges {
        node {
          path
        }
      }
    }
  }

Leave a comment