test: add test case with multiple fetches for same resource and test asserting we only check blobs once per request for same key

Author: pieh

tests/fixtures/revalidate-fetch/app/same-fetch-multiple-times/[id]/page.js

@@ -0,0 +1,47 @@
+const API_BASE = process.env.API_BASE || 'https://api.tvmaze.com/shows/'
+
+async function doFetch(params) {
+  const res = await fetch(new URL(params.id, API_BASE).href, {
+    next: { revalidate: false },
+  })
+  return res.json()
+}
+
+async function getData(params) {
+  // trigger fetches in parallel to ensure we only do one cache lookup for ongoing fetches
+  const [data1, data2] = await Promise.all([doFetch(params), doFetch(params)])
+  // also trigger fetch after to make sure we reuse already fetched cache
+  const data3 = await doFetch(params)
+
+  if (data1?.name !== data2?.name || data1?.name !== data3?.name) {
+    throw new Error(
+      `Should have 3 names that are the same, instead got [${data1?.name}, ${data2?.name}, ${data3?.name}]`,
+    )
+  }
+
+  return data1
+}
+
+export default async function Page({ params }) {
+  const data = await getData(params)
+
+  return (
+    <>
+      <h1>Using same fetch multiple times</h1>
+      <dl>
+        <dt>Show</dt>
+        <dd data-testid="name">{data.name}</dd>
+        <dt>Param</dt>
+        <dd data-testid="id">{params.id}</dd>
+        <dt>Time</dt>
+        <dd data-testid="date-now">{Date.now()}</dd>
+        <dt>Time from fetch response</dt>
+        <dd data-testid="date-from-response">{data.date ?? 'no-date-in-response'}</dd>
+      </dl>
+    </>
+  )
+}
+
+// make page dynamic, but still use fetch cache
+export const fetchCache = 'force-cache'
+export const dynamic = 'force-dynamic'

tests/integration/fetch-handler.test.ts

@@ -6,9 +6,33 @@ import { v4 } from 'uuid'
 import { afterAll, beforeAll, beforeEach, expect, test, vi } from 'vitest'
 import { type FixtureTestContext } from '../utils/contexts.js'
 import { createFixture, invokeFunction, runPlugin, runPluginStep } from '../utils/fixture.js'
-import { generateRandomObjectID, startMockBlobStore } from '../utils/helpers.js'
+import { generateRandomObjectID, getBlobServerGets, startMockBlobStore } from '../utils/helpers.js'
 import { nextVersionSatisfies } from '../utils/next-version-helpers.mjs'
 
+function isFetch(key: string) {
+  // exclude tag manifests (starting with `_N_T_`), pages (starting with `/`) and static html files (keys including `.html`)
+  return !key.startsWith('_N_T_') && !key.startsWith('/') && !key.includes('.html')
+}
+
+expect.extend({
+  toBeDistinct(received: string[]) {
+    const { isNot } = this
+    const pass = new Set(received).size === received.length
+    return {
+      pass,
+      message: () => `${received} is${isNot ? ' not' : ''} array with distinct values`,
+    }
+  },
+})
+
+interface CustomMatchers<R = unknown> {
+  toBeDistinct(): R
+}
+
+declare module 'vitest' {
+  interface Assertion<T = any> extends CustomMatchers<T> {}
+}
+
 // Disable the verbose logging of the lambda-local runtime
 getLogger().level = 'alert'
 
@@ -304,3 +328,71 @@ test<FixtureTestContext>('if the fetch call is cached correctly (cached page res
     }),
   )
 })
+
+test<FixtureTestContext>('does not fetch same cached fetch data from blobs twice for the same request', async (ctx) => {
+  await createFixture('revalidate-fetch', ctx)
+  await runPluginStep(ctx, 'onPreBuild')
+  await runPlugin(ctx)
+
+  handlerCalled = 0
+  const request1 = await invokeFunction(ctx, {
+    url: 'same-fetch-multiple-times/99',
+  })
+
+  const request1FetchDate = load(request1.body)('[data-testid="date-from-response"]').text()
+  const request1Name = load(request1.body)('[data-testid="name"]').text()
+
+  expect(request1.statusCode, 'Tested page should work').toBe(200)
+  expect(request1Name, 'Test setup should use test API mock').toBe('Fake response')
+
+  expect(
+    handlerCalled,
+    'Cache should be empty, and we should hit mock endpoint once to warm up the cache',
+  ).toBe(1)
+
+  const request1FetchCacheKeys = getBlobServerGets(ctx, isFetch)
+
+  expect(
+    request1FetchCacheKeys.length,
+    'tested page should be doing 3 fetch calls to render single page - we should only try to get cached fetch data from blobs once',
+  ).toBe(1)
+
+  const request1AllCacheKeys = getBlobServerGets(ctx)
+  expect(
+    request1AllCacheKeys,
+    'expected blobs for all types of values to be retrieved at most once per key (including fetch data, tag manifests, static files)',
+  ).toBeDistinct()
+
+  ctx.blobServerGetSpy.mockClear()
+  handlerCalled = 0
+  const request2 = await invokeFunction(ctx, {
+    url: 'same-fetch-multiple-times/99',
+  })
+
+  const request2FetchDate = load(request2.body)('[data-testid="date-from-response"]').text()
+  const request2Name = load(request2.body)('[data-testid="name"]').text()
+
+  expect(request2.statusCode, 'Tested page should work').toBe(200)
+  expect(request2Name, 'Test setup should use test API mock').toBe('Fake response')
+  expect(request2FetchDate, 'Cached fetch data should be used for second request').toBe(
+    request1FetchDate,
+  )
+
+  expect(handlerCalled, 'Cache should be warm, and we should not hit mock endpoint').toBe(0)
+
+  const request2FetchCacheKeys = getBlobServerGets(ctx, isFetch)
+
+  expect(
+    request2FetchCacheKeys.length,
+    'We should not reuse in-memory cache from first request and have one fetch blob call for second request',
+  ).toBe(1)
+  expect(request2FetchCacheKeys, 'Same fetch keys should be used in both requests').toEqual(
+    request1FetchCacheKeys,
+  )
+
+  const request2AllCacheKeys = getBlobServerGets(ctx)
+  expect(
+    request2AllCacheKeys,
+    'expected blobs for all types of values to be retrieved at most once per key (including fetch data, tag manifests, static files)',
+  ).toBeDistinct()
+})