Skip to Content

Your first WunderGraph Application - Adding Caching

In the previous chapter, we've extended the JspUsers Query. We've run into the N+1 issue which is very common for REST APIs.

We know that the JSON Placeholder API responds with static content. This means, we could just add some basic caching and the performance issues should be gone.

Let's modify our wundergraph.config.ts config to address this problem. Edit the ConfigureOperations by adding the JspUsers Operation to the custom configurations using the enableCaching function. The config should look like this:

const operations: ConfigureOperations = {
defaultConfig: {
authentication: {
required: false
}
},
queries: config => ({
...config,
caching: {
enable: false,
staleWhileRevalidate: 60,
maxAge: 60,
public: true
},
liveQuery: {
enable: true,
pollingIntervalSeconds: 5,
}
}),
mutations: config => ({
...config
}),
subscriptions: config => ({
...config,
}),
custom: {
ProtectedWeather: enableAuthentication,
PastLaunches: enableCaching,
JspUsers: enableCaching,
}
}

Caching, in general is set to enable: false for all Queries. However, we've already configured maxAge: 60 so that a response is cached for 60 seconds. So, all we have to do is setting enable: true for the JspUsers Operation. We're doing so by adding it to the custom object.

Save the file, wait for the WunderNode to re-start and call curl again to pre-fill the cache.

curl http://localhost:9991/api/main/operations/JspUsers

After calling curl for the first time, try it again. You should get the response almost instantly.

Summary#

Well done, our application is now production ready!

In the final chapter, we'll deploy it to the Edge.