DEV Community

Rob Earlam
Rob Earlam

Posted on • Originally published at robearlam.com on

Next.js Incremental Static Site Regeneration and Apollo GraphQL Caching

#sitecoreexperienceedge #apollographql #nextjs #isr

I’ve recently been working on a project built using Next.js & Apollo GraphQL to pull data out of Sitecore Experience Edge for Content Hub. 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.

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

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. 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

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',
        },
    }
});
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
tkhiienlok profile image
Тхиен Лок Чан • • Edited

Do you mean that initially you set 'revalidate' period in fetchOptions of client.query context like here?

// app/page.tsx
import { getClient } from "@/lib/client";

import { gql } from "@apollo/client";

const query = gql`query Now {
    now(id: "1")
}`;

export default async function Page() {
  const client = getClient();
  const { data } = await client.query({ 
    query,
    context: {
      fetchOptions: {
        next: { revalidate: 5 },  // <- This line
      },
    },
  });

  return <main>{data.now}</main>;
}
Enter fullscreen mode Exit fullscreen mode

Or did you set revalidate prop in getStaticProps() like here:

export async function getStaticProps() {
  const { data } = await client.query({
    query: gql`
     ...
    `,
  });
  return {
    props: {
      nextLaunch: data.launchNext,
    },
    revalidate: 10, // In seconds <- Add this line
 };
}
Enter fullscreen mode Exit fullscreen mode

Second one should actually work..

Read next

aleksei_zhilyuk profile image

Next.JS CMS — Top choices in 2024

Aleksei Zhilyuk -

travislramos profile image

The Resurgence of Server-Side Rendering in the JavaScript Era

Travis Ramos -

hugaidas profile image

Rendering Strategies in Next.js

Victoria -

aqsagull99 profile image

Integrating AI-Powered Features in Next.js 15 Applications

Aqsa Gull -