From ca5bc1666112452c9ed345a2d6459f48a02bb313 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Thu, 14 Nov 2024 17:49:04 +0000
Subject: [PATCH] fix(deps): sets srcData to unknown only within DataLoader
 (#3185)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ideally we wouldn't have to set srcData to `unknown` here and we'd
continue to use `TypeOf<T>` which is the type returned by the src from
the `sources.ts` file, whatever that is.

Thing is our upgrade to vue 3.5 is breaking in this area
(https://github.com/kumahq/kuma-gui/pull/3062).

I was kinda holding off with the hope that it would be sorted upstream,
and I wanted to avoid using a `@ts-ignore` in order to upgrade. It's
also worth noting that srcError uses the exact same construct, but
doesn't cause TS issues, which I think is due to it not using a generic
type.

Then I had another idea. Seeing as we mostly cast `srcData` back to a
`NonNullable<TypeOf<T>>` in most places anyway, and we don't need to
refer to it within the component at all, we may as well treat it as
`unknown`, which is kinda better than using `@ts-ignore`. If we use
`unknown` if you do try to use `srcData` within the component you will
have to infer it some other way.

I gave this a whirl against https://github.com/kumahq/kuma-gui/pull/3062
and it seems to work fine 🎉 so I decided to PR it separately so we can
then rebase the Vue upgrade and move forwards with that.

---

edit: I made one more amend here post approval which was to be more
careful with the type we use for the exported `data`, for example in
`#loadable` `data` can be `undefined` until the DataLoader has loaded,
so we don't want to use `NonNullable` there

---------

Signed-off-by: John Cowen <john.cowen@konghq.com>
---
 .../components/data-source/DataLoader.vue            | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue b/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue
index fa5c933c3..6e21a8de1 100644
--- a/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue
+++ b/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue
@@ -15,7 +15,7 @@
       >
         <slot
           name="disconnected"
-          :data="srcData"
+          :data="srcData as NonNullable<TypeOf<T>>"
           :error="allErrors[0]"
           :refresh="props.src !== '' ? refresh : () => {}"
         >
@@ -24,13 +24,13 @@
       </template>
       <slot
         name="loadable"
-        :data="srcData"
+        :data="srcData as TypeOf<T>"
         :error="srcError"
         :refresh="props.src !== '' ? refresh : () => {}"
       />
       <slot
         name="default"
-        :data="srcData as NonNullable<typeof srcData>"
+        :data="srcData as NonNullable<TypeOf<T>>"
         :error="srcError"
         :refresh="props.src !== '' ? refresh : () => {}"
       />
@@ -54,7 +54,7 @@
     <template v-else>
       <slot
         name="loadable"
-        :data="srcData"
+        :data="srcData as TypeOf<T>"
         :error="srcError"
         :refresh="props.src !== '' ? refresh : () => {}"
       />
@@ -72,7 +72,7 @@
       <slot
         v-else
         name="default"
-        :data="srcData as NonNullable<typeof srcData>"
+        :data="srcData as NonNullable<TypeOf<T>>"
         :error="srcError"
         :refresh="props.src !== '' ? refresh : () => {}"
       />
@@ -104,7 +104,7 @@ const props = withDefaults(defineProps<{
 
 const slots = useSlots()
 
-const srcData = ref<TypeOf<T> | undefined>(undefined)
+const srcData = ref<unknown>(undefined)
 const srcError = ref<Error | undefined>(undefined)
 
 const allData = computed(() => {