Kellen Mace Headless WP Notes


Updated Aug 27th, 2021

4-16-21 – Pagination for WPGraphQL & Headless WordPress

Load More Button or Infinite Scroll

Avoid Number-based pagination; poor UX

prev/next on single page

cursor-based pagination


Offset-based: counts records, skip ten then get the next ten.

WPgraphQL uses cursor-based: Betterf or larger data sets. pageInfo{} then Pass in a cursor hasNextpage and endCursor that represents last data record.


Load More Button

-some JS!
-Apollo Cient has some magic going on here to append from cache and resave in cache.

Infinite Scroll

-more js!
-using NextJS
-using package for infinite scroll

Prev/next on single page

-getStaticPaths to build dynamic routes using [slug].js
-Modified GraphQL schema to show PrevPost NextPost, (this is not avalibale out of the box)
-In the “hwp-rockers.php” file PaginationFields class and register_hooks method
-Issue with how to define Next-post logic, (is it based on created date, revised date, within category?). Easy enought o implement on your onw but this is why WPGQL hasn’t implemented out of the box yet?

3/11/21 – Post Type CRUD Operations for WPGraphQL // Headless WordPress

Register CPT

Store additional Post Metadata

hwp-rockers plugin : based on Wp plugin boilerplate in his GitHub repo

ON WPGQL docs page

interface hookable implents Hookabel, CustomPostType


self::KEY (class constant)


trait PostTypelbale

protected function

need use statement available to us

void keyword

create interface for CPT to enforce strict naming convention

method for register()


mutation updateProject, deleteProject, getProject, getProjects. WPGraphQL gives you CRUD operation sout of the box when you register and add to the schema


Add a mutation to the plugin

createproject.php file

class CreateProject implements Hookable




Set up functionailty by building validate method and is_create_project_mutation

validate_project_number method

private versus public functions

READ project and projects

“hwp-rockers/src/WPGraphQL/Type/ObjectType?project.php” file


We can update a field WP knows about at this point. Seems like there is a ton of overlap.

trait UpsertProject {}

update and inster equals upsert


2/4/21 – Exploring the WPGraphQL Data Graph || Headless WordPress

nodes, edges

Plugin named HWP Rockers (by Kellen Mace), single file

Why nodes then edges, seems more rebose.

GraphQL Voyager: Instrospection Query.

edge data, exists only if two nodes are connected to each other and this data lives between them. (Example is block time stamp used to show error if two users editing at the same time)

1/21/21 – WPGraphQL vs. REST API for Headless WordPress

Rest – Primary API for WP Core WP and Gutenberg. Not a strongly-typed schema. No detail about fields. Tooling is rougher with no tool like GraphiQL. Test for 100 posts take 10.42 seconds. With Rest AOI there is no way to only what you need, (Can do query args but still). Does not support nested relationships. No Batch Queries. Built-in browser caching is apoint for REST API. File uploads great in REST. Native to WP so point to Rest.

WPGraphQL – Found Rest API to be inefficient to use single data source to multiple websites. Exact spec on graphQL. If specified as a object you need to specify all fields so this makes it very dev friendly. GraphiQL can be helpful to test routes, and see shape of requests. Test for 100 posts take 5.3 seconds. With GraphQL you get only what you need. Support nested relationships. Can query for multiple root resources. Data loader pattern and (rest experiences what is called n +1 problem). Supports Batch Queries, (Which apollo client supports). Can’t use browser’s built-in caching so need Apollo client, (or react query) to do something like this. WPGraphQl cannot handle file-uploads easily as multi-part form data, (often resort to rest for this, or hack to encode and decode).

Score Ended 8 – 3 for GraphQL

1/12/2021 – Debugging WPGraphQL requests like a CHAMP // Headless WordPress

Link to the gist:

not exactly one-to-one but see written docs on

used app to debug

int he chrom dev tools network tab in the bottom right can click on headers tab and preview tab to see error mesages

in WPGQL settings there is a setting to turn on debugging.

To test queries as non-admin user in Buitl in GrpahiQL in dashbaord log in as tst ueser with same permissions or can use stand alone instance of graphiql that you can download, (open source and free).

Chrome extension Xdebug help by Wrep needed for Xdebug

12/29/2020 – 2 hour video

slow site? gtmetrix was not great (C) due to total page size at 7.4MB, (I think for video or animation?!). 2.8S load with Largest ContentFul Paint at 2.5s.

It is a PWA you can install on your phone and looks native although built with web technologies.

Uses RunSignup to sign up for app.

Events run through history, run through timeline each mile is a year. 12 months. Leaderboard.

Infinite scroll

Toast messages, sound effects

Add run with date (date-picker-calendar) and miles. No edit but delete and re-add.

Home, runs, timeline, leaderboard.

Timeline is grayed-out badge, a little gamification.

Leaderboard knows gender and age group. Can sort by all male, all female, my group.

CPT for Awards. Custom field for Miles required. is it a medal or a badge.

Plugins: Core plugin, WP graph QL, WPGQL for ACF, WPGQL JWT Auth, WPGQL Tax Query.

Closer look at headless base placeholder theme (on GitHub). It has the required style.css and index.php file, functions.php,, screenshot.png. There is like 24 total lines of code in both php files. Redirect in functions.php file.

Closer look at “Headless WordPress plugin” Here is some meat and potatoes. Alos on GH, WP Plugin Boilerplate. 70 minutes in to video. Revisit with time. Good stuff like exposing CPT to WPGraphQL. Custom email settings. So. Much. PHP.

CPT for Runs: Individual user runs, 21k+ runs! ACF fields for miles and date. Is each user of the app an author? Dude was born on 4/22/1985?!

Users: Custom user fields for total miles, DOB, City, State, Age Group (set automatically), Gender.

Front-end and back-end repos. Headless WP Theme. Plugin Boilerplate.

WPGraphQL for ACF is only for you to wuery that data, not update it. Need a function like in “CreateRun.php” file to mutate.


simple search posts via graphQL Posts Finder App

store search query results in state

only imported ApolloClient and inMemoryCache from @apollo/client. Has the client in a “services/apollo.js” file

used a non-wp-plugin wpgraphiql ide to know whats available in your schema, build queries easily. free and open-sourced.

used debounce from Lodash for perf issue, see with XHR tab to see 5 request for each user keystroke typing “hello.” memoizes te debounce function levearging useMemo hook.

At the very end talks about typing in a query for a second time apollo’s inMemoryCache has made it lightning fast by storing in memory. A good reason for apollo client.

11/19/20 – Page load speed is not the only thing that matters

The five benefits covered in the video:

  1. Component-based architecture
  2. Route-based code-spittting
  3. Instantaneous route transitions
  4. Future-proof backend API
  5. Career benefits from learning technologies like React & Vue, building GraphQL and REST APIs, etc.