GraphQL and Caching: A Harmonious Union
The Challenge of Caching GraphQL
GraphQL and caching may seem like oil and water, refusing to mix. The reason lies in GraphQL’s reliance on POST requests to execute queries against a single endpoint, making caching via URL impossible. However, this doesn’t mean we can’t find a way to make caching work with GraphQL.
The Current Solution: Client-Side Caching
One common solution is to cache returned objects independently on the client-side using libraries like Apollo Client. While this approach works, it has its drawbacks. It adds more JavaScript to run on the client-side, increases application complexity, and requires dealing with JavaScript even if the website is coded in a different language.
The Answer: HTTP Caching
So, what’s the solution? Simple: use HTTP caching. This means caching GraphQL responses using the URL as the identifier. To make this work, we need to access GraphQL via GET requests and pass queries and variables as URL parameters.
Accessing GraphQL via GET
Using HTTP caching requires two key changes:
- Accessing GraphQL’s single endpoint via GET: Instead of using POST, we’ll use GET to retrieve data from the server.
- Passing queries and variables as URL params: We’ll pass the query and variables as URL parameters to identify the cached response.
For example, if the single endpoint is /graphql, the GET operation can be executed against URL /graphql?query=...&variables=....
The Challenge of Encoding GraphQL Queries
One issue with passing queries as URL parameters is encoding. GraphQL queries can span multiple lines, making them difficult to encode. One solution is to replace newlines with spaces, but this can lead to unreadable queries. Another approach is to use a persisted query, storing the query on the server and retrieving it using an identifier.
Persisted Queries: The Solution
Persisted queries offer a elegant solution. By storing the query on the server and retrieving it using an identifier, we can bypass the encoding issue and make HTTP caching a breeze.
Calculating the Max-Age Value
To implement HTTP caching, we need to calculate the max-age value for each query. This involves getting the max-age value for all fields requested in the query and finding the lowest one. We can use directives to specify the max-age value for each field.
Implementing the @cacheControl Directive
By creating a @cacheControl directive with an argument maxAge of type Int, we can customize the max-age value for each field. We can then use this directive to configure our schema and generate the Cache-Control header for each response.
The Future of GraphQL and Caching
GraphQL and caching may have seemed like an unlikely pair, but with persisted queries and HTTP caching, we can make them work together seamlessly. By storing queries on the server and retrieving them using identifiers, we can overcome the limitations of GraphQL’s POST-based architecture and unlock the benefits of HTTP caching.