improve Vue reactivity internals.

Author: stevensJourney

packages/vue/src/composables/useWatchedQuerySubscription.ts

@@ -1,5 +1,9 @@
 import { WatchedQuery } from '@powersync/common';
-import { reactive, UnwrapNestedRefs, watchEffect } from 'vue';
+import { Ref, ref, watchEffect } from 'vue';
+
+type RefState<ResultType = unknown, Query extends WatchedQuery<ResultType> = WatchedQuery<ResultType>> = {
+  [K in keyof Query['state']]: Ref<Query['state'][K]>;
+};
 
 /**
  * A composable to access and subscribe to the results of an existing {@link WatchedQuery} instance.
@@ -27,18 +31,30 @@ export const useWatchedQuerySubscription = <
   Query extends WatchedQuery<ResultType> = WatchedQuery<ResultType>
 >(
   query: Query
-): UnwrapNestedRefs<Query['state']> => {
-  // Creates a reactive variable which will proxy the state
-  const state = reactive({ ...query.state }) as UnwrapNestedRefs<Query['state']>;
+): RefState<ResultType, Query> => {
+  // This uses individual refs in order for the destructured use of this hook's return value to
+  // function correctly.
+  const data = ref(query.state.data) as Ref<Query['state']['data']>;
+  const error = ref(query.state.error);
+  const isLoading = ref(query.state.isLoading);
+  const isFetching = ref(query.state.isFetching);
 
   watchEffect((onCleanup) => {
     const dispose = query.registerListener({
       onStateChange: (updatedState) => {
-        Object.assign(state, updatedState);
+        data.value = updatedState.data;
+        error.value = updatedState.error;
+        isFetching.value = updatedState.isFetching;
+        isLoading.value = updatedState.isLoading;
       }
     });
     onCleanup(() => dispose());
   });
 
-  return state;
+  return {
+    data,
+    error,
+    isFetching,
+    isLoading
+  } as RefState<ResultType, Query>;
 };