@powersync/tanstack-react-query 0.0.2 → 0.0.3

package/lib/hooks/useQuery.d.ts

@@ -0,0 +1,19 @@
+import { type CompilableQuery } from '@powersync/common';
+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 declare function useQuery<TData = unknown, TError = Tanstack.DefaultError>(options: UseBaseQueryOptions<Tanstack.UseQueryOptions<TData, TError>> & {
+    query?: undefined;
+}, queryClient?: Tanstack.QueryClient): Tanstack.UseQueryResult<TData, TError>;
+export declare 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 declare function useSuspenseQuery<TData = unknown, TError = Tanstack.DefaultError>(options: UseBaseQueryOptions<Tanstack.UseSuspenseQueryOptions<TData, TError>> & {
+    query?: undefined;
+}, queryClient?: Tanstack.QueryClient): Tanstack.UseSuspenseQueryResult<TData, TError>;
+export declare function useSuspenseQuery<TData = unknown, TError = Tanstack.DefaultError>(options: UseBaseQueryOptions<Tanstack.UseSuspenseQueryOptions<TData[], TError>> & {
+    query: string | CompilableQuery<TData>;
+}, queryClient?: Tanstack.QueryClient): Tanstack.UseSuspenseQueryResult<TData[], TError>;

package/lib/hooks/useQuery.js

@@ -0,0 +1,86 @@
+import { parseQuery } from '@powersync/common';
+import { usePowerSync } from '@powersync/react';
+import React from 'react';
+import * as Tanstack from '@tanstack/react-query';
+export function useQuery(options, queryClient = Tanstack.useQueryClient()) {
+    return useQueryCore(options, queryClient, Tanstack.useQuery);
+}
+export function useSuspenseQuery(options, queryClient = Tanstack.useQueryClient()) {
+    return useQueryCore(options, queryClient, Tanstack.useSuspenseQuery);
+}
+function useQueryCore(options, queryClient, useQueryFn) {
+    const powerSync = usePowerSync();
+    if (!powerSync) {
+        throw new Error('PowerSync is not available');
+    }
+    const [error, setError] = React.useState(null);
+    const [tables, setTables] = React.useState([]);
+    const { query, parameters, ...resolvedOptions } = options;
+    React.useEffect(() => {
+        if (error) {
+            setError(null);
+        }
+    }, [powerSync, query, parameters, options.queryKey]);
+    let sqlStatement = '';
+    let queryParameters = [];
+    if (query) {
+        try {
+            const parsedQuery = parseQuery(query, parameters);
+            sqlStatement = parsedQuery.sqlStatement;
+            queryParameters = parsedQuery.parameters;
+        }
+        catch (e) {
+            setError(e);
+        }
+    }
+    const fetchTables = async () => {
+        try {
+            const tables = await powerSync.resolveTables(sqlStatement, queryParameters);
+            setTables(tables);
+        }
+        catch (e) {
+            setError(e);
+        }
+    };
+    React.useEffect(() => {
+        if (!query)
+            return;
+        (async () => {
+            await fetchTables();
+        })();
+    }, [powerSync, sqlStatement, queryParameters]);
+    const queryFn = React.useCallback(async () => {
+        if (error) {
+            return Promise.reject(error);
+        }
+        try {
+            return typeof query == 'string' ? powerSync.getAll(sqlStatement, queryParameters) : query.execute();
+        }
+        catch (e) {
+            return Promise.reject(e);
+        }
+    }, [powerSync, query, parameters, options.queryKey, error]);
+    React.useEffect(() => {
+        if (error || !query)
+            return () => { };
+        const abort = new AbortController();
+        powerSync.onChangeWithCallback({
+            onChange: () => {
+                queryClient.invalidateQueries({
+                    queryKey: options.queryKey
+                });
+            },
+            onError: (e) => {
+                setError(e);
+            }
+        }, {
+            tables,
+            signal: abort.signal
+        });
+        return () => abort.abort();
+    }, [powerSync, options.queryKey, queryClient, tables, error]);
+    return useQueryFn({
+        ...resolvedOptions,
+        queryFn: query ? queryFn : resolvedOptions.queryFn
+    }, queryClient);
+}

package/lib/index.d.ts

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

package/lib/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powersync/tanstack-react-query",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -38,6 +38,7 @@
   },
   "scripts": {
     "build": "tsc -b",
+    "build:prod": "tsc -b --sourceMap false",
     "clean": "rm -rf lib tsconfig.tsbuildinfo",
     "watch": "tsc -b -w"
   }