@powersync/tanstack-react-query 0.1.7 → 0.1.8

package/lib/hooks/useQuery.js

@@ -88,3 +88,4 @@ function useQueryCore(options, queryClient, useQueryFn) {
         queryFn: query ? queryFn : resolvedOptions.queryFn
     }, queryClient);
 }
+//# sourceMappingURL=useQuery.js.map

package/lib/hooks/useQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuery.js","sourceRoot":"","sources":["../../src/hooks/useQuery.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAoBlD,MAAM,UAAU,QAAQ,CACtB,OAAqE,EACrE,cAAoC,QAAQ,CAAC,cAAc,EAAE;IAE7D,OAAO,YAAY,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAC/D,CAAC;AAeD,MAAM,UAAU,gBAAgB,CAC9B,OAA6E,EAC7E,cAAoC,QAAQ,CAAC,cAAc,EAAE;IAE7D,OAAO,YAAY,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AACvE,CAAC;AAED,SAAS,YAAY,CAMnB,OAA2C,EAC3C,WAAiC,EACjC,UAAwF;IAExF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAC;IAChD,CAAC;IAED,IAAI,KAAK,GAAsB,SAAS,CAAC;IAEzC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAC;IACzD,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC;IAE/D,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,eAAe,GAAG,EAAE,CAAC;IAEzB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,CAAC;YACH,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;YAElD,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC;YACxC,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC;QAC3C,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,KAAK,GAAG,CAAC,CAAC;QACZ,CAAC;IACH,CAAC;IAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAC1D,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,KAAK,IAAI,EAAE;QAC7B,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,SAAS,CAAC,aAAa,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;YAC5E,SAAS,CAAC,MAAM,CAAC,CAAC;QACpB,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,KAAK,GAAG,CAAC,CAAC;QACZ,CAAC;IACH,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,IAAI,CAAC,KAAK;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAErC,CAAC,KAAK,IAAI,EAAE;YACV,MAAM,WAAW,EAAE,CAAC;QACtB,CAAC,CAAC,EAAE,CAAC;QAEL,MAAM,CAAC,GAAG,SAAS,CAAC,gBAAgB,CAAC;YACnC,aAAa,EAAE,KAAK,IAAI,EAAE;gBACxB,MAAM,WAAW,EAAE,CAAC;gBACpB,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;YAChE,CAAC;SACF,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEjD,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAC3C,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;QAED,IAAI,CAAC;YACH,OAAO,OAAO,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAQ,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAC7G,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,IAAI,CAAC,KAAK;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAErC,MAAM,KAAK,GAAG,IAAI,eAAe,EAAE,CAAC;QACpC,SAAS,CAAC,oBAAoB,CAC5B;YACE,QAAQ,EAAE,GAAG,EAAE;gBACb,WAAW,CAAC,iBAAiB,CAAC;oBAC5B,QAAQ,EAAE,OAAO,CAAC,QAAQ;iBAC3B,CAAC,CAAC;YACL,CAAC;YACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,KAAK,GAAG,CAAC,CAAC;YACZ,CAAC;SACF,EACD;YACE,MAAM;YACN,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB,CACF,CAAC;QACF,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IAErD,OAAO,UAAU,CACf;QACE,GAAI,eAAiC;QACrC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO;KAClC,EAClB,WAAW,CACZ,CAAC;AACJ,CAAC"}

package/lib/index.js

@@ -1 +1,2 @@
 export { useQuery, useSuspenseQuery } from './hooks/useQuery.js';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powersync/tanstack-react-query",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -10,7 +10,8 @@
   "types": "./lib/index.d.ts",
   "type": "module",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "repository": {
     "type": "git",
@@ -23,13 +24,13 @@
   },
   "homepage": "https://docs.powersync.com",
   "peerDependencies": {
-    "@powersync/common": "^1.41.0",
+    "@powersync/common": "^1.41.1",
     "react": "*"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.70.0",
-    "@powersync/common": "1.41.0",
-    "@powersync/react": "1.8.1"
+    "@powersync/common": "1.41.1",
+    "@powersync/react": "1.8.2"
   },
   "devDependencies": {
     "@testing-library/react": "^15.0.2",
@@ -39,7 +40,7 @@
   },
   "scripts": {
     "build": "tsc -b",
-    "build:prod": "tsc -b --sourceMap false",
+    "build:prod": "tsc -b",
     "clean": "rm -rf lib tsconfig.tsbuildinfo",
     "test": "vitest",
     "watch": "tsc -b -w",

package/src/hooks/useQuery.ts

@@ -0,0 +1,158 @@
+import { parseQuery, type CompilableQuery } from '@powersync/common';
+import { usePowerSync } from '@powersync/react';
+import React from 'react';
+
+import * as Tanstack from '@tanstack/react-query';
+
+export type PowerSyncQueryOptions<T> = {
+  query?: string | CompilableQuery<T>;
+  parameters?: any[];
+};
+
+export type UseBaseQueryOptions<TQueryOptions> = TQueryOptions & PowerSyncQueryOptions<any>;
+
+export function useQuery<TData = unknown, TError = Tanstack.DefaultError>(
+  options: UseBaseQueryOptions<Tanstack.UseQueryOptions<TData, TError>> & { query?: undefined },
+  queryClient?: Tanstack.QueryClient
+): Tanstack.UseQueryResult<TData, TError>;
+
+// Overload when 'query' is present
+export function useQuery<TData = unknown, TError = Tanstack.DefaultError>(
+  options: UseBaseQueryOptions<Tanstack.UseQueryOptions<TData[], TError>> & { query: string | CompilableQuery<TData> },
+  queryClient?: Tanstack.QueryClient
+): Tanstack.UseQueryResult<TData[], TError>;
+
+export function useQuery<TData = unknown, TError = Tanstack.DefaultError>(
+  options: UseBaseQueryOptions<Tanstack.UseQueryOptions<TData, TError>>,
+  queryClient: Tanstack.QueryClient = Tanstack.useQueryClient()
+) {
+  return useQueryCore(options, queryClient, Tanstack.useQuery);
+}
+
+export function useSuspenseQuery<TData = unknown, TError = Tanstack.DefaultError>(
+  options: UseBaseQueryOptions<Tanstack.UseSuspenseQueryOptions<TData, TError>> & { query?: undefined },
+  queryClient?: Tanstack.QueryClient
+): Tanstack.UseSuspenseQueryResult<TData, TError>;
+
+// Overload when 'query' is present
+export function useSuspenseQuery<TData = unknown, TError = Tanstack.DefaultError>(
+  options: UseBaseQueryOptions<Tanstack.UseSuspenseQueryOptions<TData[], TError>> & {
+    query: string | CompilableQuery<TData>;
+  },
+  queryClient?: Tanstack.QueryClient
+): Tanstack.UseSuspenseQueryResult<TData[], TError>;
+
+export function useSuspenseQuery<TData = unknown, TError = Tanstack.DefaultError>(
+  options: UseBaseQueryOptions<Tanstack.UseSuspenseQueryOptions<TData, TError>>,
+  queryClient: Tanstack.QueryClient = Tanstack.useQueryClient()
+) {
+  return useQueryCore(options, queryClient, Tanstack.useSuspenseQuery);
+}
+
+function useQueryCore<
+  TData,
+  TError,
+  TQueryOptions extends Tanstack.UseQueryOptions<TData, TError> | Tanstack.UseSuspenseQueryOptions<TData, TError>,
+  TQueryResult extends Tanstack.UseQueryResult<TData, TError> | Tanstack.UseSuspenseQueryResult<TData, TError>
+>(
+  options: UseBaseQueryOptions<TQueryOptions>,
+  queryClient: Tanstack.QueryClient,
+  useQueryFn: (options: TQueryOptions, queryClient?: Tanstack.QueryClient) => TQueryResult
+): TQueryResult {
+  const powerSync = usePowerSync();
+
+  if (!powerSync) {
+    throw new Error('PowerSync is not available');
+  }
+
+  let error: Error | undefined = undefined;
+
+  const [tables, setTables] = React.useState<string[]>([]);
+  const { query, parameters = [], ...resolvedOptions } = options;
+
+  let sqlStatement = '';
+  let queryParameters = [];
+
+  if (query) {
+    try {
+      const parsedQuery = parseQuery(query, parameters);
+
+      sqlStatement = parsedQuery.sqlStatement;
+      queryParameters = parsedQuery.parameters;
+    } catch (e) {
+      error = e;
+    }
+  }
+
+  const stringifiedParams = JSON.stringify(queryParameters);
+  const stringifiedKey = JSON.stringify(options.queryKey);
+
+  const fetchTables = async () => {
+    try {
+      const tables = await powerSync.resolveTables(sqlStatement, queryParameters);
+      setTables(tables);
+    } catch (e) {
+      error = e;
+    }
+  };
+
+  React.useEffect(() => {
+    if (error || !query) return () => {};
+
+    (async () => {
+      await fetchTables();
+    })();
+
+    const l = powerSync.registerListener({
+      schemaChanged: async () => {
+        await fetchTables();
+        queryClient.invalidateQueries({ queryKey: options.queryKey });
+      }
+    });
+
+    return () => l?.();
+  }, [powerSync, sqlStatement, stringifiedParams]);
+
+  const queryFn = React.useCallback(async () => {
+    if (error) {
+      return Promise.reject(error);
+    }
+
+    try {
+      return typeof query == 'string' ? powerSync.getAll<TData>(sqlStatement, queryParameters) : query.execute();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [powerSync, query, parameters, stringifiedKey]);
+
+  React.useEffect(() => {
+    if (error || !query) return () => {};
+
+    const abort = new AbortController();
+    powerSync.onChangeWithCallback(
+      {
+        onChange: () => {
+          queryClient.invalidateQueries({
+            queryKey: options.queryKey
+          });
+        },
+        onError: (e) => {
+          error = e;
+        }
+      },
+      {
+        tables,
+        signal: abort.signal
+      }
+    );
+    return () => abort.abort();
+  }, [powerSync, queryClient, stringifiedKey, tables]);
+
+  return useQueryFn(
+    {
+      ...(resolvedOptions as TQueryOptions),
+      queryFn: query ? queryFn : resolvedOptions.queryFn
+    } as TQueryOptions,
+    queryClient
+  );
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { useQuery, useSuspenseQuery } from './hooks/useQuery.js';