ISR with WPGraphQL Data

I’m attempting to add incremental static regeneration (ISR) to the [slugParent]/[[slugChild]].js file in order to regenerate pages where the CMS content has changed.

ISR is triggered according to my build logs, but the page content never updates on the frontend after I’ve updated it within the backend of WordPress… maybe it’s not recognizing the WPGraphQL data as having changed? Any help at all would be appreciated!

[slugParent]/[[slugChild]].js

export async function getStaticProps({ params = {} } = {}) {
  const { slugParent, slugChild } = params;

  // We can use the URI to look up our page and subsequently its ID, so
  // we can first contruct our URI from the page params

  let pageUri = `/${slugParent}/`;

  // We only want to apply deeper paths to the URI if we actually have
  // existing children

  if (Array.isArray(slugChild) && slugChild.length > 0) {
    pageUri = `${pageUri}${slugChild.join('/')}/`;
  }

  const { page } = await getPageByUri(pageUri);

  // In order to show the proper breadcrumbs, we need to find the entire
  // tree of pages. Rather than querying every segment, the query should
  // be cached for all pages, so we can grab that and use it to create
  // our trail

  const { pages } = await getAllPages();

  const breadcrumbs = getBreadcrumbsByUri(pageUri, pages);

  return {
    props: {
      page,
      breadcrumbs,
    },
    revalidate: 10,
  };
}

export async function getStaticPaths() {
  const { pages } = await getAllPages();

  // Take all the pages and create path params. The slugParent will always be
  // the top level parent page, where the slugChild will be an array of the
  // remaining segments to make up the path or URI

  const paths = pages
    .filter(({ uri }) => typeof uri === 'string')
    .map(({ uri }) => {
      const segments = uri.split('/').filter((seg) => seg !== '');

      return {
        params: {
          slugParent: segments.shift() || '',
          slugChild: segments,
        },
      };
    });

  return {
    paths,
    fallback: 'blocking',
  };
}

[kblizeck]

Hey @idpelago! Check out Setting a Fetch Policy, and I misspoke above it’s actually network-only, not network-first.

For example:

import { ApolloClient, HttpLink, InMemoryCache, gql } from '@apollo/client';

const QUERY_ALL_POSTS = gql`
	query AllPosts($count: Int) {
		posts(first: $count) {
			edges {
				node {
					id
					content
					date
					excerpt
					postId
					title
					slug
				}
			}
		}
	}
`;

const apolloClient = new ApolloClient({
	link: new HttpLink(),
	cache: new InMemoryCache(),
});

const data = await apolloClient.query({
	query: QUERY_ALL_POSTS,
	fetchPolicy: 'network-only',
});

[kblizeck]

Hey @colbyfayock! Thank you for the reply - turns out it was a caching issue HA! I’m using ApolloClient and it was just returning the cached Apollo results instead of the new data. Had to tweak my caching keys, and changed a few to network-first and ISR appears to be working as expected. Closing as a non-issue!