💪 The PoP API now features HTTP caching!

— 2 minute read

The GraphQL API for PoP now features HTTP caching! From now on, whenever requesting the API, the response will be cached (in the server, intermediate caches such as CDNs, and the user's browser) as indicated through the Cache-Control header.

(Really, GraphQL, how comes you still don't support it? Why do you keep re-inventing the wheel?)

How does it work?

It sends a Cache-Control header with a max-age value, or no-store if the response must not be cached.

The beauty of the implementation for PoP is that every field can have a different max-age configuration, and the response will automatically calculate the lowest max-age from all required fields. And it involves very few lines of code: Just decide how much time to cache each field and add it to the configuration, and that's it, chill.

Alright, show me the magic!

Sure! Here I add several examples. Please click on the links below, and inspect the response headers using Chrome or Firefox's developer tools' Network tab.

Operators have a max-age of 1 year:

/?query=
  echo(Hello world!)

[View query results]

By default, fields have a max-age of 1 hour:

/?query=
  echo(Hello world!)|
  posts.
    title

[View query results]

Composed fields are also taken into account when computing the lowest max-age:

/?query=
  echo(posts())

[View query results]

"time" field is not to be cached (max-age: 0):

/?query=
  time

[View query results]

Ways to not cache a response:

a. Add field "time" to the query:

/?query=
  time|
  echo(Hello world!)|
  posts.
    title

[View query results]

b. Override the default maxAge configuration for a field, by adding argument maxAge: 0 to directive <cacheControl>:

/?query=
  echo(Hello world!)|
  posts.
    title<cacheControl(maxAge:0)>

[View query results]

Time to celebrate!!! 🥳

Celebrate!