Cache OpenAPI using next "use cache" for v2 (#2887)

Author: SamyPesse

packages/gitbook/e2e/util.ts

@@ -154,6 +154,12 @@ export function runTestCases(testCases: TestsCase[]) {
  }))
  );
  }
+
+ // Disable the Vercel toolbar
+ await page.setExtraHTTPHeaders({
+ 'x-vercel-skip-toolbar': '1',
+ });
+
  await page.goto(url);
  if (testEntry.run) {
  await testEntry.run(page);

packages/gitbook/src/lib/openapi/fetch.ts

@@ -6,6 +6,7 @@ import type { GitBookAnyContext } from '@v2/lib/context';
 import { type CacheFunctionOptions, cache, noCacheFetchOptions } from '@/lib/cache';
 
 import { resolveContentRef } from '../references';
+import { isV2 } from '../v2';
 import { enrichFilesystem } from './enrich';
 
 const weakmap = new WeakMap<DocumentBlockOpenAPI, ResolveOpenAPIBlockResult>();
@@ -65,32 +66,18 @@ async function baseResolveOpenAPIBlock(args: ResolveOpenAPIBlockArgs): ResolveOp
  }
 }
 
-const fetchFilesystem = cache({
- name: 'openapi.fetch.v6',
- get: async (url: string, options: CacheFunctionOptions) => {
- // Wrap the raw string to prevent invalid URLs from being passed to fetch.
- // This can happen if the URL has whitespace, which is currently handled differently by Cloudflare's implementation of fetch:
- // https://github.com/cloudflare/workerd/issues/1957
- const response = await fetch(new URL(url), {
- ...noCacheFetchOptions,
- signal: options.signal,
- });
+function fetchFilesystem(url: string) {
+ if (isV2()) {
+ return fetchFilesystemV2(url);
+ }
 
- if (!response.ok) {
- throw new Error(
- `Failed to fetch OpenAPI file: ${response.status} ${response.statusText}`
- );
- }
+ return fetchFilesystemV1(url);
+}
 
- const text = await response.text();
- const filesystem = await parseOpenAPI({
- value: text,
- rootURL: url,
- // If we fetch the OpenAPI specification
- // it's the legacy system, it means the spec can be trusted here.
- trust: true,
- });
- const richFilesystem = await enrichFilesystem(filesystem);
+const fetchFilesystemV1 = cache({
+ name: 'openapi.fetch.v6',
+ get: async (url: string, options: CacheFunctionOptions) => {
+ const richFilesystem = await fetchFilesystemUncached(url, options);
  return {
  // Cache for 4 hours
  ttl: 24 * 60 * 60,
@@ -100,3 +87,44 @@ const fetchFilesystem = cache({
  };
  },
 });
+
+async function fetchFilesystemV2(url: string) {
+ 'use cache';
+
+ // TODO: add cache lifetime once we can use next.js 15 code here
+
+ const response = await fetchFilesystemUncached(url);
+
+ return response;
+}
+
+async function fetchFilesystemUncached(
+ url: string,
+ options?: {
+ signal?: AbortSignal;
+ }
+) {
+ // Wrap the raw string to prevent invalid URLs from being passed to fetch.
+ // This can happen if the URL has whitespace, which is currently handled differently by Cloudflare's implementation of fetch:
+ // https://github.com/cloudflare/workerd/issues/1957
+ const response = await fetch(new URL(url), {
+ ...noCacheFetchOptions,
+ signal: options?.signal,
+ });
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch OpenAPI file: ${response.status} ${response.statusText}`);
+ }
+
+ const text = await response.text();
+ const filesystem = await parseOpenAPI({
+ value: text,
+ rootURL: url,
+ // If we fetch the OpenAPI specification
+ // it's the legacy system, it means the spec can be trusted here.
+ trust: true,
+ });
+ const richFilesystem = await enrichFilesystem(filesystem);
+
+ return richFilesystem;
+}

packages/gitbook/src/lib/v2.ts

@@ -1,8 +1,15 @@
+/**
+ * Check if the code is running in v2.
+ */
+export function isV2() {
+ return process.env.GITBOOK_V2 === 'true';
+}
+
 /**
  * Assert that the code is not running in v2.
  */
 export function assertIsNotV2() {
- if (process.env.GITBOOK_V2 === 'true') {
+ if (isV2()) {
  throw new Error('This code is not available in V2');
  }
 }

packages/react-openapi/src/OpenAPICodeSample.tsx

@@ -5,8 +5,7 @@ import { generateMediaTypeExample, generateSchemaExample } from './generateSchem
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
 import { getDefaultServerURL } from './util/server';
-import { createStateKey } from './utils';
-import { checkIsReference } from './utils';
+import { checkIsReference, createStateKey } from './utils';
 
 /**
  * Display code samples to execute the operation.
@@ -95,8 +94,8 @@ export function OpenAPICodeSample(props: {
  typeof sample.lang === 'string'
  );
  })
- .map((sample) => ({
- key: `redocly-${sample.lang}`,
+ .map((sample, index) => ({
+ key: `redocly-${sample.lang}-${index}`,
  label: sample.label,
  body: context.renderCodeBlock({
  code: sample.source,