From 433a609a1503ba44a03601f0766c65bad9e3cfa4 Mon Sep 17 00:00:00 2001
From: David Weber <david.weber@w3tec.ch>
Date: Wed, 20 Apr 2022 23:35:25 +0200
Subject: [PATCH] fix: add fetch resolver to use an url with \$ref

Signed-off-by: David Weber <david.weber@w3tec.ch>
---
 .changeset/wild-pigs-work.md                    |  5 +++++
 .../AsyncApiDefinition.tsx                      | 17 ++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wild-pigs-work.md

diff --git a/.changeset/wild-pigs-work.md b/.changeset/wild-pigs-work.md
new file mode 100644
index 0000000000..462b3b7233
--- /dev/null
+++ b/.changeset/wild-pigs-work.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Updated the rendering of AsyncApi definitions to be able to resolve absolute HTTP $ref references.
diff --git a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx
index 3f9375921d..fd8948828c 100644
--- a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx
+++ b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx
@@ -142,6 +142,21 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
   },
 }));
 
+const fetchResolver = {
+  order: 199, // Use 199 as the built-in http resolver is 200
+  canRead: /^https?:\/\//,
+  async read(file: any) {
+    const response = await fetch(file.url);
+    return response.text();
+  },
+};
+
+const config = {
+  parserOptions: {
+    resolve: { fetch: fetchResolver },
+  },
+};
+
 type Props = {
   definition: string;
 };
@@ -155,7 +170,7 @@ export const AsyncApiDefinition = ({ definition }: Props): JSX.Element => {
 
   return (
     <div className={classNames}>
-      <AsyncApi schema={definition} />
+      <AsyncApi schema={definition} config={config} />
     </div>
   );
 };