Handle unresolved references in OpenAPI response' (#2811)

Co-authored-by: Steven H <steven@gitbook.io>

packages/react-openapi/src/OpenAPIResponse.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import { OpenAPIV3 } from '@scalar/openapi-types';
-import { OpenAPIRootSchema, OpenAPISchemaProperties } from './OpenAPISchema';
-import { noReference } from './utils';
+import { OpenAPISchemaProperties } from './OpenAPISchema';
+import { checkIsReference, noReference } from './utils';
 import { OpenAPIClientContext } from './types';
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
 
@@ -38,13 +37,12 @@ export function OpenAPIResponse(props: {
                     />
                 </OpenAPIDisclosure>
             ) : null}
-
             <div className={classNames('openapi-responsebody')}>
                 <OpenAPISchemaProperties
                     id={`response-${context.blockKey}`}
                     properties={[
                         {
-                            schema: noReference(mediaType.schema) ?? {},
+                            schema: handleUnresolvedReference(mediaType.schema) ?? {},
                         },
                     ]}
                     context={context}
@@ -53,3 +51,17 @@ export function OpenAPIResponse(props: {
         </div>
     );
 }
+
+function handleUnresolvedReference(
+    input: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject | undefined,
+): OpenAPIV3.SchemaObject {
+    const isReference = checkIsReference(input);
+
+    if (isReference || input === undefined) {
+        // If we find a reference that wasn't resolved or needed to be resolved externally, do not try to render it.
+        // Instead we render `any`
+        return {};
+    }
+
+    return input;
+}

packages/react-openapi/src/OpenAPIResponseExample.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import { OpenAPIOperationData } from './fetchOpenAPIOperation';
 import { generateSchemaExample } from './generateSchemaExample';
 import { OpenAPIContextProps } from './types';
-import { noReference } from './utils';
+import { checkIsReference, noReference } from './utils';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { OpenAPIV3 } from '@scalar/openapi-types';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
@@ -62,7 +61,7 @@ export function OpenAPIResponseExample(props: {
                 };
             }
 
-            const example: OpenAPIV3.ExampleObject | null = noReference(
+            const example = handleUnresolvedReference(
                 (() => {
                     const { examples, example } = mediaTypeObject;
                     if (examples) {
@@ -129,3 +128,16 @@ function OpenAPIEmptyResponseExample() {
         </pre>
     );
 }
+
+function handleUnresolvedReference(
+    input: OpenAPIV3.ExampleObject | null,
+): OpenAPIV3.ExampleObject | null {
+    const isReference = checkIsReference(input?.value);
+
+    if (isReference) {
+        // If we find a reference that wasn't resolved or needed to be resolved externally, render out the URL
+        return { value: input.value.$ref };
+    }
+
+    return input;
+}