Caching with WPGraphQL

[jasonbahl]

Caching with WPGraphQL

Caching is a broad subject and there is many levels on which you can implement caching.

This is not intended to be a definitive guide on caching, just a conversation starter and some thoughts on the subject. Have thoughts or ideas on the subject? Add to the discussion! 🙏

Server-Side Caching

For server-side caching, there are many options.

A lot of managed WP hosts (such as WP Engine) take care of at least persistent object caching for you without needing any extra plugins.

Persistent Object caching means that objects such as Posts, Users, etc are placed in a cache that persists across many requests, instead of being fetched from the database on each request.

Many requests from different users for Post A will get a cached copy of Post A instead of talking to the SQL database.

If you're not on a managed host that provides object caching, there are many plugins that offer this. Checkout the below WordPress references for it.

WordPress Object Cache

Reference: https://codex.wordpress.org/Class_Reference/WP_Object_Cache

WordPress Persistent Cache

Reference: https://codex.wordpress.org/Class_Reference/WP_Object_Cache#Persistent_Cache_Plugins

Query Caching

Query caching is another beast that's less straight-forward and can get more complicated more quickly, and there's currently no "one size fits all" plugin that solves this.

Even if you have objects in a cache, you still have to run queries to determine what objects to return, what order they should be returned in, etc.

You can store queries in WordPress transients, but you have to figure out how to properly invalidate the queries. This can get pretty complicated, because many variables can affect queries.

A lot of times, I see queries being cached for a random amount of time. For example, 3 minutes. Meaning, anytime a user asks for said query for 3 minutes, they'll get the same results, then at 3 minutes and 1 second, the SQL will re-execute and get new results and cache them for the next 3 minutes.

There's not (yet 👀 ) any official WPGraphQL plugin or feature for caching WPGraphQL Queries, but there has been some initial work by community members to achieve similar functionality:

• WPGraphQL Cache by Valu Digital
• WPGraphQL Persisted Queries by QZ.com

GraphQL Caching Services

Below are SaaS solutions aimed that provide GraphQL Caching as a service:

• FastQL: https://fastql.io/
• Apollo Platform: https://www.apollographql.com/platform/

Client-Side Caching

When making a request to a WPGraphQL Server, one of the most common ways to cache data is in the client that asked for the data.

Below are some common libraries used for interacting with and caching GraphQL Servers:

• Apollo Client
• Relay
• Urql
• React Query

[rodrigo-arias]

Thanks for this roundup of ideas, probably the reference from FastQL can be updated to GraphCDN Stellate

[cmonkey03]

Thanks for this, just to clarify, VIP says that POST requests are not cached of course, so the WP Object cache and client-side caching seem to be necessary.

[SmartyP]

I would highly suggest looking into Stellate.co for GraphQL cacheing - it has been an amazing tool for us recently.

We had issues with a large WordPress site (hundreds of ACF fields, WPML, thousands of pages, etc.) where we'd have 1500+ pages building, and each GraphQL query taking ~5 seconds, causing 2 hour builds. We put a Stellate cache in the middle and it made our requests only take 100ms (for already cached pages), so our rebuilds (that included not content changes) could take 10 minutes instead of 120 minutes. It was a big big win for us. That said, keep in mind that Stellate is a distributed CDN, so different end users could hit different Stellate caches and get cache misses instead of hits until multiple Stellate node locations have their cache built up. That usually isn't a problem for build systems (since assumedly they build out of the same region most times), but could be a problem for distributed developers.

[rodrigo-arias]

Another Stellate user here. It has been helpful not only to set up custom cache rules but also to get stats, alerts, and understand what was going on. We are still struggling with some traffic spikes despite using Stellate + On Demand ISR + Apollo InMemoryCache.

@SmartyP curious about the 2-hour builds, as WPGraphQL is limited to 100 pages per request (100 posts per post type in my experience) unless you modify that rule.

Beyond that, I still don't see a clear path, ISR, Stellate, Stellate WordPress plugin, Apollo, etc., Next.js 13 just released cache per component (it will be better for WordPress to receive multiple small requests per component or a single bigger request?) and I know @jasonbahl is working on another solution...so many pieces to the puzzle.

[SmartyP]

Yes, we do modify graphql_connection_max_query_amount from 100 to 3000. Part of this is because we have 2500+ redirects that need to be queried from the Redirects plugin, and part of it is that the site has 1900+ pages of content. At 5 seconds per page, and 2-3 queries per page, we end up with 2+ hour builds when on weaker servers with only a few PHP worker threads. On our production servers we can do the same build in ~25 minutes as it has more PHP worker threads.

We've been toying around with the selective page invalidation in NextJS. Using that in tandem with a WordPress web hooks plugin, we can potentially hit a NextJS endpoint that invalidates the NextJS cache for a specific route as well as invalidate the Stellate cache for the same page data with their purging API. It looks doable, but things are working reasonably well now, so we aren't investing the time quite yet.

Will definitely check out the WPGraphQL Smart Cache plugin as well @jasonbahl - thanks for sharing that update!

[jasonbahl]

🚀🚀🚀🚀🚀

I just pushed up WPGraphQL Smart Cache v0.3.0

📖 I wrote a LOT of documentation, starting in the README: https://github.com/wp-graphql/wp-graphql-smart-cache#readme

Additionally, it's available for install with Composer as well: https://packagist.org/packages/wp-graphql/wp-graphql-smart-cache

I'd love for ya'll to try the plugin and provide feedback on the plugin and/or docs.

🙏🏻