add shouldRevalidate to avoid unnecessary root loader re-fetching (#1237

)

add shouldRevalidate to the skeleton

add shouldRevalidate to avoid root re-renders

add changeset

clear logs

.

.changeset/wicked-wolves-camp.md

@@ -0,0 +1,7 @@
+---
+'demo-store': patch
+'@shopify/cli-hydrogen': patch
+'@shopify/create-hydrogen': patch
+---
+
+Add shouldRevalidate export to limit root loaders revalidation on mutations only

templates/demo-store/app/root.tsx

@@ -15,6 +15,7 @@ import {
   useLoaderData,
   useMatches,
   useRouteError,
+  type ShouldRevalidateFunction,
 } from '@remix-run/react';
 import {ShopifySalesChannel, Seo} from '@shopify/hydrogen';
 import invariant from 'tiny-invariant';
@@ -30,6 +31,25 @@ import styles from './styles/app.css';
 import {DEFAULT_LOCALE, parseMenu} from './lib/utils';
 import {useAnalytics} from './hooks/useAnalytics';
 
+// This is important to avoid re-fetching root queries on sub-navigations
+export const shouldRevalidate: ShouldRevalidateFunction = ({
+  formMethod,
+  currentUrl,
+  nextUrl,
+}) => {
+  // revalidate when a mutation is performed e.g add to cart, login...
+  if (formMethod && formMethod !== 'GET') {
+    return true;
+  }
+
+  // revalidate when manually revalidating via useRevalidator
+  if (currentUrl.toString() === nextUrl.toString()) {
+    return true;
+  }
+
+  return false;
+};
+
 export const links: LinksFunction = () => {
   return [
     {rel: 'stylesheet', href: styles},

templates/hello-world/app/root.tsx

@@ -7,11 +7,31 @@ import {
   LiveReload,
   ScrollRestoration,
   useLoaderData,
+  type ShouldRevalidateFunction,
 } from '@remix-run/react';
 import type {Shop} from '@shopify/hydrogen/storefront-api-types';
 import appStyles from './styles/app.css';
 import favicon from '../public/favicon.svg';
 
+// This is important to avoid re-fetching root queries on sub-navigations
+export const shouldRevalidate: ShouldRevalidateFunction = ({
+  formMethod,
+  currentUrl,
+  nextUrl,
+}) => {
+  // revalidate when a mutation is performed e.g add to cart, login...
+  if (formMethod && formMethod !== 'GET') {
+    return true;
+  }
+
+  // revalidate when manually revalidating via useRevalidator
+  if (currentUrl.toString() === nextUrl.toString()) {
+    return true;
+  }
+
+  return false;
+};
+
 export const links: LinksFunction = () => {
   return [
     {rel: 'stylesheet', href: appStyles},

templates/skeleton/app/root.tsx

@@ -11,6 +11,7 @@ import {
   useLoaderData,
   ScrollRestoration,
   isRouteErrorResponse,
+  type ShouldRevalidateFunction,
 } from '@remix-run/react';
 import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
 import type {HydrogenSession} from '../server';
@@ -19,6 +20,25 @@ import resetStyles from './styles/reset.css';
 import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';
 
+// This is important to avoid re-fetching root queries on sub-navigations
+export const shouldRevalidate: ShouldRevalidateFunction = ({
+  formMethod,
+  currentUrl,
+  nextUrl,
+}) => {
+  // revalidate when a mutation is performed e.g add to cart, login...
+  if (formMethod && formMethod !== 'GET') {
+    return true;
+  }
+
+  // revalidate when manually revalidating via useRevalidator
+  if (currentUrl.toString() === nextUrl.toString()) {
+    return true;
+  }
+
+  return false;
+};
+
 export function links() {
   return [
     {rel: 'stylesheet', href: resetStyles},