feat: add delete and subscription hooks

Author: tmm

src/hooks/index.ts

@@ -1,5 +1,7 @@
 export * from './use-client'
+export * from './use-delete'
 export * from './use-filter'
 export * from './use-insert'
 export * from './use-select'
+export * from './use-subscription'
 export * from './use-update'

src/hooks/use-delete.ts

@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { Count, Filter, PostgrestError, Returning } from '../types'
+import { useClient } from './use-client'
+import { initialState } from './state'
+
+export type UseDeleteState<Data = any> = {
+    count?: number | null
+    data?: Data | Data[] | null
+    error?: PostgrestError | null
+    fetching: boolean
+}
+
+export type UseDeleteResponse<Data = any> = [
+    UseDeleteState<Data>,
+    (
+        filter: Filter<Data>,
+        options?: UseDeleteOptions,
+    ) => Promise<Pick<UseDeleteState<Data>, 'count' | 'data' | 'error'>>,
+]
+
+export type UseDeleteOptions = {
+    returning?: Returning
+    count?: null | Count
+}
+
+export type UseDeleteConfig<Data = any> = {
+    filter?: Filter<Data>
+    options?: UseDeleteOptions
+}
+
+export function useDelete<Data = any>(
+    table: string,
+    config: UseDeleteConfig<Data> = { options: {} },
+): UseDeleteResponse<Data> {
+    const client = useClient()
+    const isMounted = useRef(false)
+    const [state, setState] = useState<UseDeleteState>(initialState)
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+    const execute = useCallback(
+        async (filter?: Filter<Data>, options?: UseDeleteOptions) => {
+            const refine = filter ?? config.filter
+            if (refine === undefined)
+                throw Error('update() should always be combined with `filter`')
+
+            setState({ ...initialState, fetching: true })
+            const source = client
+                .from<Data>(table)
+                .delete(options ?? config.options)
+            const { count, data, error } = await refine(source)
+
+            const res = { count, data, error }
+            if (isMounted.current) setState({ ...res, fetching: false })
+            return res
+        },
+        [client],
+    )
+    /* eslint-enable react-hooks/exhaustive-deps */
+
+    useEffect(() => {
+        isMounted.current = true
+        return () => {
+            isMounted.current = false
+        }
+    }, [])
+
+    return [state, execute]
+}

src/hooks/use-insert.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-import { PostgrestError } from '../types'
+import { Count, PostgrestError, Returning } from '../types'
 import { useClient } from './use-client'
 import { initialState } from './state'
 
@@ -20,8 +20,8 @@ export type UseInsertResponse<Data = any> = [
 ]
 
 export type UseInsertOptions = {
-    returning?: 'minimal' | 'representation'
-    count?: null | 'exact' | 'planned' | 'estimated'
+    returning?: Returning
+    count?: null | Count
 }
 
 export type UseInsertConfig = {
@@ -46,8 +46,9 @@ export function useInsert<Data = any>(
             const { count, data, error } = await client
                 .from<Data>(table)
                 .insert(values, options ?? config.options)
-            if (isMounted.current) setState({ data, error, fetching: false })
-            return { count, data, error }
+            const res = { count, data, error }
+            if (isMounted.current) setState({ ...res, fetching: false })
+            return res
         },
         [client],
     )

src/hooks/use-select.ts

@@ -25,7 +25,6 @@ export type UseSelectConfig<Data = any> = {
     columns?: string
     filter?: Filter<Data> | false | null
     options?: UseSelectOptions
-    single?: boolean
 }
 
 export function useSelect<Data = any>(

src/hooks/use-subscription.ts

@@ -0,0 +1,31 @@
+import { useEffect } from 'react'
+import {
+    SupabaseEventTypes,
+    SupabaseRealtimePayload,
+} from '@supabase/supabase-js/dist/main/lib/types'
+
+import { useClient } from './use-client'
+
+export type UseSubscriptionConfig = {
+    event?: SupabaseEventTypes
+    table?: string
+}
+
+export function useSubscription<Data = any>(
+    callback: (payload: SupabaseRealtimePayload<Data>) => void,
+    config: UseSubscriptionConfig = { event: '*', table: '*' },
+) {
+    const client = useClient()
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+    useEffect(() => {
+        const subscription = client
+            .from<Data>(config.table ?? '*')
+            .on(config.event ?? '*', callback)
+            .subscribe()
+        return () => {
+            subscription.unsubscribe()
+        }
+    }, [])
+    /* eslint-enable react-hooks/exhaustive-deps */
+}

src/hooks/use-update.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-import { Count, PostgrestError, Returning } from '../types'
+import { Count, Filter, PostgrestError, Returning } from '../types'
 import { useClient } from './use-client'
 import { initialState } from './state'
 
@@ -15,6 +15,7 @@ export type UseUpdateResponse<Data = any> = [
     UseUpdateState<Data>,
     (
         values: Partial<Data>,
+        filter?: Filter<Data>,
         options?: UseUpdateOptions,
     ) => Promise<Pick<UseUpdateState<Data>, 'count' | 'data' | 'error'>>,
 ]
@@ -24,27 +25,39 @@ export type UseUpdateOptions = {
     count?: null | Count
 }
 
-export type UseUpdateConfig = {
+export type UseUpdateConfig<Data = any> = {
+    filter?: Filter<Data>
     options?: UseUpdateOptions
 }
 
 export function useUpdate<Data = any>(
     table: string,
-    config: UseUpdateConfig = { options: {} },
+    config: UseUpdateConfig<Data> = { options: {} },
 ): UseUpdateResponse<Data> {
     const client = useClient()
     const isMounted = useRef(false)
     const [state, setState] = useState<UseUpdateState>(initialState)
 
     /* eslint-disable react-hooks/exhaustive-deps */
     const execute = useCallback(
-        async (values: Partial<Data>, options?: UseUpdateOptions) => {
+        async (
+            values: Partial<Data>,
+            filter?: Filter<Data>,
+            options?: UseUpdateOptions,
+        ) => {
+            const refine = filter ?? config.filter
+            if (refine === undefined)
+                throw Error('update() should always be combined with `filter`')
+
             setState({ ...initialState, fetching: true })
-            const { count, data, error } = await client
+            const source = client
                 .from<Data>(table)
                 .update(values, options ?? config.options)
-            if (isMounted.current) setState({ data, error, fetching: false })
-            return { count, data, error }
+            const { count, data, error } = await refine(source)
+
+            const res = { count, data, error }
+            if (isMounted.current) setState({ ...res, fetching: false })
+            return res
         },
         [client],
     )

src/index.ts

@@ -1,2 +1,3 @@
 export * from './context'
 export * from './hooks'
+export * from './types'

test/use-delete.test.tsx

@@ -0,0 +1,12 @@
+import { renderHook } from '@testing-library/react-hooks'
+
+import { useDelete } from '../src'
+
+describe('useDelete', () => {
+    it('should throw when not inside Provider', () => {
+        const { result } = renderHook(() => useDelete('todos'))
+        expect(result.error).toEqual(
+            Error('No client has been specified using Provider.'),
+        )
+    })
+})

test/use-insert.test.tsx

@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react-hooks'
 
 import { useInsert } from '../src'
 
-describe('useSelect', () => {
+describe('useInsert', () => {
     it('should throw when not inside Provider', () => {
         const { result } = renderHook(() => useInsert('todos'))
         expect(result.error).toEqual(

test/use-subscription.test.tsx

@@ -0,0 +1,12 @@
+import { renderHook } from '@testing-library/react-hooks'
+
+import { useSubscription } from '../src'
+
+describe('useSubscription', () => {
+    it('should throw when not inside Provider', () => {
+        const { result } = renderHook(() => useSubscription(jest.fn()))
+        expect(result.error).toEqual(
+            Error('No client has been specified using Provider.'),
+        )
+    })
+})

test/use-update.test.tsx

@@ -0,0 +1,12 @@
+import { renderHook } from '@testing-library/react-hooks'
+
+import { useUpdate } from '../src'
+
+describe('useUpdate', () => {
+    it('should throw when not inside Provider', () => {
+        const { result } = renderHook(() => useUpdate('todos'))
+        expect(result.error).toEqual(
+            Error('No client has been specified using Provider.'),
+        )
+    })
+})