feat(react): add useQuery and useStatus hooks (#142)

Co-authored-by: DominicGBauer <dominic@nomanini.com>

Author: DominicGBauer

.changeset/strange-spiders-study.md

@@ -0,0 +1,11 @@
+---
+"react-native-supabase-group-chat": minor
+"react-native-supabase-todolist": minor
+"yjs-react-supabase-text-collab": minor
+"django-react-native-todolist": minor
+"react-supabase-todolist": minor
+"example-nextjs": minor
+"@powersync/react": minor
+---
+
+Deprecate usePowerSyncStatus, usePowerSyncQuery and usePowerSyncWatchedQuery in favor of useQuery and useStatus

demos/django-react-native-todolist/library/widgets/HeaderWidget.tsx

@@ -3,7 +3,7 @@ import { Alert, Text } from 'react-native';
 import { Icon } from 'react-native-elements';
 import { useNavigation } from 'expo-router';
 import { useSystem } from '../stores/system';
-import { usePowerSyncStatus } from '@powersync/react';
+import { useStatus } from '@powersync/react';
 import { Header } from 'react-native-elements';
 import { observer } from 'mobx-react-lite';
 import { DrawerActions } from '@react-navigation/native';
@@ -13,7 +13,7 @@ export const HeaderWidget: React.FC<{
 }> = observer((props) => {
   const { title } = props;
   const { powersync } = useSystem();
-  const status = usePowerSyncStatus();
+  const status = useStatus();
   const navigation = useNavigation();
 
   return (

demos/example-nextjs/src/app/page.tsx

@@ -2,13 +2,11 @@
 
 import React, { useEffect } from 'react';
 import { CircularProgress, Grid, ListItem, styled } from '@mui/material';
-import { useRouter } from 'next/navigation';
-import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/react';
+import { usePowerSync, useQuery } from '@powersync/react';
 
 export default function EntryPage() {
-  const router = useRouter();
   const db = usePowerSync();
-  const customers = usePowerSyncWatchedQuery('SELECT id, name FROM customers');
+  const { data: customers, isLoading } = useQuery('SELECT id, name FROM customers');
 
   useEffect(() => {
     // Insert some test data
@@ -18,6 +16,10 @@ export default function EntryPage() {
     return () => {};
   }, []);
 
+  if (isLoading) {
+    return <CircularProgress />;
+  }
+
   return (
     <S.MainGrid container>
       <S.CenteredGrid item xs={12} md={6} lg={5}>

demos/react-native-supabase-group-chat/src/app/(app)/(chats)/c/[profile]/index.tsx

@@ -1,5 +1,5 @@
 import { faker } from '@faker-js/faker';
-import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/react-native';
+import { usePowerSync, useQuery } from '@powersync/react-native';
 import { FlashList } from '@shopify/flash-list';
 import { Stack, useLocalSearchParams } from 'expo-router';
 import { useEffect, useState } from 'react';
@@ -13,12 +13,12 @@ export default function ChatsChatIndex() {
   const { profile: profileId } = useLocalSearchParams<{ profile: string }>();
   const { user } = useAuth();
   const powerSync = usePowerSync();
-  const profiles = usePowerSyncWatchedQuery('SELECT id, name, handle, demo FROM profiles WHERE id = ?', [profileId]);
+  const { data: profiles } = useQuery('SELECT id, name, handle, demo FROM profiles WHERE id = ?', [profileId]);
   const profile = profiles.length ? profiles[0] : undefined;
   const [draftId, setDraftId] = useState<string>();
   const [listMessages, setListMessages] = useState<any[]>([]);
 
-  const messages = usePowerSyncWatchedQuery(
+  const { data: messages } = useQuery(
     'SELECT sender_id, content, created_at FROM messages WHERE (((sender_id = ?1 AND recipient_id = ?2) OR (sender_id = ?2 AND recipient_id = ?1)) AND NOT (sender_id = ?1 AND sent_at IS NULL)) ORDER BY created_at ASC',
     [user?.id, profile?.id]
   );

demos/react-native-supabase-group-chat/src/app/(app)/(chats)/g/[group]/index.tsx

@@ -1,4 +1,4 @@
-import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/react-native';
+import { usePowerSync, useQuery } from '@powersync/react-native';
 import { FlashList } from '@shopify/flash-list';
 import { Stack, useLocalSearchParams } from 'expo-router';
 import { useState } from 'react';
@@ -12,10 +12,10 @@ export default function ChatsChatIndex() {
   const { group: groupId } = useLocalSearchParams<{ group: string }>();
   const { user } = useAuth();
   const powerSync = usePowerSync();
-  const groups = usePowerSyncWatchedQuery('SELECT id, name FROM groups WHERE id = ?', [groupId]);
+  const { data: groups } = useQuery('SELECT id, name FROM groups WHERE id = ?', [groupId]);
   const group = groups.length ? groups[0] : undefined;
 
-  const messages = usePowerSyncWatchedQuery(
+  const { data: messages } = useQuery(
     'SELECT sender_id, content, created_at FROM messages WHERE group_id = ? ORDER BY created_at ASC',
     [group?.id]
   );

demos/react-native-supabase-group-chat/src/app/(app)/(chats)/g/[group]/settings.tsx

@@ -1,4 +1,4 @@
-import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/react-native';
+import { usePowerSync, useQuery } from '@powersync/react-native';
 import { Save, Trash, XCircle } from '@tamagui/lucide-icons';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { useEffect, useState } from 'react';
@@ -16,8 +16,8 @@ export default function GroupSettings() {
   const [selectedContacts, setSelectedContacts] = useState<Set<string>>(new Set());
   const powerSync = usePowerSync();
 
-  const groups = usePowerSyncWatchedQuery('SELECT name FROM groups WHERE id = ?', [groupId]);
-  const groupMembers = usePowerSyncWatchedQuery('SELECT profile_id FROM memberships WHERE group_id = ?', [groupId]);
+  const { data: groups } = useQuery('SELECT name FROM groups WHERE id = ?', [groupId]);
+  const { data: groupMembers } = useQuery('SELECT profile_id FROM memberships WHERE group_id = ?', [groupId]);
 
   useEffect(() => {
     if (groups.length > 0) {
@@ -74,16 +74,13 @@ export default function GroupSettings() {
 
     await powerSync.writeTransaction(async (tx) => {
       try {
-        await tx.executeAsync('UPDATE groups SET name= ? WHERE id = ?', [name, groupId]);
+        await tx.execute('UPDATE groups SET name= ? WHERE id = ?', [name, groupId]);
         for (const profileId of removedContacts) {
-          const result = await tx.executeAsync('DELETE FROM memberships WHERE group_id = ? AND profile_id = ?', [
-            groupId,
-            profileId
-          ]);
+          await tx.execute('DELETE FROM memberships WHERE group_id = ? AND profile_id = ?', [groupId, profileId]);
         }
         for (const profileId of addedContacts) {
           const membershipId = uuid();
-          const result = await tx.executeAsync(
+          await tx.execute(
             'INSERT INTO memberships (id, group_id, profile_id, created_at) VALUES (?, ?, ?, datetime())',
             [membershipId, groupId, profileId]
           );
@@ -99,9 +96,9 @@ export default function GroupSettings() {
     async function deleteTransaction() {
       await powerSync.writeTransaction(async (tx) => {
         try {
-          await tx.executeAsync('DELETE FROM memberships WHERE group_id = ?', [groupId]);
-          await tx.executeAsync('DELETE FROM messages WHERE group_id = ?', [groupId]);
-          await tx.executeAsync('DELETE FROM groups WHERE id = ?', [groupId]);
+          await tx.execute('DELETE FROM memberships WHERE group_id = ?', [groupId]);
+          await tx.execute('DELETE FROM messages WHERE group_id = ?', [groupId]);
+          await tx.execute('DELETE FROM groups WHERE id = ?', [groupId]);
 
           router.back();
         } catch (error) {
@@ -148,8 +145,7 @@ export default function GroupSettings() {
             backgroundColor="$red10"
             color="white"
             onPress={handleDelete}
-            margin="$3"
-          >
+            margin="$3">
             Delete group
           </Button>
         </YStack>

demos/react-native-supabase-group-chat/src/app/(app)/(chats)/index.tsx

@@ -1,4 +1,4 @@
-import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/react-native';
+import { usePowerSync, useQuery } from '@powersync/react-native';
 import { MessageSquare, Plus } from '@tamagui/lucide-icons';
 import { Link, useNavigation } from 'expo-router';
 import { useEffect, useState } from 'react';
@@ -24,7 +24,7 @@ export default function ChatsIndex() {
     return unsubscribe;
   }, [navigation]);
 
-  const chats = usePowerSyncWatchedQuery(
+  const { data: chats } = useQuery(
     `SELECT profiles.id as partner_id, profiles.name as name, profiles.handle as handle, 'contact' as type, m.created_at as last_message_at FROM chats LEFT JOIN profiles on chats.id = profiles.id LEFT JOIN (SELECT * FROM messages WHERE (sender_id, recipient_id, created_at) IN (SELECT sender_id, recipient_id, MAX(created_at) FROM messages GROUP BY group_id)) as m ON m.recipient_id = chats.id OR m.sender_id = chats.id WHERE (name LIKE '%' || ?1 || '%' OR handle LIKE '%' || ?1 || '%') GROUP BY profiles.id UNION
     SELECT groups.id as partner_id, groups.name as name, '' as handle, 'group' as type, m.created_at as last_message_at FROM groups LEFT JOIN (SELECT * FROM messages WHERE (group_id, created_at) IN (SELECT group_id, MAX(created_at) FROM messages GROUP BY group_id)) as m ON m.group_id = groups.id WHERE (name LIKE '%' || ?1 || '%') GROUP BY groups.id ORDER BY last_message_at DESC`,
     [search]

demos/react-native-supabase-group-chat/src/app/(app)/contacts/index.tsx

@@ -1,5 +1,5 @@
 import { faker } from '@faker-js/faker';
-import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/react-native';
+import { usePowerSync, useQuery } from '@powersync/react-native';
 import { Search, Shuffle } from '@tamagui/lucide-icons';
 import { useState } from 'react';
 import { Button, Input, XStack, YStack } from 'tamagui';
@@ -17,7 +17,7 @@ export default function ContactsIndex() {
   const [search, setSearch] = useState<string>('');
   const [profiles, setProfiles] = useState<any[]>([]);
 
-  const contacts = usePowerSyncWatchedQuery(
+  const { data: contacts } = useQuery(
     "SELECT contacts.id, profiles.id as profile_id, profiles.name, profiles.handle, 'contact' as type FROM contacts LEFT JOIN profiles ON contacts.profile_id = profiles.id WHERE (profiles.name LIKE '%' || ?1 || '%' OR profiles.handle LIKE '%' || ?1 || '%') ORDER BY name ASC",
     [search]
   );

demos/react-native-supabase-group-chat/src/app/(app)/settings/index.tsx

@@ -1,4 +1,4 @@
-import { usePowerSync, usePowerSyncWatchedQuery } from '@powersync/react-native';
+import { usePowerSync, useQuery } from '@powersync/react-native';
 import { useEffect, useState } from 'react';
 import { Button, Input, Label, Switch, Text, XStack, YStack } from 'tamagui';
 
@@ -10,7 +10,7 @@ export default function SettingsIndex() {
   const [name, setName] = useState('');
   const [handle, setHandle] = useState('');
 
-  const profiles = usePowerSyncWatchedQuery('SELECT * FROM profiles WHERE id = ?', [user?.id]);
+  const { data: profiles } = useQuery('SELECT * FROM profiles WHERE id = ?', [user?.id]);
 
   useEffect(() => {
     if (profiles.length > 0) {

demos/react-native-supabase-group-chat/src/components/groups/MemberSelector.tsx

@@ -1,4 +1,4 @@
-import { usePowerSyncWatchedQuery } from '@powersync/react-native';
+import { useQuery } from '@powersync/react-native';
 import { CheckCircle2, Circle } from '@tamagui/lucide-icons';
 import { useState } from 'react';
 import { Input, ListItem, XStack, YStack } from 'tamagui';
@@ -15,7 +15,7 @@ export function MemberSelector({
 }) {
   const [search, setSearch] = useState<string>('');
 
-  const contacts = usePowerSyncWatchedQuery(
+  const { data: contacts } = useQuery(
     "SELECT contacts.id, profiles.id as profile_id, profiles.name, profiles.handle, 'contact' as type FROM contacts LEFT JOIN profiles ON contacts.profile_id = profiles.id WHERE (profiles.name LIKE '%' || ?1 || '%' OR profiles.handle LIKE '%' || ?1 || '%') ORDER BY name ASC",
     [search]
   );