Next.js Incremental Static Site Regeneration and Apollo GraphQL Caching
Tags: sitecoreexperienceedge, apollographql, nextjs, isr
Published: 2021-03-12 02:21:54

---
title: Next.js Incremental Static Site Regeneration and Apollo GraphQL Caching
published: true
date: 2021-03-12 00:00:00 UTC
tags: SitecoreExperienceEdge, ApolloGraphQL, NextJS, ISR
canonical_url: https://robearlam.com/blog/nextjs-incremental-static-site-regeneration-and-apollo-graph-ql-caching
---

I’ve recently been working on a project built using [Next.js](https://nextjs.org/) & [Apollo GraphQL](https://www.apollographql.com/) to pull data out of [Sitecore Experience Edge for Content Hub](https://www.sitecore.com/blog/content/were-thrilled-to-announce-groundbreaking-sitecore-experience-edge). I’ve really enjoyed working with these technologies but ran into something that stumped me for a while the other day.

I was testing the Incremental Static Regeneration (ISR) functionality in Next.Js, this allows for a partial regeneration of the static pages when some of the content changes. This is really helpful when pulling data from an external system like Sitecore Experience Edge for Content Hub. In this scenario if one piece of content changes you don’t want to republish all of your static pages as that could be really heavy, you just want to refresh the ones that have changed. This is where ISR comes in as it allows you to do just that, you can read more about how to configure it [here.](https://blog.logrocket.com/incremental-static-regeneration-with-next-js/)

The issue I ran into was that my content wasn’t refreshing on my page when I had changed it in Content Hub and the revalidate period had expired. If I stopped and started the project on my development machine, I would see the change, but the static page would never be regenerated through ISR.

![Homer Thinking](https://robearlam.com/img/blog-images/2021/homerthinking.jpg)

After a lot of head scratching I figured out that this was due to the `InMemoryCache` configured by default when working with Apollo GraphQL. You can read more about how that is configured [here](https://www.apollographql.com/docs/react/caching/cache-configuration/). By default Apollo will cache any GQL queries, so if it receives the same query again it will just return the same result as previously. Now this might be a good idea in a lot of cases, when it comes to ISR this means that our static pages will never be regenerated!

![Picard facepalm](https://robearlam.com/img/blog-images/2021/picard-meme-facepalm.jpg)

So how do we fix this? Well it turns out that when you create your `ApolloClient` you can specify a set of `DefaultOptions` and these include the caching policies for different GQL requests. It was a simple matter of turning caching off for queries by using the following code…..

```
export const client = new ApolloClient({
    link: from([
        authMiddleware,
        httpLink
    ]),
    cache: new InMemoryCache(),
    defaultOptions: {
        query: {
            fetchPolicy: 'no-cache',
        },
    }
});

```

Here you can see that the `fetchPolicy` for all `query` requests is now set to `no-cache`. After enabling this my ISR started working just as it should! Victory!

![Rocky Victory](https://robearlam.com/img/blog-images/2021/Rocky.jpg)