test successive cache reads

Author: lubieowoce

test/development/app-dir/cache-components-dev-warmup/app/data-fetching.tsx

@@ -32,6 +32,39 @@ export async function CachedData({
   )
 }
 
+export async function SuccessiveCachedData({
+  label,
+  cacheKey,
+}: {
+  label: string
+  cacheKey: string
+}) {
+  // This components tests if we correctly handle the case where resolving a cache
+  // reveals another cache in the children. When we're filling caches, we should fill both.
+  const data1 = await getCachedData(`${cacheKey}-successive-1`)
+  return (
+    <dl>
+      <dt>Cached Data (successive reads)</dt>
+      <dd>{data1}</dd>
+      <dd>
+        <SuccessiveCachedDataChild label={label} cacheKey={cacheKey} />
+      </dd>
+    </dl>
+  )
+}
+
+async function SuccessiveCachedDataChild({
+  label,
+  cacheKey,
+}: {
+  label: string
+  cacheKey: string
+}) {
+  const data2 = await getCachedData(`${cacheKey}-successive-2`)
+  console.log(`after successive cache reads - ${label}`)
+  return <>{data2}</>
+}
+
 export async function CachedFetch({
   label,
   cacheKey,

test/development/app-dir/cache-components-dev-warmup/app/private-cache/data-fetching.tsx

@@ -15,6 +15,39 @@ export async function PrivateCachedData({
   )
 }
 
+export async function SuccessivePrivateCachedData({
+  label,
+  cacheKey,
+}: {
+  label: string
+  cacheKey: string
+}) {
+  // This components tests if we correctly handle the case where resolving a cache
+  // reveals another cache in the children. When we're filling caches, we should fill both.
+  const data1 = await getPrivateCachedData(`${cacheKey}-successive-1`)
+  return (
+    <dl>
+      <dt>Private Cached Data (successive reads)</dt>
+      <dd>{data1}</dd>
+      <dd>
+        <SuccessivePrivateCachedDataChild label={label} cacheKey={cacheKey} />
+      </dd>
+    </dl>
+  )
+}
+
+async function SuccessivePrivateCachedDataChild({
+  label,
+  cacheKey,
+}: {
+  label: string
+  cacheKey: string
+}) {
+  const data2 = await getPrivateCachedData(`${cacheKey}-successive-2`)
+  console.log(`after successive private cache reads - ${label}`)
+  return <>{data2}</>
+}
+
 async function getPrivateCachedData(_key: string) {
   'use cache: private'
   await new Promise((r) => setTimeout(r))

test/development/app-dir/cache-components-dev-warmup/app/private-cache/page.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from 'react'
 import { CachedData, UncachedFetch } from '../data-fetching'
-import { PrivateCachedData } from './data-fetching'
+import { PrivateCachedData, SuccessivePrivateCachedData } from './data-fetching'
 
 const CACHE_KEY = '/private-cache/__PAGE__'
 
@@ -15,6 +15,10 @@ export default async function Page() {
         <PrivateCachedData label="page" cacheKey={CACHE_KEY} />
       </Suspense>
 
+      <Suspense fallback="Loading two successive private caches...">
+        <SuccessivePrivateCachedData label="page" cacheKey={CACHE_KEY} />
+      </Suspense>
+
       <Suspense fallback="Loading uncached fetch...">
         <UncachedFetch label="page" cacheKey={CACHE_KEY} />
       </Suspense>

test/development/app-dir/cache-components-dev-warmup/app/simple/page.tsx

@@ -1,5 +1,10 @@
 import { Suspense } from 'react'
-import { CachedData, CachedFetch, UncachedFetch } from '../data-fetching'
+import {
+  CachedData,
+  CachedFetch,
+  SuccessiveCachedData,
+  UncachedFetch,
+} from '../data-fetching'
 
 const CACHE_KEY = __dirname + '/__PAGE__'
 
@@ -16,6 +21,7 @@ export default async function Page() {
       </p>
 
       <CachedData label="page" cacheKey={CACHE_KEY} />
+      <SuccessiveCachedData label="page" cacheKey={CACHE_KEY} />
 
       <CachedFetch label="page" cacheKey={CACHE_KEY} />
 

test/development/app-dir/cache-components-dev-warmup/cache-components.dev-warmup.test.ts

@@ -47,6 +47,7 @@ describe('cache-components-dev-warmup', () => {
         const logs = await browser.log()
         assertLog(logs, 'after cache read - layout', 'Prerender')
         assertLog(logs, 'after cache read - page', 'Prerender')
+        assertLog(logs, 'after successive cache reads - page', 'Prerender')
         assertLog(logs, 'after cached fetch - layout', 'Prerender')
         assertLog(logs, 'after cached fetch - page', 'Prerender')
 
@@ -83,6 +84,7 @@ describe('cache-components-dev-warmup', () => {
         // so they shouldn't resolve in the static stage.
         assertLog(logs, 'after private cache read - page', 'Server') // TODO: 'Runtime Prerender'
         assertLog(logs, 'after private cache read - layout', 'Server') // TODO: 'Runtime Prerender'
+        assertLog(logs, 'after successive private cache reads - page', 'Server') // TODO: 'Runtime Prerender'
 
         assertLog(logs, 'after uncached fetch - layout', 'Server')
         assertLog(logs, 'after uncached fetch - page', 'Server')