ISR with WPGraphQL Data

[kblizeck]

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',
  };
}

[colbyfayock]

hey! did you happen to try console.log'ing some of the data to see if you see the excepted changes?

i haven't tried this before with wpgraphql actually, i'l try to find time to take a look, but wondering if that can at least help start figuring it out. absolutely possible it's cached or something and not returning the new data? could also try manually making a query to the endpoint outside of the wordpress explorer to see if it's returning cached there as well

[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!

[zheskiel]

Hi @kblizeck would you mind to share how to solve this issue?

I cannot figure out how to use network-first as you mentioned.

any helps would be appreciated, thank you

[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',
});

[zheskiel]

wow, thank you for your reply. Will give it a try :)