Caching data is undoubtedly one of the best options to improve website performance, reduce infrastructure costs, and deliver a better user experience.
The only problem is that, unlike REST requests, GraphQL requests are not cacheable by default.
As a result, most developers are forced to build their own infrastructure to cache data, but this is a costly endeavor as building it requires many hours of highly specialized engineering knowledge. In addition, it still isn’t a perfect out-of-the-box solution as it won’t offer detailed observability metrics, automatic purging, and other essentials that developers require to maintain cached data.
In this post, we’re diving into what GraphQL caching is, the benefits, and some potential challenges to get in front of.
What is GraphQL Caching?
Client side GraphQL caching stores a copy of GraphQL queries in the browser after they are initially fetched from the server. Once the data is cached, the client no longer has to reach out to the API to fetch the data as it can instead serve the data stored in the browser.
As a result, caching data eliminates the number of API requests that hit the server, which ultimately reduces server load and improves website performance.
From a business impact perspective, this reduces infrastructure costs and recovers lost revenue due to slow website performance.
What is edge caching and why is it useful?
Edge caching is a form of caching that often results in the fastest website performance as it leverages a network of servers distributed across various geographic locations and sends only the data located at the “edge” of the network closest to the user who made the query.
In addition, by caching at the edge (either instead or in addition to the browser caching) you can cache data for all clients that may fetch the same data. This is a massive improvement over browser caching, since this further reduces API calls and offloads traffic to the edge, giving you all the benefits already mentioned earlier.
As a result, edge caching further improves website performance, reduces latency, and allows you to scale more efficiently.
The Benefits of GraphQL Caching
Here are a few of the top benefits of GraphQL caching that make it a top priority for many businesses, and especially those with unpredictable traffic.
Cost Reduction
GraphQL caching significantly reduces server and database costs, as well as ingress (i.e. incoming data that is sent to your servers) and egress costs (i.e. the outgoing data that is sent from your servers back to the users).
By utilizing caching, repeated requests for the same data are served from the cache rather than re-fetching the data from the central database each time. This significantly reduces the amount of data that needs to be sent in and out of your network, thereby reducing associated costs.
These cost savings are also significant. When Australia’s leading automotive publication, Drive, implemented GraphQL caching, they managed to reduce cloud costs by 40%. Ecommerce company PUMA also reduced infrastructure costs by 30% after implementing GraphQL caching.
Improved Performance
Serving cached data is much faster than fetching it from a server, which means your website will load faster for end users. If users have to wait for the website to load while the data is fetched from the server, they’ll probably leave your website and go to a competitor instead, which can result in lost revenue.
Caching also improves performance by increasing predictability. For instance, retrieving data from a cache might consistently take 20 milliseconds, whereas fetching the same data from a database might vary significantly depending on various factors, including the user's distance from the server. Predictable latency is beneficial because it allows developers to identify patterns and prioritize issues that impact VIP customers.
Fail-safe
If a server goes down due to an unexpected issue, users can still access information that is already cached, even if the servers are offline.
For example, if the server goes down on Black Friday, users will still be able to view products that were already cached.
This level of redundancy means data will be available more reliably, which is crucial for maintaining a great user experience. It’s also beneficial from a branding perspective as users won’t trust your brand as much if the website is always slow or crashing.
Ideal Use Cases For GraphQL Caching
GraphQL caching is ideal for serving relatively static or semi-dynamic content to a large audience. It’s particularly useful for websites that receive massive traffic spikes. Here are just a few of the best use cases for GraphQL caching.
Ecommerce Websites
GraphQL caching is great for ecommerce websites because many users browse the same set of product data, like product details, images, and prices. Caching this data can significantly speed up the page loading time, enhancing user experience and your SEO efforts.
Additionally, caching is essential for high traffic spike periods, such as Black Friday, when servers may be overwhelmed by a sudden influx of users.
News Websites
News articles are ideal candidates for caching because the articles are static data that will be read by many different users.
By caching articles, news websites can deliver content to their readers more quickly and efficiently without persistent queries to a database for the same information. This is particularly beneficial for any viral articles since edge caching offloads it to servers that are not yours, meaning any additional strain isn’t your problem.
Blogging Platforms
Similar to the example above, large content and blogging platforms, like Substack, can also be great candidates for GraphQL caching. These platforms often have parts of their data that are largely static, like blog posts, docs and tutorials, which can be cached to speed up access for readers.
While certain elements of the page, such as whether a user has liked a post, may be dynamic and change frequently, the core content of the articles remains relatively stable and is accessed repeatedly by different users.
Top Challenges With GraphQL Caching (And Solutions)
While GraphQL caching is highly beneficial for improving website performance and reducing costs. However, unlike REST requests, GraphQL aren’t cacheable by default. As a result, most companies attempt to build their own caching solution, though there are several issues with this approach.
Cost to Build Your Own Caching Solution
Building your own caching solution requires many hours of highly specialized engineering knowledge, and many companies either don’t have access to these engineers or simply don’t want to have their team dedicate engineering time to caching rather than delivering core business value.
Custom caching solutions also aren’t easy to maintain as they require a lot of resources to implement additional features, required to deliver optimal website performance, like observability, automated cache purging, and more.
To solve these problems, we built Stellate, the first GraphQL CDN that offers automated GraphQL edge caching, rate limiting functionalities, and provides out-of-the-box metrics to supercharge your GraphQL API.
As a result, you receive all of the benefits of caching, like better performance and reduced infrastructure costs, without the expense of building and maintaining the infrastructure yourself.
Automating Cache Purging
As data on your website is updated, you must purge the outdated information stored in the cache to ensure the user always view current information.
If you’re using a REST API, you can purge the cache by URL.
Unfortunately, this isn’t possible with GraphQL.
So the simple solution to the problem for GraphQL users is to simply purge all data. Unfortunately, purging all of the data at once causes the operations to drop to a 0% cache hit rate, which bombards the servers with uncached requests.
The influx of uncached requests hitting the servers is not only expensive from a bandwidth perspective, but it can also cause the servers to slow or go down altogether. As a result, users will find that the website loads very slowly or not at all due to the sudden load spike as a result of suddenly having to handle all of the uncached requests. Either way, they’re more likely to leave your website and turn to a competitor for the same information.
To solve this problem, Stellate offers a flexible cache purging API that allows you to purge your cache in less than 150 milliseconds globally.
It offers both automatic or manual purging options.
With automatic purging, Stellate detects data changes in real-time and automatically purges the outdated data stored in the cache. For example, if an item in an ecommerce site is updated, Stellate could purge all content where the item is shown, such as product lists and detail pages.
Alternatively, we also allow purging via API so that customer processes that change data that don't go through Stellate to trigger automatic purge can hook into the purging as well.
As a result, you can ensure that your servers are never overwhelmed, which results in better performance and reduced infrastructure costs.
Maximizing Cache Hits
Not all data can be cached, and developers may waste time trying to further optimize cache hits that are already well-optimized. Alternatively, they may overlook other major opportunities to increase cache hits.
Stellate solves this by offering detailed analytics on cache hit rates that allow developers to quickly identify the biggest opportunities to improve cache hits.
Proactively Identifying Errors
One of the hardest elements of maintaining a GraphQL caching solution is knowing when and where errors occur.
Stellate offers detailed error reporting, and you can filter by time frame, error type, and other variables.
This adds another safety layer to ensure your team is proactively notified of issues before they impact customers.
Solve Your GraphQL Caching Challenges Today
Leveraging the benefits of GraphQL caching doesn’t have to involve building your own solution in-house.
We built Stellate because we wanted a method to automatically cache GraphQL data and easily maintain it with automated cache purging, detailed observability metrics, and proactive alerting.
To learn more about how Stellate can solve your GraphQL caching challenges, schedule time with our GraphQL experts!