feat: revalidate my pages breadcrumbs on demand

lib/graphql/Fragments/MyPages/Breadcrumbs.graphql

@@ -1,7 +1,7 @@
 fragment MyPagesBreadcrumbs on AccountPage {
   breadcrumbs {
     title
-    parents: parentsConnection {
+    parentsConnection {
       edges {
         node {
           ... on AccountPage {
@@ -9,6 +9,7 @@ fragment MyPagesBreadcrumbs on AccountPage {
               title
             }
             system {
+              locale
               uid
             }
             url

lib/graphql/Fragments/Refs/Breadcrumbs.graphql

@@ -0,0 +1,20 @@
+#import "./System.graphql"
+
+fragment MyPagesBreadcrumbsRefs on AccountPage {
+  breadcrumbs {
+    parentsConnection {
+      edges {
+        node {
+          ... on AccountPage {
+            system {
+              ...System
+            }
+          }
+        }
+      }
+    }
+  }
+  system {
+    ...System
+  }
+}

lib/graphql/Query/BreadcrumbsMyPages.graphql

@@ -1,4 +1,5 @@
 #import "../Fragments/MyPages/Breadcrumbs.graphql"
+#import "../Fragments/Refs/Breadcrumbs.graphql"
 
 query GetMyPagesBreadcrumbs($locale: String!, $url: String!) {
   all_account_page(locale: $locale, where: { url: $url }) {
@@ -10,3 +11,11 @@ query GetMyPagesBreadcrumbs($locale: String!, $url: String!) {
     }
   }
 }
+
+query GetMyPagesBreadcrumbsRefs($locale: String!, $url: String!) {
+  all_account_page(locale: $locale, where: { url: $url }) {
+    items {
+      ...MyPagesBreadcrumbsRefs
+    }
+  }
+}

lib/graphql/batchRequest.ts

@@ -12,7 +12,9 @@ export async function batchRequest<T>(
   try {
     const response = await Promise.allSettled(
       queries.map((query) =>
-        request<T>(query.document, query.variables, { tags: query.tags })
+        request<T>(query.document, query.variables, {
+          next: { tags: query.tags },
+        })
       )
     )
 

lib/graphql/request.ts

@@ -10,6 +10,7 @@ import type { DocumentNode } from "graphql"
 import type { Data } from "@/types/request"
 
 const client = new GraphQLClient(env.CMS_URL, {
+  cache: "force-cache",
   fetch: cache(async function (
     url: URL | RequestInfo,
     params: RequestInit | undefined
@@ -21,11 +22,14 @@ const client = new GraphQLClient(env.CMS_URL, {
 export async function request<T>(
   query: string | DocumentNode,
   variables?: {},
-  next?: NextFetchRequestConfig
+  options?: Pick<RequestInit, "cache" | "next">
 ): Promise<Data<T>> {
   try {
-    if (next) {
-      client.requestConfig.next = next
+    if (options?.cache) {
+      client.requestConfig.cache = options.cache
+    }
+    if (options?.next) {
+      client.requestConfig.next = options.next
     }
 
     if (env.PRINT_QUERY) {

lib/trpc/Provider.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { httpBatchLink } from "@trpc/client"
+import { httpBatchLink, loggerLink } from "@trpc/client"
 import { useState } from "react"
 
 import { env } from "@/env/client"
@@ -14,7 +14,14 @@ function initializeTrpcClient() {
   //  that trpc and next are running on the same port.
   return trpc.createClient({
     links: [
+      loggerLink({
+        enabled: (opts) =>
+          (env.NEXT_PUBLIC_NODE_ENV === "development" &&
+            typeof window !== "undefined") ||
+          (opts.direction === "down" && opts.result instanceof Error),
+      }),
       httpBatchLink({
+        fetch,
         transformer,
         /**
          * This is locally in Next.js