Update hook results to be readonly

Author: stevensJourney

.changeset/tricky-bottles-greet.md

@@ -0,0 +1,6 @@
+---
+'@powersync/react': minor
+'@powersync/vue': minor
+---
+
+[Potentially breaking change] The `useQuery` hook results are now explicitly defined as readonly. These values should not be mutated.

packages/react/src/hooks/watched/useWatchedQuery.ts

@@ -41,12 +41,5 @@ export const useWatchedQuery = <RowType = unknown>(
     }
   }, [queryChanged]);
 
-  const result = useWatchedQuerySubscription(watchedQuery);
-  return {
-    ...result,
-    // The Watched Query API returns readonly arrays.
-    // We need to keep the same reference also.
-    // This allows compatibility with the hook API.
-    data: result.data as RowType[]
-  };
+  return useWatchedQuerySubscription(watchedQuery);
 };

packages/react/src/hooks/watched/watch-types.ts

@@ -10,16 +10,16 @@ export interface AdditionalOptions<RowType = unknown> extends HookWatchOptions<R
 }
 
 export type QueryResult<RowType> = {
-  data: RowType[];
+  readonly data: ReadonlyArray<Readonly<RowType>>;
   /**
    * Indicates the initial loading state (hard loading). Loading becomes false once the first set of results from the watched query is available or an error occurs.
    */
-  isLoading: boolean;
+  readonly isLoading: boolean;
   /**
    * Indicates whether the query is currently fetching data, is true during the initial load and any time when the query is re-evaluating (useful for large queries).
    */
-  isFetching: boolean;
-  error: Error | undefined;
+  readonly isFetching: boolean;
+  readonly error: Error | undefined;
   /**
    * Function used to run the query again.
    */

packages/vue/src/composables/useQuery.ts

@@ -4,16 +4,16 @@ import { AdditionalOptions, useSingleQuery } from './useSingleQuery';
 import { useWatchedQuery } from './useWatchedQuery';
 
 export type WatchedQueryResult<T> = {
-  data: Ref<T[]>;
+  readonly data: Ref<ReadonlyArray<Readonly<T>>>;
   /**
    * Indicates the initial loading state (hard loading). Loading becomes false once the first set of results from the watched query is available or an error occurs.
    */
-  isLoading: Ref<boolean>;
+  readonly isLoading: Ref<boolean>;
   /**
    * Indicates whether the query is currently fetching data, is true during the initial load and any time when the query is re-evaluating (useful for large queries).
    */
-  isFetching: Ref<boolean>;
-  error: Ref<Error | undefined>;
+  readonly isFetching: Ref<boolean>;
+  readonly error: Ref<Error | undefined>;
   /**
    * Function used to run the query again.
    */

packages/vue/src/composables/useSingleQuery.ts

@@ -14,16 +14,16 @@ export interface AdditionalOptions<RowType = unknown> extends Omit<SQLOnChangeOp
 }
 
 export type WatchedQueryResult<T> = {
-  data: Ref<T[]>;
+  readonly data: Ref<ReadonlyArray<Readonly<T>>>;
   /**
    * Indicates the initial loading state (hard loading). Loading becomes false once the first set of results from the watched query is available or an error occurs.
    */
-  isLoading: Ref<boolean>;
+  readonly isLoading: Ref<boolean>;
   /**
    * Indicates whether the query is currently fetching data, is true during the initial load and any time when the query is re-evaluating (useful for large queries).
    */
-  isFetching: Ref<boolean>;
-  error: Ref<Error | undefined>;
+  readonly isFetching: Ref<boolean>;
+  readonly error: Ref<Error | undefined>;
   /**
    * Function used to run the query again.
    */
@@ -35,7 +35,7 @@ export const useSingleQuery = <T = any>(
   sqlParameters: MaybeRef<any[]> = [],
   options: AdditionalOptions<T> = {}
 ): WatchedQueryResult<T> => {
-  const data = ref<T[]>([]) as Ref<T[]>;
+  const data = ref<ReadonlyArray<Readonly<T>>>([]) as Ref<ReadonlyArray<Readonly<T>>>;
   const error = ref<Error | undefined>(undefined);
   const isLoading = ref(true);
   const isFetching = ref(true);

packages/vue/src/composables/useWatchedQuery.ts

@@ -8,7 +8,7 @@ export const useWatchedQuery = <T = any>(
   sqlParameters: MaybeRef<any[]> = [],
   options: AdditionalOptions<T> = {}
 ): WatchedQueryResult<T> => {
-  const data = ref<T[]>([]) as Ref<T[]>;
+  const data = ref<ReadonlyArray<Readonly<T>>>([]) as Ref<ReadonlyArray<Readonly<T>>>;
   const error = ref<Error | undefined>(undefined);
   const isLoading = ref(true);
   const isFetching = ref(true);
@@ -72,8 +72,7 @@ export const useWatchedQuery = <T = any>(
       onStateChange: (state) => {
         isLoading.value = state.isLoading;
         isFetching.value = state.isFetching;
-        // The watched query state is readonly
-        data.value = state.data as T[];
+        data.value = state.data;
         if (state.error) {
           const wrappedError = new Error('PowerSync failed to fetch data: ' + state.error.message);
           wrappedError.cause = state.error;