Pass selection options to useRealtme hook (#21)

* feat: added select options to useSubscription

* feat: pass type to compare fn

* test: added tests to cover new args

* docs: update example

* ci: update size (#23)

* feat: update useRealtime args

* feat: add default type

* docs: highlight correct row

Co-authored-by: Tom Meagher <[email protected]>

Author: kachar

docs/pages/documentation/realtime/use-realtime.md

@@ -18,12 +18,38 @@ You can pass a function for comparing subscription event changes. By default, th
 
 When using your own compare function, you typically want to compare unique values:
 
-```tsx highlight=6
+```tsx highlight=7
 import { useRealtime } from 'react-supabase'
 
 function Page() {
   const [result, reexecute] = useRealtime(
     'todos',
+    { select: { columns:'id, username' } },
+    (data, payload) => data.username === payload.username,
+  )
+
+  return ...
+}
+```
+
+## Initial selection of records
+
+When initializing the component you might need to filter your data appropriately. You can pass the options directly to the `useSelect` hook.
+
+First argument can be either a `string` table name or `useSelect` options with table property.
+
+```tsx highlight=7,8,9,10
+import { useRealtime } from 'react-supabase'
+
+function Page() {
+  const [result, reexecute] = useRealtime(
+    'todos',
+    {
+      select: {
+        columns: 'id, username, description',
+        filter: (query) => query.eq('completed', false),
+      }
+    },
     (data, payload) => data.username === payload.username,
   )
 

src/hooks/realtime/use-realtime.ts

@@ -1,7 +1,7 @@
 import { useEffect, useReducer } from 'react'
 import { SupabaseRealtimePayload } from '@supabase/supabase-js'
 
-import { UseSelectState, useSelect } from '../data'
+import { UseSelectConfig, UseSelectState, useSelect } from '../data'
 import { useSubscription } from './use-subscription'
 
 export type UseRealtimeState<Data = any> = Omit<
@@ -23,6 +23,10 @@ export type UseRealtimeAction<Data = any> =
     | { type: 'FETCH'; payload: UseSelectState<Data> }
     | { type: 'SUBSCRIPTION'; payload: SupabaseRealtimePayload<Data> }
 
+export type UseRealtimeConfig<Data = any> = {
+    select?: Omit<UseSelectConfig<Data>, 'pause'>
+}
+
 export type UseRealtimeCompareFn<Data = any> = (
     data: Data,
     payload: Data,
@@ -32,6 +36,7 @@ type CompareFnDefaultData<Data> = Data & { id: any }
 
 export function useRealtime<Data = any>(
     table: string,
+    config?: UseRealtimeConfig<Data>,
     compareFn: UseRealtimeCompareFn<Data> = (a, b) =>
         (<CompareFnDefaultData<Data>>a).id ===
         (<CompareFnDefaultData<Data>>b).id,
@@ -41,7 +46,7 @@ export function useRealtime<Data = any>(
             'Must specify table or row. Cannot listen for all database changes.',
         )
 
-    const [result, reexecute] = useSelect<Data>(table)
+    const [result, reexecute] = useSelect<Data>(table, config?.select)
     const [state, dispatch] = useReducer<
         React.Reducer<UseRealtimeState<Data>, UseRealtimeAction<Data>>
     >(reducer(compareFn), result)
@@ -58,7 +63,7 @@ export function useRealtime<Data = any>(
 }
 
 const reducer =
-    <Data = any>(compareFn: UseRealtimeCompareFn) =>
+    <Data = any>(compareFn: UseRealtimeCompareFn<Data>) =>
     (
         state: UseRealtimeState<Data>,
         action: UseRealtimeAction<Data>,

test/hooks/realtime/__snapshots__/use-realtime.test.tsx.snap

@@ -3,3 +3,5 @@
 exports[`useRealtime should throw when not inside Provider 1`] = `"No client has been specified using Provider."`;
 
 exports[`useRealtime should throw when trying to listen all database changes 1`] = `"Must specify table or row. Cannot listen for all database changes."`;
+
+exports[`useRealtime should throw when trying to listen all database changes via options 1`] = `"Must specify table or row. Cannot listen for all database changes."`;

test/hooks/realtime/use-realtime.test.tsx

@@ -13,4 +13,18 @@ describe('useRealtime', () => {
         const { result } = renderHook(() => useRealtime('*'), { wrapper })
         expect(() => result.current).toThrowErrorMatchingSnapshot()
     })
+
+    it('should throw when trying to listen all database changes via options', () => {
+        const { result } = renderHook(
+            () =>
+                useRealtime('*', {
+                    select: {
+                        columns: 'id, username, completed',
+                        filter: (query) => query.eq('completed', false),
+                    },
+                }),
+            { wrapper },
+        )
+        expect(() => result.current).toThrowErrorMatchingSnapshot()
+    })
 })