Examples

Caching Example

The Caching example shows you how to enable HTTP-Layer caching in WunderGraph.

Configuration

This time, we're making changes to the wundergraph.operations.ts file. As the file name indicates, it's used to configure Operations.

First, we have to set defaults for Queries, Mutations and Subscriptions. For the Queries, we're configuring default values, like maxAge and staleWhileRevalidate, but keep caching disabled by default.

Using the custom property, we can override the config for individual Operations using an arrow function. In this case, we enable caching for the Dragons Query.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// wundergraph.operations.ts
export default configureWunderGraphOperations<OperationsConfiguration>({
operations: {
defaultConfig: {
authentication: {
required: false,
},
},
mutations: (config) => {
return config
},
subscriptions: (config) => {
return config
},
queries: (config) => ({
...config,
liveQuery: {
enable: false,
pollingIntervalSeconds: 0,
},
caching: {
enable: false,
staleWhileRevalidate: 60,
maxAge: 60,
public: true,
},
}),
custom: {
Dragons: (config) => ({
...config,
caching: {
...config.caching,
enable: true,
},
}),
},
},
})

Result

As a result, your WunderGraph server will now cache the Dragons Query as per the configuration. Additionally, we'll add Cache-Control headers to the response, which means that Browsers, Proxies and CDNs will be able to cache the response.

On top of that, we'll also generate an ETag for the response. This makes it very efficient to re-validate content. You can read more about this in the ETag documentation.

Previous
Hooks

Was this article helpful to you?
Provide feedback

Edit this page